Search code examples
cssruby-on-railstwitter-bootstraptwitter-bootstrap-rails

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

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:

Solution

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