CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user9741470
user9741470

Reputation:

Hiding elements bootstrap 4.1

I'm working on bootstrap 4.1. I need to hide some elements only on mobile, so I decided to try the display properties. According to the official documentations I've tried as suggested to use the d-sm-none d-md-block but it's not working.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation. To show an element only on a given interval of screen sizes you can combine one .d--none class with a .d--* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Here is the code, any help will be appreciated:

HTML

<div class="row" id="second-row">
        <div class="col-sm-12 col-lg-12">
        <h2 class="text-uppercase" id="section-title">Lorem ipsum</h2>
        </div>
        <div class="col-sm-12 col-lg-6">
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            <div class="row" id="mini-gallery-row">
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
            </div>
        </div>

Upvotes: 4

Views: 3739

Answers (2)

Joachim Haglund
Joachim Haglund

Reputation: 795

d-sm-none will hide the element on width sm and larger and d-md-block will overrid this and show the element on width md and larger. Sm corrcorresponds to 576px and higher so perhaps it is scren width xs that you want to hide it on?

Upvotes: 1

Praveen Murali
Praveen Murali

Reputation: 741

As per the the documentation https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements, if you want to 'Hidden only on xs' use .d-none .d-sm-block. Hope it will help. :)

ie.

<div class="row" id="mini-gallery-row">
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
</div>

Upvotes: 3

Related Questions