Bootstrap Layout Components

Grid System in Detail

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Grid System Rules

• Rows are wrappers for columns and must be placed within a container
• Columns create gutters (gaps between column content) via padding
• Columns are extremely flexible - there are 12 columns available per row
• Columns without a specified width will automatically layout with equal widths
• Column classes indicate the number of columns you'd like to use out of the possible 12 per row

Basic Grid Example

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Column 1
    </div>
    <div class="col-sm-4">
      Column 2
    </div>
    <div class="col-sm-4">
      Column 3
    </div>
  </div>
</div>
                        

Auto-layout Columns

<div class="container">
  <div class="row">
    <div class="col">
      Equal width column
    </div>
    <div class="col">
      Equal width column
    </div>
    <div class="col">
      Equal width column
    </div>
  </div>
</div>
                        

Setting Column Widths

<div class="container">
  <div class="row">
    <div class="col-6">
      50% width on all screen sizes
    </div>
    <div class="col-6">
      50% width on all screen sizes
    </div>
  </div>
</div>
                        

Responsive Grid

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 col-lg-6">
      <!-- Full width on xs, 8/12 on md, 6/12 on lg -->
      Column 1
    </div>
    <div class="col-12 col-md-4 col-lg-6">
      <!-- Full width on xs, 4/12 on md, 6/12 on lg -->
      Column 2
    </div>
  </div>
</div>
                        

Column Ordering and Offsetting

Reordering Columns

<div class="container">
  <div class="row">
    <div class="col order-3">
      First in DOM, displayed third
    </div>
    <div class="col order-1">
      Second in DOM, displayed first
    </div>
    <div class="col order-2">
      Third in DOM, displayed second
    </div>
  </div>
</div>
                        

Responsive Ordering

<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-2">
      First in DOM, second on md screens and up
    </div>
    <div class="col-md-8 order-md-1">
      Second in DOM, first on md screens and up
    </div>
  </div>
</div>
                        

Column Offsets

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
    <div class="col-md-4 offset-md-4">
      Column 2 (with offset)
    </div>
  </div>
</div>
                        

Responsive Offsets

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">
      Column 1
    </div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
      Column 2 (offset on sm, no offset on md)
    </div>
  </div>
</div>
                        

Flexbox Utilities

Bootstrap includes a robust set of flexbox utilities to manage the layout, alignment, and sizing of grid columns, navigation, components, and more.

Enable Flex Behaviors

<div class="d-flex">
  <!-- This is a flexbox container -->
</div>

<div class="d-inline-flex">
  <!-- This is an inline flexbox container -->
</div>
                        

Direction

<div class="d-flex flex-row">
  <!-- Left to right (default) -->
</div>

<div class="d-flex flex-row-reverse">
  <!-- Right to left -->
</div>

<div class="d-flex flex-column">
  <!-- Top to bottom -->
</div>

<div class="d-flex flex-column-reverse">
  <!-- Bottom to top -->
</div>
                        

Justify Content

<div class="d-flex justify-content-start">
  <!-- Items aligned to the start -->
</div>

<div class="d-flex justify-content-end">
  <!-- Items aligned to the end -->
</div>

<div class="d-flex justify-content-center">
  <!-- Items aligned at the center -->
</div>

<div class="d-flex justify-content-between">
  <!-- Items evenly distributed -->
</div>

<div class="d-flex justify-content-around">
  <!-- Items evenly distributed with equal space around them -->
</div>
                        

Align Items

<div class="d-flex align-items-start">
  <!-- Items aligned to the start of the cross axis -->
</div>

<div class="d-flex align-items-end">
  <!-- Items aligned to the end of the cross axis -->
</div>

<div class="d-flex align-items-center">
  <!-- Items aligned at the center of the cross axis -->
</div>

<div class="d-flex align-items-baseline">
  <!-- Items aligned at the baseline -->
</div>

<div class="d-flex align-items-stretch">
  <!-- Items stretched to fill the container -->
</div>
                        

Spacing Utilities

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Margin and Padding

The classes are named using the format: {property}{sides}-{size}

• Property: m for margin, p for padding
• Sides:
  • t - top
  • b - bottom
  • s - start (left in LTR)
  • e - end (right in LTR)
  • x - left and right
  • y - top and bottom
  • blank - all 4 sides
• Size: 0 to 5, or auto

<div class="mt-4">
  <!-- Margin top: 1.5rem (24px) -->
</div>

<div class="px-3">
  <!-- Padding left and right: 1rem (16px) -->
</div>

<div class="m-0">
  <!-- Margin: 0 -->
</div>

<div class="py-5">
  <!-- Padding top and bottom: 3rem (48px) -->
</div>

<div class="ms-auto">
  <!-- Margin-left: auto (pushes element to the right) -->
</div>
                        

Gap Utilities

Use gap utilities to control the space between flex items:

<div class="d-flex gap-2">
  <!-- Flex items with 0.5rem (8px) gap between them -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex gap-3">
  <!-- Flex items with 1rem (16px) gap between them -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>