Bootstrap4 display classes

Hello,

At some point, I broke this code and can’t figure out what i’ve done… I am using Bootstrap 4’s display utility classes on a row with 3 columns and would like to hide the first and third columns on xs displays… I could have sworn i had this working, but maybe i just need to rest my eyes and get some sleep lol…

Anyone with a fresh set of eyes see my mistake?

I’m using bootstrap 4.1.0 and core bootstrap files are local (not using CDN)

<!-- Main Content -->
    <div class="container">
    	<div class="row">
            <div class="col-sm-2 .d-none .d-sm-block">
            	  <img src="img/bbb.jpg" alt="Better Business Bureau Accredited" class="img-fluid bbb">
                    <div class="charities">
                	<p>Our Community Service:</p>
                	...
                    </div>
            </div>
            <div class="col-sm-6 offset-1">
            	<img src="img/logo_565x565.jpg" class="img-fluid" >
            </div>
            <div class="col-sm-2 offset-1 .d-none .d-sm-block">
            	<img src="somePic.jpg" alt="##" class="float-right img-fluid">
                <div class="creditCards">
                	
                </div>
            </div>
        </div>
    </div>

I’d sure appreciate it if someone could point out my mistake!

Remove the dot from the html class names in both columns.:slight_smile:

e.g.

<div class="col-sm-2 d-none d-sm-block">

2 Likes

The preceding dot is used in class selectors in css.
You should not use it in class assignment attributes in your html.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.