Bootstrap 4: Hidden Visible Cols?

Question

I was wondering why the following isn't working - whereby xs is hidden in xs views. I feel it is something to do with changes introduced in Bootstrap v4, but I was wondering how this was still achievable within the code here than going into the CSS? I am using the default bootstrap.css file.

<div class="container">
    <div class="row">
    <div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12">
    Some text here.
    </div>
</div>

Answer 1

Adding this answer because the comments in the accepted answer are getting too long and it's not complete. As already explained, the hidden-* classes no longer exist in Bootstrap 4 beta.

"What exactly is hidden-sm-DOWN?"

It no longer exists in beta, but it previous versions it meant "hidden on small and down". Meaning, hidden on xs and sm, but otherwise visible.

If you want to hide an element on specific tiers (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (always implied) breakpoint, unless overridden by a larger breakpoint. Since xs is implied, you no longer use the -xs- infix. For example, it's not d-xs-none, it's simply d-none.

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-up = d-none (same as hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up = d-xl-none
• 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
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (only) = d-none d-xl-block

Demo of all hidden / visible classes in Bootstrap 4 beta

Also note that d-*-block can be replaced with d-*-inline, d-*-flex, etc.. depending on the display type of the element. More on the display classes in beta

---

Also see:
Bootstrap 4 hidden-X-(down/up) class not working
Missing visible-** and hidden-** in Bootstrap v4

Answer 2

EDIT the hidden-* properties are removed from the bootstrap beta 4.

You need to use the d-*-none (*= xl, sm, md, lg). Link

For example:

the class d-none will allow you something to be invisible on every screen.

the class d-sm-none: will not be visible for small devices.

the class d-md-none: will not be visbile for medium devices.

the class d-lg-none: will not be visbile for large screen devices devices.

For you, need to write this.

<div class="container">
    <div class="row">
    <div class="d-none d-sm-none d-md-block col-lg-4 col-md-6 col-sm-12 col-xs-12">
        Some text here.
    </div>
</div>

Start with d-none add the screen that you want with d-*-block. Example if you want to display for md only, you should write class="d-none d-md-block".