Full width layout with twitter bootstrap

Question

I m trying to accomplish a layout similar to this one   http   dribbble com shots 829195-Slate attachments 86422  My project uses Twitter Bootstrap with responsive design  It is possible to implement a full width layout with Bootstrap   The issue is that from what I ve been reading fluid layouts will be removed in bootstrap 3 0  and the responsive design has fixed widths

User · Answer

Just create another class and add along with the bootstrap container class. You can also use container-fluid though.

<div class="container full-width">
    <div class="row">
        ....
    </div>
</div>

The CSS part is pretty simple

* {
    margin: 0;
    padding: 0;
}
.full-width {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

Hope this helps, Thanks!

User · Answer

As of the latest Bootstrap  3 1 x   the way to achieve a fluid layout it to use  container-fluid class   See Bootstrap grid for reference

User · Answer

I think you could just use class  col-md-12  it has required left and right paddings and 100  width  Looks like this is a good replacement for container-fluid from 2nd bootstrap

User · Answer

You ll find a great tutorial here  bootstrap-3-grid-introduction and answer for your question is  lt div class  container-fluid  gt       lt  div gt

User · Answer

Here is an example of a 100  width  100  height layout with Bootstrap 3   http   bootply com tofficer 77686

User · Answer

margin 0    padding 0     make sure your container s width  100

User · Answer

The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this  You get again a container-fluid     container    max-width 100     padding 0

User · Answer

Update   Bootstrap 3 has been released since this question was originally answered in January  so if you are a BS3 user  please refer to the BS3 documentation  For those still on BS2  the original answer still applies  If you are interested in switching from 2 to 3  see the migration guide   Original answer   From the bootstrap 2 docs       Make any row  fluid  by changing  row to  row-fluid  The column   classes stay the exact same  making it easy to flip between fixed and   fluid grids    Code   lt div class  row-fluid  gt     lt div class  span4  gt     lt  div gt     lt div class  span8  gt     lt  div gt   lt  div gt    This  in conjunction with setting the width of your container to a fluid value  should allow you to get your desired layout

User · Answer

In Bootstrap 3  columns are specified using percentages   In Bootstrap 2  this was only the case if a column span was within a  row-fluid element  but that s no longer necessary and that class no longer exists   If you use a  container  then  Michael is absolutely right that you ll be stuck with a fixed-width layout  However  you should be in good shape if you just avoid using a  container element    lt body gt     lt div class  row  gt       lt div class  col-lg-4  gt     lt  div gt       lt div class  col-lg-8  gt     lt  div gt     lt  div gt   lt  body gt    The margin for the body is already 0  so you should be able to get up right to the edge   Columns still have a 15px padding on both sides  so you may have to account for that in your design  but this shouldn t stop you  and you can always customize this when you download Bootstrap

User · Answer

Because the accepted answer isn t on the same planet as BS3  I ll share what I m using to achieve nearly full-width capabilities   First off  this is cheating   It s not really fluid width - but it appears to be - depending on the size of the screen viewing the site   The problem with BS3 and fluid width sites is that they have taken this  mobile first  approach  which requires that they define every freaking screen width up to what they consider to be desktop  1200px   I m working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width   They have defined 10 screen widths  really only 5  but anyway    I don t really feel comfortable changing those  because they are common widths  So  I chose to define some extra widths for BS to choose from when deciding the width of the container class   The way I use BS is to take all of the Bootstrap provided LESS files  omit the variables less file to provide my own  and add one of my own to the end to override the things I want to change   Within my less file  I add the following to achieve 2 common screen width settings    media screen and  min-width  1600px         container           max-width   1600px -  grid-gutter-width            media screen and  min-width  1900px         container           max-width   1900px -  grid-gutter-width             These two settings set the example for what you need to do to achieve different screen widths   Here  you get full width at 1600px  and 1900px   Any less than 1600 - BS falls back to the 1200px width  then to 768px and so forth - down to phone size   If you have larger to support  just create more  media screen statements like these   If you re building the CSS instead  you ll want to determine what gutter width was used and subtract it from your target screen width   Update   Bootstrap 3 0 1 and up  so far  - it s as easy as setting  container-large-desktop to 100

[css] Full width layout with twitter bootstrap

The answer is

Update:

Original answer:

Examples related to css

Examples related to twitter-bootstrap

Tags