Griding With Bootstrap
Goals
Steps
Step 1
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">Step 2
<div class="row"> <p>This will take up a whole row</p> </div><div class="row"> <div class="col-sm-6"> <p>This will take up half of a row</p> </div> <div class="col-sm-6"> <p>This will take up half of a row</p> </div> </div>Step 3
Step 4
<div class="row"> <div class="col-sm-12 col-md-6 col-lg-4"> <p>This will take up a third of a row on a large screen.</p> </div> <div class="col-sm-12 col-md-6 col-lg-4"> <p>This will take up half a row on medium screens.</p> </div> <div class="col-sm-12 col-md-6 col-lg-4"> <p>This will take up a full row on small screens.</p> </div> </div>
Explanation
Back to Make Columns