acbrent25
9/2/2017 - 12:01 PM

Bootstrap grid example

Bootstrap grid example

bootstrap-grid.html
content_copyfile_download
<!-- Bootstrap Grid Demo -->
<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <title>Bootstrap Demo</title>

  <!-- Bring in our bootstrap stylesheet -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <style>
    .color {
      background: salmon;
    }
  </style>
</head>

<body>

  <!-- Our rows function in containers (grid created). -->
  <div class="container">

    <!-- Our columns function in rows. -->
    <div class="row">

      <!-- Columns have 12 areas of width to work with. -->

      <!-- One third of screen (4/12) -->
      <div class="col-md-4  color">
        <!-- This is column 1 of 3 -->
      </div>

      <!-- One third of screen (4/12) -->
      <div class="col-md-4 color">
        <!-- This is column 2 of 3 -->
      </div>

      <!-- One third of screen (4/12) -->
      <div class="col-md-4 color">

        <!-- This is column 3 of 3 -->
      </div>

      <!-- Columns float left, so all adjacent rows will appear next to each other (as long as not all space gets taken up) -->
    </div>

  </div>


  <!-- Creates the Overall Grid -->
  <div class="container">

    <!-- First Row -->
    <div class="row">

      <!-- First (and only column) -->
      <div class="col-md-12 salmon">
        <h1>I'm in Column 1 of 1. I stretch the entire width. And keep going.</h1>
      </div>
    </div>

    <!-- Second Row -->
    <div class="row">

      <!-- First of two columns -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 color">
        <h1>I'm in Column 1 of 2</h1>
      </div>

      <!-- Second of two columns -->
      <div class="col-md-4 col-sm-6 col-xs-12 color">
        <h1>I'm in Column 2 of 2</h1>
      </div>

    </div>

  </div>

</body>

</html>