Bootstrap Grids

Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <!-- Equal Columns -->
  <div class="row">
    <div class="col-sm-4" >Col1</div>
    <div class="col-sm-4" >Col2</div>
    <div class="col-sm-4" >Col3</div>
  </div>
  <!-- Unequal Columns -->
  <div class="row">
    <div class="col-sm-6" >Col1</div>
    <div class="col-sm-2" >Col2</div>
    <div class="col-sm-4" >Col3</div>
  </div>
</div>

</body>
</html>

Output:



Cheers!!!

No comments:

Post a Comment