problems with bootstrap grid

Navigation
3

I'm using jsfiddle to learn bootstrap, however I'm having trouble making content appear on the same line. my content in jsffidle 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:

link

    
asked by anonymous 01.11.2015 / 05:39

1 answer

2

The problem is that you have specified only classes for dispositivos médios (>992px) on your divs with col-md-6 . That is, the bootstrap grid is only enabled for resolutions above 992px and the JSFiddle preview window is lower to this size.

To show 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 giving a brushstroke on how the boostrap grid works. Good luck.

    
01.11.2015 / 12:12
Splash Screen Mobile Add CSS to specific page via JS