CODEWITHSUNDEEP
csstwitter-bootstrap
MB.
MB.

Reputation: 4221

Full width layout with twitter bootstrap

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.

Upvotes: 69

Views: 155839

Answers (10)

Michael
Michael

Reputation: 9293

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%

Upvotes: 42

Madan Sapkota
Madan Sapkota

Reputation: 26111

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!

Upvotes: 5

zmt
zmt

Reputation: 1261

You'll find a great tutorial here: bootstrap-3-grid-introduction and answer for your question is <div class="container-fluid"> ... </div>

Upvotes: 126

Maciej Gurban
Maciej Gurban

Reputation: 5739

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

Upvotes: 7

Nikita Prikazchikov
Nikita Prikazchikov

Reputation: 1

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.

Upvotes: -2

RomB6
RomB6

Reputation: 48

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;
}

Upvotes: 2

officert
officert

Reputation: 1232

Here is an example of a 100% width, 100% height layout with Bootstrap 3.

http://bootply.com/tofficer/77686

Upvotes: 3

Nick Tomlin
Nick Tomlin

Reputation: 29271

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

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

This, in conjunction with setting the width of your container to a fluid value, should allow you to get your desired layout.

Upvotes: 11

carpeliam
carpeliam

Reputation: 6779

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.

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

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.)

Upvotes: 4

user1941070
user1941070

Reputation: 65

*{
   margin:0
   padding:0
}

make sure your container's width:%100

Upvotes: 4

Related Questions