CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Knows Not Much
Knows Not Much

Reputation: 31586

Bootstrap span classes not working as expected

I wrote my first bootstrap program.

<!DOCTYPE html>
<html>
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="row">
            <div class="span9">Level 1 of Column</div>
        </div>
        <div class="row">
            <div class="span6">Level 2</div>
            <div class="span3">Level 2</div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>    
</html>

My hope was that the div class 9 will only take up 9 columns instead of entire browser width. My hope was that span6 and span3 will take up 6 and 3 columns and will be in the same row.

But the output looks like

enter image description here

So the rows do not appear properly (they are being cut) and also the rows and columns are not being respected. (in chrome I can see that level 1 is taking up the entire browser width) so is the 2 span6 and span3 classes. they take up entire browser width.

Upvotes: 1

Views: 2065

Answers (1)

timo.rieber
timo.rieber

Reputation: 3867

You refer to bootstrap 3.1.1 css file in your header, but you are using bootstrap 2 css classes (e.g. span3) within your html code.

Use bootstrap 3 classes instead as described here: http://getbootstrap.com/css/

So for example use col-lg-3 instead of span3.

Try this:

...
<div class="row">
    <div class="col-lg-9">Level 1 of Column</div>
</div>
<div class="row">
    <div class="col-lg-6">Level 2</div>
    <div class="col-lg-3">Level 2</div>
</div>
...

Upvotes: 4

Related Questions