CODEWITHSUNDEEP
twitter-bootstrap
ElArbi
ElArbi

Reputation: 1193

Bootstrap grid: col-xs-1 Always stacking

I'm using Bootstrap 232 and I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link href="less/bootstrap.less" rel="Stylesheet" />

</head>
<body>
    <div class="container">
        <div class="row">
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
          <div class="col-xs-1">.col-xs-1</div>
        </div>
     </div>
</body>
</html>

I'm expecting the columns to display in a single line (my resolution is 1920x1080) but every colum is displyed in a new line. Could you pls tell me if I had missed something ?

Thanks

Upvotes: 0

Views: 616

Answers (3)

Charles Ingalls
Charles Ingalls

Reputation: 4561

Your HTML mark-up for the columns relates to Bootstrap 3! You either need to use Bootstrap 3 (here) or change your HTML mark-up to .span1 to .span12 (see here)

Upvotes: 1

Chiperific
Chiperific

Reputation: 4686

You're using Bootstrap 3.1 language while your source Bootstrap is 2.3.

Just upgrade your Bootstrap to get it working properly. See this Fiddle

Easiest way to test it is by calling the Bootstrap externally from MaxCDN here's the instructions.

Replace your style sheet link with this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Upvotes: 0

Ansuraj Khadanga
Ansuraj Khadanga

Reputation: 128

If you are using Bootstrap 2.3.2, then you should use it this way:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Please see this link:

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

If you have any more queries, reply to this comment else accept this as answer.

Upvotes: 1

Related Questions