Bootstrap Grid Examples

by letanure

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <img id="myImg" src="https://download.unsplash.com/photo-1428604467652-115d9d71a7f1">
    </div>
    <div class="row">
        <!-- Large devices >= 1200px     
             Collapsed to start, horizontal above breakpoints -->
        <div class="col-lg-4">A</div>
        <div class="col-lg-4">B</div>
        <div class="col-lg-4">C</div>
    </div>
    <div class="row">
        <!-- Medium devices >= 992px     
             Collapsed to start, horizontal above breakpoints -->
        <div class="col-md-4">D</div>
        <div class="col-md-4">E</div>
        <div class="col-md-4">F</div>
    </div>
    <div class="row">
        <!-- Small devices >= 768px     
             Collapsed to start, horizontal above breakpoints -->
        <div class="col-sm-4">G</div>
        <div class="col-sm-4">H</div>
        <div class="col-sm-4">I</div>
    </div>
     <div class="row">
        <!-- Extra small devices < 768px
             Horizontal at all times -->
        <div class="col-xs-4">J</div>
        <div class="col-xs-4">K</div>
        <div class="col-xs-4">L</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">M</div>
        <div class="col-xs-4">N</div>
        <div class="col-xs-4">O</div>
    </div>
</div>

CSS

[class*="col"] {
    border: 1px solid black;
}

#myImg{
    wi
}

JavaScript

// view on a high resolution screen (large flatpanel) to see the break points trigger for  sm, md, & lg.