problems with bootstrap grid

Asked

Viewed 144 times

3

I’m using jsfiddle to learn bootstrap, but I’m having trouble getting content to appear on the same line. my jsffidle content is appearing in two rows (wanted a row and 2 columns)

<div class="container">
    <div class="row">
        <div class="col-md-6" style="background-color: red;">
            <h4>teste</h4>
        </div>
        <div class="col-md-6" style="background-color: black;">
            <h4>teste</h4>
        </div>
    </div>
</div>

my jdfiddle:

http://jsfiddle.net/hurv9jjr/

twitter-bootstrap

1 answer

2


The problem is that you have specified only classes for dispositivos médios (>992px) in their divs with the col-md-6. That is, the grid bootstrap is only being enabled for resolutions above 992px and the Jsfiddle preview window is smaller than this size.

To be shown in the correct way just add the classes that specify the grid for smaller resolutions:

<div class="container">
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6" style="background-color: red;">
        <h4>teste</h4>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6" style="background-color: black;">
        <h4>teste</h4>
    </div>
</div>

I recommend that you brush up on the operation of the boostrap grid. Good luck.

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.