Confusing about bootstrap grid system

Question

Please help me with these questions :

when I use http://www.responsivegridsystem.com/ with html5, when I apply col_span_x in a section tag, the section's size is not stable, sometimes its less than its contain, and the contains float out so I use clearfix at the class row to fix it.

But the bootstrap grid system is very confusing me. in desk screen it works but when I resize its width the contains go out its container all the time like in my footer, but it is basically still in the footer on full desk screen

I know the css will be messing up when resizing the width but isnt it supposed to be in its container? My goal is to fix the css at some specific width size as long as it is in its container (footer, section, div....)

Answer 1

If your are using Bootstrap Framework then you don't need to use Responsive Grid System.

Bootstrap will make your site fully responsive with all browser and device compatibility.

This is simple flow of Bootstrap HTML structure.

<div class="container">
    <!-- Your main wrapper -->
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <!-- one half section -->
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <!-- one half section -->
        </div>
    </div>
</div>

col-lg -- Large devices Desktops (≥1200px)

col-md -- Medium devices Desktops (≥992px)

col-sm -- Small devices Tablets (≥768px)

col-xs -- Extra small devices Phones (<768px)

For more information about Bootstrap Grid Visit : Bootstrap

---

Notice -- For this kind of structure you can make design using only 2 class, All classes are not needed for that.

Like use this one -- class="col-md-6 col-xs-12"
instead of -- class="col-lg-6 col-md-6 col-sm-6 col-xs-12"