Bootstrap: Hiding columns on small screens in Bootstrap 4

[klor]

Hiding columns on small screens is hard and inconsistent in Bootstrap 4 compared to Bootstrap 3 because 1) you have to use "d-" classes and 2) mix them with "col-" classes.

In Bootstrap 3, I could do like this (verbose example):

<div class="row">
    <div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
        Hide me on small screens
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        Only show me on small screens
    </div>
</div>

As I understand, the .hidden-* classes were removed because they conflicted with jQuery's $(...).hide() and $(...).show() methods.

To overcome this, I suggest a new grid column that is easier to comprehend and does not conflict with jQuery:

• .col-xs-0 (same as .hidden-xs in BS3)
• .col-sm-0
• .col-md-0
• .col-lg-0
• .col-sm-0

So I can do:

<div class="row">
    <div class="col-xs-0 col-sm-6">
        HIDE ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
    <div class="col-xs-12 col-sm-6">
        SHOW ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
</div>

See also:

• Bootstrap 4: Grid system
• Overhaul responsive, display, and visibility utilities #22113
• StackOverflow: bootstrap 4 responsive utilities visible / hidden xs sm lg not working
• Bootstrap 4 Hidden & Visible: How Responsive Display Works in Bootstrap 4 Beta

[mdo]

No plans to add more .col classes here. Display utilities are the way to go.

[Glideh]

So, to answer the question, we have to do:

<div class="row">
    <div class="d-none d-sm-block col-sm-6">
        HIDE ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
    <div class="col-sm-6 col-xs-12">
        SHOW ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
</div>

Don't hesitate to tell me if I'm wrong

[backnotprop]

@Glideh seems to work..

[xbraindesigner]

@Glideh only this last method worked for me using BS4 latest version for now :)
thanks

[Glideh]

Actually not sure we need the col-xs-12, I think it does not exist anymore and so will not have any effect.

[chornbe]

Bootstrap, et al, really was so much more elegant in ver 3 :(

[avillarubia]

@Glideh that works, thank you

[mtachaudhary]

So, to answer the question, we have to do:

<div class="row">
    <div class="d-none d-sm-block col-sm-6">
        HIDE ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
    <div class="col-sm-6 col-xs-12">
        SHOW ME ON SMALL SCREENS.
        Show me on larger screens.
    </div>
</div>

Don't hesitate to tell me if I'm wrong

Hello, It's working for me but there is another issue. The issue is when using the d-none the width of row is reduced.
I am using classes like, d-none d-sm-block col-md-4