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

admin管理员组

文章数量:1026987

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?

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?

• javascript
• twitter-bootstrap
• bootstrap-4

Share Improve this question Follow asked Aug 13, 2017 at 21:11 brinchbrinch 2,62488 gold badges3636 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I believe you are looking for the display properties.

<div class="d-xl-none d-lg-none d-md-none d-sm-block d-xs-none">This would only show for sm</div>

This will show the div for sm only.

@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>

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?

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?

• javascript
• twitter-bootstrap
• bootstrap-4

Share Improve this question Follow asked Aug 13, 2017 at 21:11 brinchbrinch 2,62488 gold badges3636 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I believe you are looking for the display properties.

<div class="d-xl-none d-lg-none d-md-none d-sm-block d-xs-none">This would only show for sm</div>

This will show the div for sm only.

@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>

本文标签： javascriptBootstrap 4 betahow to display div for sm onlyStack Overflow