Bootstrap Basics

by Ritesh Pandey

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div class="container">
    <div class="row show-grid">
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0 col-lg-4 col-lg-offset-0 blue">D</div>
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0 col-lg-4 col-lg-offset-4 green">E</div>
    </div>
    <div class="row show-grid">
        <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 col-lg-4 col-lg-offset-4 red">F</div>
    </div> 
    <div class="row show-grid">
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0 col-lg-4 col-lg-offset-0 blue">D</div>
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0 col-lg-4 col-lg-offset-4 green">E</div>
    </div>
</div>

CSS

.red {
    background-color: red;
}
.blue {
    background-color: lightblue;
}
.green {
    background-color: lightgreen;
}
.show-grid {
    margin: 10px;
}