How do I get my Bootstrap webpage to have a full width

Question

I am using gem 'bootstrap-sass', '~> 2.3.2.2' in my Rails application.

How do I get my navigation and boy content to stretch, so it is 100% of the width?

My application.haml looks like this:

!!!
%html
  %head
    = favicon_link_tag "/favicon.ico"
    %title= "My website"
    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
    = javascript_include_tag "application", "data-turbolinks-track" => true
    = csrf_meta_tags
  %body
    %header
      %nav
        .container
          .tabbable.tabs-below
            %ul.nav.nav-tabs
              = render 'layouts/navigation'
    #main{:role => "main"}
      .container
        .content
          .row
            .span12
              = render 'layouts/messages'
              = yield
          %footer

And then I have a css file with these settings:

$bodyBackground: #fff;
@import "bootstrap";

body { padding-top: 10px; }

@import "bootstrap-responsive";

The result looks like this:

monty_lennie · Accepted Answer · 2014-02-17T10:34:32.923

0

Get rid of .container, .row and .span and replace with your own div with width 100%

edited Feb 17 '14 at 10:34

answered Feb 16 '14 at 13:57

monty_lennie

2,871
2
29
49

But I am using many of the Bootstrap 2 features. Can't this be done using Bootstrap 2? – Cjoerg Feb 16 '14 at 13:58
Adding `body { padding-top: 10px; padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-left: 0px; }` does not help unfortunately. – Cjoerg Feb 16 '14 at 14:02
Hmm it could be due to the column gutters' padding or margin. Ill take a look at the documentation – monty_lennie Feb 16 '14 at 14:11
Maybe get rid of .container, .row and .span and replace with your own div with width 100%. – monty_lennie Feb 16 '14 at 14:22
Yes, that worked. Thanks. Could you put it into your answer, then I will close up the question. – Cjoerg Feb 17 '14 at 10:07

score 0 · Answer 2 · answered Feb 16 '14 at 16:55

Simply use .row-fluid instead of .row and change .container width.

Preview: http://jsfiddle.net/julienvignolles/x7LkM/

CSS

.container {
    width: 100%;
}

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span12">aaa</div>
    </div>
</div>

Doc: http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

How do I get my Bootstrap webpage to have a full width

2 Answers2