0

What I want to achieve: In my base.html I want to create a card to put the main content on all pages inside a nice border. But however: This border shouldn't appear on smaller than md-Devices to make the content not super small.

What I tried:

base.html

  <div class="card d-none d-lg-block">
  <div class="card-body d-none d-lg-block">


     {% block content %}
     {% endblock %}

       </div>
</div>

   <div class="d-md-none">
  <div class="d-md-none">


     {% block content %}
     {% endblock %}

       </div>
</div> 

This of course brings the following error:

TemplateSyntaxError at /

'block' tag with name 'content' appears more than once

But how could I implement this? Any input is highly appreciated!

1

1 Answer 1

0

This will hide your card on all devices smaller than medium:

<div class="card d-none d-md-block">
<div class="card-body d-none d-md-block">
    {% block card %}
    {% endblock %}

</div>
</div>

<div>
    {% block content %}
    {% endblock %}
</div>

See bootstrap for reference https://getbootstrap.com/docs/4.1/utilities/display/

To show an element only on a given interval of screen sizes you can combine one .d--none class with a .d--* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Edited to add this link https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854 which you might find helpful too.

2
  • Thanks for your reply! This actually also causes that no content at all is shown on smaller than medium devices. The {...} part should be rendered on all screens - but only once.
    – Tobi
    Jun 14, 2018 at 21:06
  • I edited my answer - create a block for the card and another for the content - then you can always display the content and only display the card under the conditions you want.
    – pasta1020
    Jun 14, 2018 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.