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!

Tobi
  • 43
  • 6
  • Possible duplicate of [bootstrap 4 responsive utilities visible / hidden xs sm lg not working](https://stackoverflow.com/questions/45666656/bootstrap-4-responsive-utilities-visible-hidden-xs-sm-lg-not-working) – mahan Jun 14 '18 at 21:02

1 Answers1

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.

pasta1020
  • 188
  • 1
  • 2
  • 11
  • 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 '18 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 '18 at 22:23