📦 Bootstrap Templates

Bootstrap Rows

<div class="row">
  <!-- Code goes here! -->
</div>

Bootstrap Columns

<div class="col-X">
  <!-- Code goes here! -->
</div>

Copy & Paste Templates!

One row with one full-width column:

<div class="row">
  <div class="col-12">
    <!-- Code goes here! -->
  </div>
</div>

One row with 2 equal-width columns:

<div class="row">
  <div class="col-6">
    <!-- Left column code here -->
  </div>
  <div class="col-6">
    <!-- Right column code here -->
  </div>
</div>

One row with 3 equal-width columns:

<div class="row">
  <div class="col-4">
    <!-- First column code here -->
  </div>
  <div class="col-4">
    <!-- Second column code here -->
  </div>
  <div class="col-4">
    <!-- Third column code here -->
  </div>
</div>

Examples

A full-width row with an h1 header:

<div class="row">
  <div class="col-12">
    <h1>Welcome to my website!</h1>
  </div>
</div>

A row with a logo on the left, and a button on the right:

<div class="row">
  <div class="col-6">
    <img class="img-fluid" src="logo_image_link_here">
  </div>
  <div class="col-6">
    <button class="btn btn-primary">Click Me!</button>
  </div>
</div>