• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid Medium

← Previous Next →

What is Bootstrap 4 Grid Medium?

The Bootstrap 4 Grid Medium system refers to grid layouts for medium devices, typically screens 768px and larger, such as tablets in landscape mode and smaller laptops. Medium grids allow more complex horizontal layouts while maintaining readability.

Bootstrap 4 uses a mobile-first approach, so medium grid classes override the behavior of extra-small and small grids, giving developers precise control over layouts on larger devices.

Medium Device Classes

For medium devices, Bootstrap 4 provides the .col-md- classes. Columns using these classes automatically adjust based on the 12-column system and screen width.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • On medium and larger screens, columns display horizontally side by side.

  • On smaller screens, columns stack vertically by default.

  • Padding .p-3 and margin .mb-2 maintain proper spacing.

Combining Medium with Other Breakpoints

You can combine .col-md- with smaller and larger breakpoints for fully responsive layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • .col-12 ensures full width on extra-small screens.

  • .col-sm-6 displays two columns per row on small devices.

  • .col-md-4 shows three columns per row on medium devices and larger.

Nesting Columns in Medium Grids

Nesting is useful for complex layouts on medium devices.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-8 bg-primary text-white p-3">
      Main Column
      <div class="row mt-2">
        <div class="col-md-6 bg-warning p-2">Nested 1</div>
        <div class="col-md-6 bg-danger p-2">Nested 2</div>
      </div>
    </div>
    <div class="col-md-4 bg-success text-white p-3">Sidebar</div>
  </div>
</div>

  • The main column spans two-thirds, sidebar one-third.

  • Nested columns divide the main column into halves for medium devices and larger.

Offsets and Ordering in Medium Grids

Offsets move columns to the right to create spacing or center content.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • .offset-md-3 moves the column three units to the right on medium devices.

Column ordering can also be controlled using .order-md- classes:

<div class="row">
  <div class="col-md-6 order-md-2 bg-success p-3">Second Column</div>
  <div class="col-md-6 order-md-1 bg-primary p-3">First Column</div>
</div>

  • The visual order changes on medium and larger devices without altering the HTML structure.

Stacked and Horizontal Layouts on Medium Devices

Columns can stack or display horizontally depending on screen width and classes used.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • Extra-small and small screens: columns stack vertically.

  • Medium and larger screens: columns display horizontally side by side.

This approach ensures responsive and visually consistent layouts.

Flexbox Alignment in Medium Grids

Bootstrap 4 Flexbox utilities allow alignment of columns:

  • .justify-content-center → horizontal centering

  • .align-items-center → vertical centering

Example:

<div class="container" style="height:200px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-md-6 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • The column is centered horizontally and vertically on medium devices and larger.

Best Practices for Medium Grids

  1. Use .col-md- classes to optimize layouts for medium devices.

  2. Combine with .col- and .col-sm- for responsive, mobile-first design.

  3. Nest columns to create complex layouts.

  4. Apply offsets to center content or create visual gaps.

  5. Test layouts on tablets and small laptops to ensure readability.

  6. Use padding and margin utilities consistently for spacing.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid Medium system, focusing on layouts for screens ≥768px. You learned how to use .col-md- classes, combine them with smaller breakpoints, nest columns, apply offsets and ordering, and use Flexbox utilities for alignment. Mastering medium grids ensures your website is tablet and small laptop friendly, responsive, and visually consistent, enhancing user experience across devices.

Practice Questions

  1. Create a row with three equal columns using .col-md-4 so they appear horizontally on medium devices.

  2. Make a two-column layout that stacks on small devices but displays side by side on medium screens using .col-12 col-md-6.

  3. Nest two smaller columns inside a larger column using .col-md-8 for the parent and .col-md-6 for nested columns.

  4. Center a column using .col-md-6 offset-md-3 on medium devices.

  5. Create a row with four columns stacked on small devices but two per row on medium devices using .col-12 col-md-6.

  6. Combine medium and large breakpoints to show three columns per row on medium devices and four columns per row on large devices.

  7. Use Flexbox utilities .justify-content-center and .align-items-center to center a column horizontally and vertically on medium screens.

  8. Apply background colors to each column to visually verify alignment and spacing.

  9. Build a row where three columns stack on small devices but display horizontally on medium screens using .col-12 col-md-4.

  10. Add padding .p-3 and margin .mb-2 to all columns to maintain consistent spacing on medium devices.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top