100% Width Twitter Bootstrap 3 Template

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

Why do Twitter Bootstrap tables always have 100% width?

All tables within the bootstrap stretch according to their container, which you can easily do by placing your table inside a .span* grid element of your choice. If you wish to remove this property you can create your own table class and simply add it to the table you want to expand with the content within:

.table-nonfluid {
   width: auto !important;
}

You can add this class inside your own stylesheet and simply add it to the container of your table like so:

<table class="table table-nonfluid"> ... </table>

This way your change won't affect the bootstrap stylesheet itself (you might want to have a fluid table somewhere else in your document).

Bootstrap 100% width / Full width

100% width ... static

This is a bit of an oxymoron. A 100% width layout isn't static.

Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.

Bootstrap 3 two columns in container with 100% width backgrounds

the correct way is set the background to the row width 50% width:

html:

<div class="row">
<div class="container">
    <div class="col-xs-6">
        <h1>left</h1>
    </div>

    <div class="col-xs-6">
        <h1>right</h1>
    </div>
</div>
</div>

CSS:

.row {
background-color: #e1e2e4;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 100%;
}

bootply:
http://www.bootply.com/yDCLfN2DSb

Twitter Bootstrap 3: how to use media queries?

Bootstrap 3

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Note: FYI, this may be useful for debugging:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

Update 2021-05-20: Info is still accurate as of versions 3.4.1, 4.6.0, 5.0.0.

bootstrap 3 input-group 100% width

Adding width: 1% to the input element's sibling fixes this:

.clear { width: 1%; display: table-cell; }

See http://jsfiddle.net/Wexcode/B9LMN/2/

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%

---

Related Topics