Bootstrap's Grid System

The most useful part of Bootstrap is its fluid, responsive framework. The way your content is displayed changes with the viewport; in other words, Bootstrap makes the most out of the browser window space no matter what the size.

For example:

<div class="container">
  <!-- Example row of columns -->
  <div class="row">

    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>

    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div>

    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>

  </div>
  <!-- Example row of columns -->
  <div class="row">

    <div class="col-md-2"></div>
    
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    
    <div class="col-md-2"></div>
    
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>   
    </div>
    
    <div class="col-md-2"></div>
  
  </div>
</div> 

Yields the following shtuff. Change your browser window size and see the effect it has.

Panels

Lastly, here is the code for Bootstrap's panel component.

<div class="panel panel-default">
  <div class="page-header">
    <h2>Header</h2>
  </div>
  <div class="panel-body">
    <h3>Body Title</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum tempore sequi similique quos quisquam ut ducimus ad numquam atque minus deleniti corporis impedit temporibus soluta amet, commodi dignissimos officia. Delectus!
    </p>
  </div>
</div>

With everything we have covered so far, you should be able to make a pretty handsome landing page!