134

I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. I am using the Geometry PSD template from themeforest, the link here if you want to see the layout : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Samia Ruponti
  • 3,910
  • 12
  • 42
  • 62
  • 5
    You can customize Bootstrap to use `@container-*` widths as 100%. Also, `.container-fluid` is coming back in 3.1.0. :) –  Jan 08 '14 at 19:47

5 Answers5

247

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

Skeets
  • 4,476
  • 2
  • 41
  • 67
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 13
    You need to be careful. The row has a -15px margin left and right. That is compensated by the container which has a 15px padding. Best way is to add that padding to your container-full and then use rows and cols to make your grid. – rootman Nov 25 '13 at 11:05
  • 6
    @rootman I'm using class="container container-full" and that seems to be working. – Kenmore Dec 25 '13 at 22:17
  • Use container-fluid together with a col-md-12 to get a full size row. There will be a gutter (standard 15px on each side) which needs to be removed. Easiest way is to remove it manually, by using the following custom css: #SomeId div { padding-left:0; padding-right:0; } – Martin May 19 '14 at 09:49
  • 2
    Thanks for the tip... container-fluid worked well for me, no other changes required. The gutter did not present a problem because setting the background-color of the contained class rendered the color to the edges, as desired, while the text and other elements were nicely offset slightly, also as desired. – Krishna Gupta May 30 '14 at 02:42
30

This is the complete basic structure for 100% width layout in Bootstrap v3.0.0. You shouldn't wrap your <div class="row"> with container class. Cause container class will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluid class from their mobile-first version v3.0.0.

So just start writing <div class="row"> without container class and you are ready to go with 100% width layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136 And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here

Reply me if you need more further assistance. Thanks.

Shaharia Azam
  • 1,948
  • 19
  • 25
  • thank you. It never came to my mind! this one works better than the previous solution. – Samia Ruponti Oct 04 '13 at 15:57
  • 20
    This solution adds a horizontal scrollbar in FF because of the margin on .row. The bootstrap docs say that .row should always be used inside a container because of this - Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows. - http://getbootstrap.com/css/#grid-intro – nealio82 Nov 10 '13 at 11:48
  • 5
    Nealio is correct. You should still use a container. I wrap my full-width rows in a .container-full with this CSS declaration: `.container-full { padding: 0 15px; }` – tbeseda Nov 12 '13 at 23:54
  • I tried the padding: 0 15px; as suggested here and on the getbootstrap.com docs, but also still have the horizontal scroll bar. – Jorre Dec 07 '13 at 15:42
  • 3
    This appears to be a bug in bootstrap. I solved it by adding the following to the container element where your full screen rows are placed: padding: 0 15px; margin-left: 0px; margin-right: 0px; – Jorre Dec 07 '13 at 15:45
  • 2
    Don't all `.row`s need to be contained within a `.container`? – skube Jul 25 '14 at 19:36
  • 2
    Erik Flowers wrote a great [article](http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works) on the container/row relationship, I recommend reading it! – idleberg Aug 09 '14 at 00:22
27

Using Bootstrap 3.3.5 and .container-fluid, this is how I get full width with no gutters or horizontal scrolling on mobile. Note that .container-fluid was re-introduced in 3.1.

Full width on mobile/tablet, 1/4 screen on desktop

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Full width on all resolutions (mobile, table, desktop)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
angularsen
  • 8,160
  • 1
  • 69
  • 83
20

You're right using div.container-fluid and you also need a div.row child. Then, the content must be placed inside without any grid columns. If you have a look at the docs you can find this text:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.

Not using grid columns it's ok as stated here:

  • Content should be placed within columns, and only columns may be immediate children of rows.

And looking at this example, you can read this text:

Full width, single column: No grid classes are necessary for full-width elements.

Here's a live example showing some elements using the correct layout. This way you don't need any custom CSS or hack.

gerardnll
  • 2,055
  • 1
  • 16
  • 17
5

In BOOTSTRAP 4 you can use

<div class="row m-0">
my fullwidth div
</div>

... if you just use a .row without the .m-0 as a top level div, you will have unwanted margin, which makes the page wider than the browser window and cause a horizontal scrollbar.

Felix
  • 139
  • 1
  • 5