Home Is it acceptable to omit container elements when using Bootstrap's grid?
Reply: 3

Is it acceptable to omit container elements when using Bootstrap's grid?

stckpete
1#
stckpete Published in 2015-08-07 20:00:49Z

I have used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.

For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px. Within the wrapper I have used the standard .row and .col Boostrap classes.

I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.

Is it OK to use the above method without the .container class?

Many thanks, p

Robert Cepa
2#
Robert Cepa Reply to 2015-11-02 01:30:45Z

If you don't use rows, you are fine. Rows go to negative margins without container.

edit: Anyway, if you use bootstrap3, you should be fine even with rows...

Hayden Schiff
3#
Hayden Schiff Reply to 2015-08-07 20:05:32Z

Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.

isherwood
4#
isherwood Reply to 2015-08-07 20:20:05Z

There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.

Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:

.row.padded > div div { /* > div should be a column */
    margin: 1em 0;
}

<div class="container-fluid">
    <div class="row padded">
        <div class="col-xs-12">
            <div> ... </div> <!-- this will have a margin -->
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323716 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO