CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Michael
Michael

Reputation: 13636

Some misunderstanding using bootstrap

I have this html code:

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
</div>

In the view I get the following result:

enter image description here

The desired view result is:

enter image description here

The HTML code above I took is from this site.

Any idea why my view is different from the desired view?

Upvotes: 0

Views: 65

Answers (3)

Blag
Blag

Reputation: 5894

It'll work if you got enough width for them

Bootstrap Doc #grid-options :

Medium devices Desktops (≥992px)

Resize your windows or try to use 

<div class="col-sm-1">

https://jsfiddle.net/u8w7fca6/3/

Upvotes: 3

Aditya Vyas-Lakhan
Aditya Vyas-Lakhan

Reputation: 13555

Try this way

<div class="row">
    <div class="col-xm-12 col-sm-1 col-md-1 col-lg-1">
    <p>Try this</p>
    </div>
</div>

Upvotes: 1

JayChase
JayChase

Reputation: 11525

The columns will stack vertically I there is not room to display them all horizontally. If you increase the width of the browser window they should revert to being inline.

Upvotes: 2

Related Questions