<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page-header"> <h1>Bootstrap 3 grid examples</h1> </div> <div class="container"> <h4>A simple grid</h2> <div class="row"> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-asterisk green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-plus green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-euro green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-minus green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-cloud green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-envelope green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-search green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-heart green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-star green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-user green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-film green"></i></div> <div class="col-xs-6 col-md-3"><i class="glyphicon glyphicon-ok green"></i></div> </div> <!-- /.row --> <hr> <h4>Column nesting</h4> <div class="row"> <div class="col-md-3"> <div class="row"> <div class="col-md-6"><i class="glyphicon glyphicon-cloud blue"></i></div> <div class="col-md-6"><i class="glyphicon glyphicon-envelope blue"></i></div> <div class="col-md-6"><i class="glyphicon glyphicon-search blue"></i></div> </div> <!-- /.row --> </div> <!-- /.col-md-3 --> <div class="col-md-3"><i class="glyphicon glyphicon-asterisk green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-plus green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-euro green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-minus green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-cloud green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-envelope green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-search green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-heart green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-star green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-user green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-film green"></i></div> </div> <!-- /.row --> <hr> <h4>Column reset</h4> <div class="row"> <div class="col-md-3"> <div class="row"> <div class="col-md-6"><i class="glyphicon glyphicon-cloud blue"></i></div> <div class="col-md-6"><i class="glyphicon glyphicon-envelope blue"></i></div> <div class="col-md-6"><i class="glyphicon glyphicon-search blue"></i></div> </div> <!-- /.row --> </div> <!-- /.col-md-3 --> <div class="col-md-3"><i class="glyphicon glyphicon-asterisk green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-plus green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-euro green"></i></div> <!-- Add clearfix --> <div class="clearfix visible-md-block-inline"></div> <div class="col-md-3"><i class="glyphicon glyphicon-minus green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-cloud green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-envelope green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-search green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-heart green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-star green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-user green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-film green"></i></div> </div> <!-- /.row --> <hr> <h4>Column offsetting</h2> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="row"> <div class="col-md-3"><i class="glyphicon glyphicon-cloud green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-envelope green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-search green"></i></div> <div class="col-md-3"><i class="glyphicon glyphicon-film green"></i></div> </div> <!-- /.row --> </div> </div> <!-- /.row --> </div> <!-- /.container -->

.green { color: lightgreen; } .blue { color: lightblue; } hr { margin-bottom: 2em; } .row { margin-bottom: 2em; } .row .row { margin-bottom: 0; border: 1px solid lightgoldenrodyellow; }