Full Width Layout with Twitter Bootstrap

Full width layout with twitter bootstrap

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%

Twitter Bootstrap 2 - Full width row

Solved! Sadly, I had to edit the bootstrap.css as it was always setting the margin-left regardless of what I did. I'm sure there is a way round this.

The solution below allows for a fixed - fluid - fixed 3 column layout

HTML:

   <div class="container-full"> 
     <div class="row">          
        <div class="span1" style="width: 150px;">
            <h4>Left</h4>
        </div>

        <div class="span10 filler">
            <h4>Center Content</h4>
        </div>

        <div class="span1" style="width: 150px;">
            <h4>Right</h4>
        </div>
     </div>     
   </div>

CSS:

    .filler {
        width: -moz-calc(100% - 300px); /* Firefox */
        width: -webkit-calc(100% - 300px); /* WebKit */
        width: -o-calc(100% - 300px); /* Opera */
        width: calc(100% - 300px); /* Standard */
    }

The -300px value is equal to the sum of the fixed column widths, in this case 150px each.

Now, on bootstrap.css goto line 282 ([class*="span"]) and change the margin-left from 20px to 0px.

Thats it! Worked for me. I must note that this only works with CSS3 due to the calc used in the CSS.

100% width Twitter Bootstrap 3 template

For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Here is a working example on Bootply

If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)

Update for Bootstrap 3.1

The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..

Bootstrap 3.1 demo

Position div entire width of viewport in Twitter Bootstrap

You can get that effect by stretching the body and html tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the body and html tag. Take a look at this example:

html, body {
    width:100%;
    height:100%;
}

body {
    padding-top:60px;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.huge {
    width:100%;
    height:100%;
    background-color:#eee;
}

Demo, edit here.

Note: There is some extra height added to the body of the .huge div due to the padding-top added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.

Full width hero unit in Twitter Bootstrap

move your .hero-unit div outside of your .container div.

the .container style confines you to a set width. and anything inside it will have a maximum width of it's parent.
instead of:

<div class="container">
   <div class="hero-unit">
   </div>
</div>

use:

<div class="hero-unit">
</div>
<div class="container">
</div>

Making twitter bootstrap full-width?

Just figured it out, moving from span6 to span9 did the trick.

Code: http://jsfiddle.net/wyLTA/9/embedded/result/

[though still want to know how to make sidebar stack up to top instead of bottom]

HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

I've found a post here on Stackoverflow and implemented your design:

http://jsfiddle.net/bKsad/25/

Here's the original post: https://stackoverflow.com/a/5768262/1368423

Is that what you're looking for?

HTML:

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS:

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

Full width content when no sidebar using Twitter BootStrap Css Toolkit

I answered a question much similar to this, you can take a look at the result here.

What it basically came down to was creating a new set of classes that you can add to your .content area in your child page so it can conform to your sidebars.

Just add this to your main CSS and add a class to your .content area according to your sidebar needs:

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Here is a demo of how it looks:

• Without left sidebar: http://jsfiddle.net/6vPqA/4/show/
• Without right sidebar: http://jsfiddle.net/6vPqA/5/show/

Twitter Bootstrap - Full width background (image)

That margin you're seeing is due to the fact that the .row class part of the grid system removes 20px from the left to accommodate the span classes inside each row; that class reads as follows:

.row {
    margin-left: -20px;
}

You can circumvent that by just wrapping your .container div with another container with the background color of your choice, like so:

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}

---

Related Topics