Bootstrap 4 beta - how to display div for sm only?

user_3508762 0
Viewed 1111

In Bootstrap alpha 6 I could write this, to have a div's contents only show for sm:

<div class="hidden-md-up hidden-xs-down">
   This would only show for sm in Bootstrap 4 alpha 6.
</div>

This no longer works in the Bootstrap 4 beta.

How can I show a div's content for sm only, using bootstrap 4 beta?

bootstrap-4 twitter-bootstrap javascript
2 Answers

@styfle was right to use display properties. But keep in mind it's all mobile first, so start with xs and then go up with md, lg...

If we only want to display in sm:

  • First we do not want to have it in xs so we need to drop it there with d-none (think of its scope as @media (min-width: 0px)).
  • Second we want to have it in sm so display it there with d-sm-block (scope: @media (min-width: 576px)).
  • Third we do not want to have it in md so drop it there with d-md-none (scope: @media (min-width: 768px)),
  • (Fourth, no more necessary, as d-md-none already scopes cases for lg and xl.)

So altogether we get:

<div class="d-none d-sm-block d-md-none">
   This would only show for sm in Bootstrap 4 Beta
</div>

Another example:
Display only in sm and lg.

<div class="d-none d-sm-block d-md-none d-lg-block d-xl-none">
    This would only show for sm and lg in Bootstrap 4 Beta
</div>
user_17816860
Related