Twitter Bootstrap - Span Columns not displaying correctly
css, html, twitter-bootstrap
Solution
You are confusing `Bootstrap 2.3.2` with `Bootstrap 3.0.0`. you can find the differences outlined in the CHANGELOG concerning the migration details. Glancing at your code, i see that `navbar-inner` class has been removed, `container-fluid` has been replaced by `container`, same for `row-fluid` and so on.
Basically, you're using Bootstrap 2.3.2 code with the new Bootstrap 3.0.0 engine... without migration. Follow the instructions outlined in the above link to know what you need to change and how.
PS: As of version `3.1` you can still use `.container-fluid`, you just need to use `.row` classes as with standard containers. Probably this was still the case even with version `3.0`, I may have misunderstood the documentation.
Problem
I am trying to get started with Twitter Bootstrap, but for some reason, anything I do, results in a div spanning the entire page. As such, I cannot get the grid system / navigation bar to look right as every div appears to have it's own line. I am sure that this is a simple fix but I am completely baffled. http://jsfiddle.net/Aq5xn/show/ ``` <!DOCTYPE html> <html lang="en"> <head> <title> @section('title') Page Title @show </title> {{-- Ensures proper rendering & touch zooming --}} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}} {{ HTML::style('/css/bootstrap.css') }} {{ HTML::style('/css/style.css') }} </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="#">asdf</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span4">{{-- @yield('content') --}}</div> <div class="span4">Span 4</div> <div class="span4">Span 4</div> </div> </div> {{-- Scripts are placed here --}} {{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }} {{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }} </body> </html> ```