Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Responsive Layouts With the Bootstrap Grid Reordering and Offsetting Columns

Chris Komaroff
PLUS
Chris Komaroff
Courses Plus Student 14,198 Points
Posted by Chris Komaroff
Chris Komaroff
Courses Plus Student 14,198 Points

Can anyone explain order of precedence for CSS used to hide image for extra small (xs)?

Assumed d-none was overridden by d-sm-block for devices larger than xs. But I notice the order does not seem to matter.

Guil does this in video:

<img class="mb-4 img-fluid rounded d-none d-sm-block " src="img/pdx.jpg" alt="Portland">

I notice this also hides <img>

<img class="mb-4 img-fluid rounded d-sm-block d-none" src="img/pdx.jpg" alt="Portland">

i.e. put d-sm-block before d-none and it works exactly the same.

I like Guil's way better as it looks like normal CSS order of precedence, but that is not true, so I guess d-*-block always overrides d-done.

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

CSS does not assign a precedence to class names based on the order they appear in an element's class list.

But what will make a difference is the order in which the rules pertaining to the classes appear in the CSS file(s).

Chris Komaroff
PLUS
Chris Komaroff
Courses Plus Student 14,198 Points
Chris Komaroff
Chris Komaroff
Courses Plus Student 14,198 Points

Steven, thank you, makes sense. Order of classes in class attribute does not matter. Then class="d-none d-sm-block" is same as class="d-sm-block d-none". Instead this "d-sm-block" higher precedence must come from the CSS in bootstrap.

I just read the bootstrap docs more carefully. Docs on display utilities defines this behavior (https://getbootstrap.com/docs/4.0/utilities/display/):

" ... 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. ... "

So .d-none always gets overridden by the other display properties, or at least by .d--