span4 class is not working with twitter bootstrap

Question

I'm new to web dev and I'm working with Twitter Bootstrap right now. I am trying to create 3 columns on my page using this code:

  <div class="container">
   <div class="row">
            <div class="span4">
                <h4 class="muted text-center">About me</h4>
                <p>Sample Text1.</p>
                <a href="#" class="btn"><i class="icon-user"></i> Text1</a>
            </div>
            <div class="span4">
                <h4 class="muted text-center">About you</h4>
                <p>Sample Text2</p>
                <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Text2</a>
            </div>
            <div class="span4">
                <h4 class="muted text-center">About Us</h4>
                <p>Sample Text3</p>
                <a href="#" class="btn btn-info">Text3</a>
            </div>
        </div>
</div>

I've looked at numerous examples and tested it on my page but they don't seem to work. This code outputs all the text one above the other and doesn't divide it into columns in the same row.

Do I need to alter the bootstrap.css file in some way? The default one doesn't contain a span4 class or anything.

Answer 1

Assuming you might have fumbled up with the library you are using for bootstrap and the syntax. (happened to me a while back)

As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12

so in above html markup of yours change <div class="span4"> to <div class="col-xs-6 col-md-4"> and it should work

see the demo here see docs here on how to use it

Also, if you are using ver 2.xx of bs...i'll suggest you to move to latest 3.0 on which this solution is based!!