Bootstrap 4 Grid Medium (md)

Welcome to The Coding College! In this tutorial, we’ll explore the medium grid (md) in Bootstrap 4. The md breakpoint is one of the most commonly used grid sizes, perfect for designing layouts for devices with a screen width of 768px or larger, such as tablets or small laptops.

What is the Medium Grid (md)?

Bootstrap 4’s medium grid (md) is part of its responsive grid system. The md breakpoint is used to define how content behaves on devices with a minimum width of 768px. For smaller devices, the grid will stack vertically unless other breakpoints are specified.

Key Features:

  1. Breakpoint Activation: Applies for devices with a minimum width of 768px.
  2. Responsive Behavior: Automatically adapts for smaller screens (sm, xs) and larger screens (lg, xl).
  3. Customizable Layouts: Allows you to fine-tune layouts specifically for tablets and small laptops.

Grid Class Syntax

The syntax for defining medium grid columns is straightforward:

<div class="row">
  <div class="col-md-*">Content</div>
</div>

Here:

  • Replace * with a number between 1 and 12 to define the column width.

Example 1: Two Equal Columns

Here’s how to create a layout with two equal-width columns for medium screens:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Behavior:

  • Medium screens (≥768px): Columns are displayed side by side, each taking 50% of the row width.
  • Smaller screens (<768px): Columns stack vertically and take full width.

Example 2: Custom Column Sizes

You can create custom column widths for medium screens using col-md-*:

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

Behavior:

  • Medium screens (≥768px): Column 1 takes 4/12 of the row, and Column 2 takes 8/12 of the row.
  • Smaller screens (<768px): Both columns stack vertically and take full width.

Example 3: Three Equal Columns

Create three equal-width columns using col-md-* classes:

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

Behavior:

  • Medium screens (≥768px): Columns align horizontally, each taking 1/3 of the row width.
  • Smaller screens (<768px): Columns stack vertically.

Example 4: Mixing Breakpoints

Combine md with other breakpoints (sm, lg) for a more responsive layout:

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

Behavior:

  • Extra small screens (<576px): All columns stack vertically (col-12).
  • Small screens (≥576px): Columns 1 and 2 are side by side (col-sm-6), while Column 3 stacks below.
  • Medium screens (≥768px): All three columns align horizontally with equal widths (col-md-4).

Example 5: Nested Grids for Medium Screens

You can create more complex layouts by nesting grids:

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Parent Column
      <div class="row">
        <div class="col-md-6">Nested Column 1</div>
        <div class="col-md-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-md-4">Parent Column 2</div>
  </div>
</div>

Example 6: Full-Width Layout with container-fluid

To make your grid span the entire viewport width, use the container-fluid class:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Practical Use Case: Card Layout for Medium Screens

Let’s create a responsive card layout that uses the medium grid system:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Using the Medium Grid (md)

  1. Mobile-First Design: Start designing for smaller devices (xs, sm) and scale up using md and larger breakpoints.
  2. Test Across Devices: Ensure your layouts are optimized for tablets and small laptops.
  3. Combine Breakpoints: Use md alongside other breakpoints to create flexible, responsive designs.
  4. Use Flexbox Utilities: Bootstrap’s flex utilities (d-flex, align-items-*) pair perfectly with the grid system for advanced alignment.

Conclusion

The medium grid (md) in Bootstrap 4 is essential for creating responsive layouts tailored to tablets and small laptops. By mastering this breakpoint, you can craft designs that adapt beautifully to various screen sizes.

Leave a Comment