Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hiding columns on small screens in Bootstrap 4

See original GitHub issue

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>

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:8 (1 by maintainers)

Top GitHub Comments

22reactions

Glidehcommented, Jan 18, 2018

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

0reactions

mtachaudharycommented, Jun 10, 2020

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