Why Does Bootstrap Use '!Important' for Responsive Classes

Why does bootstrap use '!important' for responsive classes?

While using !important is rarely a good idea as you noticed yourself, since it is a pain to overwrite without using !important yet again, I believe TB has a good reason for doing this for the responsive utilities.

If you state that you want e.g. a button to be not visible on e.g. small displays, by setting the hidden-sm class to that button, you never want it to be visible on small displays. If you would not use important on that utility class, and you would e.g. want a block button on all the other display sizes by adding .btn-block class, your button would become visible again on small displays, since the .btn-block sets the display property back to block. Or at least it could, depending on the order of things, since .hidden-sm and .btn-block have the same specificity when it comes to the cascading rules of css.

Nothing much you can do about that without the !important statement. So this is one of the edge cases where you would have to use it to guarantee the correct behavior.

But you are right in questioning this, !important should only be used as a last resort!

Should I use all the Bootstrap classes for a responsive website?

To answer your question, yes, you can just use

<div class="col-xs-6">

And each element with this class will always have 50% width, no matter the viewport...

A bit more information:

As BootStrap is mobile-first, if you plan on keeping elements 50% and next to each other from 768px and up, you can just use col-sm-6 for example, there's no need to put all other lg / md's in there.

But let's say you want elements to be 50% width from 768px to 991px and 33.333333% from 992px and up, you can do:

<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>

FYI - The col-xs-12 will kick in at 767px and below, meaning each element will then span 100% width.

The above could therefore be written like this:

<div class="col-md-4 col-sm-6">
    // content
</div>
<div class="col-md-4 col-sm-6">
    // content
</div>
<div class="col-md-4 col-sm-6">
    // content
</div>

And exactly the same behaivour will be applied as the col-sm-6 will span 100% at 767px and below anyway!

Does Bootstrap 3 responsive need classes for all devices

Maybe you have seen a lot of tutorials that don't demonstrate the "cascading" effect of the 4 Bootstrap grid sizes.

There is nothing wrong with adding multiple classes to each div, but you only need to write classes for the smaller of the widths. So for example, sm applies to 768 and greater (it means sm and up):

Using this...

<div class="col-lg-8 col-md-8 col-sm-8"></div>

has the same effect as simply using..

<div class="col-sm-8"></div>

So, you'd only need to use all 4 lg,md,sm and xs together if you want different column sizes on desktop, laptop, tablet and phone. Here's a demo that may help to clarify: http://bootply.com/73778

Bootstrap, making responsive changes to layout

Using a media query with whatever min/max width set .span4 to display: none;

Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)

Hope that helps :)

EDIT:

This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}

Bootstrap: Layout not responsive even while using correct classes

The primary reason your layout is not responsive is because you've set explicit height rules in your CSS. Take section#about, for example—if you remove the explicit height: 980px; you set in your stylesheet, the Pixel Perfect paragraph will no longer overlap with the Looking for the perfect template to use? title.

Second, you are improperly using the Bootstrap grid. I noticed that you have a .container class for almost every section. Ideally, you should remove those and only have one .container class which encapsulates the entire page (unless you want to use different container sizes on one page).

Here is an example:

<body>
    <div class="container">
        <section id="intro" class="row">
            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->
        </section><!-- end #intro section -->

        <section id="about" class="row">
            <div class="col-md-6">
            </div><!-- end .col-md-6 -->

            <div class="col-md-6">
            </div><!-- end .col-md-6 -->
        </section><!-- end #about section -->
    </div><!-- end .container -->
</body>

Note: There is an exception with the Navbar/Footer, in which case you can put separate containers inside those elements as you already
did with the Navbar.

Third, use more .row classes as "blocks" for each vertical section on your page. You did this within your sections, but it might be a good idea to make the sections themselves individual rows as well by giving them the .row class—after you've removed the containers from each section.

Next, you don't need to define rules for every screen size as kosmastsk suggested. If you like the way it looks with just defining breakpoints for col-sm then that is up to you. It will look better, though, if you develop mobile first and work your way up to larger screen sizes.

Also consider using more CSS Media Queries to help you better customize your site if you must override heights, widths, etc.

What column system to use in Responsive Design in BootStrap

These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.

Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.

For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.

---

Related Topics