Understanding the Bootstrap 3 Grid System - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Grid Layout

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Grid Layout

Introduction

Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Class Target
.col-xs-* for extra small devices like cell phones
.col-sm-* for small screen devices like tablets
.col-md-* for medium size devices like desktops
.col-lg-* for large desktop screens.

The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Two Column Grid Layouts for Tablets and Desktops</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style type="text/css">

    .demo-content{<!--  w  ww . j  ava 2s.co  m-->
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #EEEEEE;
    }
</style>
 </head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-sm-6">
     <div class="demo-content">
      .col-sm-6
     </div>
    </div>
    <div class="col-sm-6">
     <div class="demo-content bg-alt">
      .col-sm-6
     </div>
    </div>
   </div>
   <hr>
   <!--Row with two columns divided in 1:2 ratio-->
   <div class="row">
    <div class="col-sm-4">
     <div class="demo-content">
      .col-sm-4
     </div>
    </div>
    <div class="col-sm-8">
     <div class="demo-content bg-alt">
      .col-sm-8
     </div>
    </div>
   </div>
   <hr>
   <!--Row with two columns divided in 1:3 ratio-->
   <div class="row">
    <div class="col-sm-3">
     <div class="demo-content">
      .col-sm-3
     </div>
    </div>
    <div class="col-sm-9">
     <div class="demo-content bg-alt">
      .col-sm-9
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Related Tutorials