Bootstrap 4 - hidden classes - hide only on small screens

Question

How to hide span content only on small (see) screens? I need this content visible on xs screens.

 <span class="hidden-sm-down">Text</span> 

Is there a way to do this using only bootstrap classes or not?

Answer 1

With Bootstrap 4 Beta 1, you can hide sm only with d-block d-sm-none d-md-block .

https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/

Answer 2

There is the following update for Bootstrap 4, which will allow you to hide it in one viewport ( hidden-x ) ..

https://github.com/twbs/bootstrap/pull/22113

In this update, all visibility classes will be updated.

---

Update for Bootstrap 4 Beta

If you want to hide an element at certain levels (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember that xs is the default breakpoint (always implied) unless it is overridden by a larger breakpoint.

https://www.codeply.com/go/bRlHp8MxtJ

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = d-none (same as hidden )
• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down )
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (only) = d-block d-xl-none

Demo of all hidden / visible classes in beta version of Bootstrap 4

Also note that d-*-block can be replaced with d-*-inline , d-*-flex , etc. depending on the type of display of the item. Learn more about displaying classes in beta

Answer 3

After reading the documents again, which cannot be achieved using the bootstrap classes and must be executed by ourselves.

So I finished this:

imported mixins and variables from bootstrap and

 @each $bp in map-keys($grid-breakpoints) { .visible-#{$bp}-up { @include media-breakpoint-up($bp) { display: block !important; } } .visible-#{$bp}-down { @include media-breakpoint-down($bp) { display: block !important; } } } 

Answer 4

This is pretty easy. All you need to know is how to use the bootstrap class 4 correctly.

Link: https://getbootstrap.com/docs/4.0/utilities/display/

First think about how to divide it into three ordered groups. (When a group is not applicable, omit this group)

 (hide_lower_limit) (display_size) (hide_upper_limit) 

1. (hide_lower_limit) : has only one class .d-none

2. (display_size) : dimensions that should be visible (not hidden), for example :. .d-sm-block .d-md-block . It will have the format .d-<size>-block

3. (hide_upper_limit) : The upper limit that should be hidden. This has the format .d-<size+1>-none

---

Let's look at some examples

Q1: display on md and more.

ans:

Start with the visible screen size (display_size) :. .d-md-block .

Then think about all screen sizes that should be hidden, i.e. About all screen sizes.

• less than md hidden, (hide_lower_limit) : .d-none
• more than md not hidden, (hide_upper_limit) : <omit>

d -none d- md-block

Q2: display on sm and less.

ans: (display_size) :. .d-sm-block .

Hidden screen sizes

• less than sm not hiding, (hide_lower_limit) : <omit> (hide_lower_limit) <omit>
• hidden more than sm , (hide_upper_limit) :. .d-md-none

d- cm -block d- md -none

Q3: only visible in sm and md

ans: (display_size) :. .d-sm-block.d-md-block .

Hidden screen sizes

• less than sm hidden (hide_lower_limit) : .d-none
• hidden more than sm , (hide_upper_limit) :. .d-lg-none

d -none d- md -block d- cm -block d- lg -none