Sunday, December 15, 2013

Bootstrap : span doesn't work

I tried this simple Bootstrap row without success :

<div class="row" style="border: 1px solid green">
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
</div>

In fact, it's simple.I used Bootstrap 3.x and not Bootstrap 2.x which contains some change in class names.
For example, span-* became col-md-*.

So the solution, for this example above :

<div class="row" style="border: 1px solid green">
        <div class="col-md-2" style="border: 1px solid red">Foo!</div>
        <div class="col-md-2" style="border: 1px solid red">Bar!</div>
        <div class="col-md-2" style="border: 1px solid red">Baz!</div>
        <div class="col-md-2" style="border: 1px solid red">Foo!</div>
        <div class="col-md-2" style="border: 1px solid red">Bar!</div>
        <div class="col-md-2" style="border: 1px solid red">Baz!</div>
</div>

See following link for details :
http://getbootstrap.com/getting-started/#migration
http://stackoverflow.com/questions/18527466/twitter-bootstrap-span-columns-not-displaying-correctly/18527554#18527554