• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid System

← Previous Next →

What is the Bootstrap 4 Grid System?

The Bootstrap 4 Grid System is the framework’s core mechanism for creating responsive layouts. It uses a 12-column structure, where each row can contain one or more columns adding up to 12 units. This system allows developers to design flexible and consistent page layouts that adapt to any screen size.

Unlike fixed layouts, the Bootstrap 4 grid system is built on Flexbox, making it easy to control alignment, spacing, and distribution of content. Understanding how the grid system works is essential for building modern, responsive websites.

The Structure of the Grid System

Every Bootstrap 4 layout starts with containers, followed by rows, and finally columns inside those rows. This hierarchy ensures that the layout is organized and responsive.

Example:

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

  • .container provides proper alignment and horizontal padding.

  • .row acts as a wrapper for columns and uses negative margins to align columns correctly.

  • .col automatically splits the row into equal-width columns.

Column Sizing in the Grid System

Columns in Bootstrap 4 are defined using numbers from 1 to 12, representing the portion of the row they occupy. For example, .col-4 occupies 4/12 of the row, leaving space for the remaining columns.

Example:

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

  • The first column occupies one-quarter, and the second occupies three-quarters.

  • Column sizes must sum up to 12 to fit perfectly in a row.

Responsive Columns

The Bootstrap 4 grid system supports responsive breakpoints to control column behavior across devices:

  • .col- → Extra small (phones)

  • .col-sm- → Small (≥576px)

  • .col-md- → Medium (≥768px)

  • .col-lg- → Large (≥992px)

  • .col-xl- → Extra large (≥1200px)

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary text-white p-3">Main Column</div>
    <div class="col-12 col-md-4 bg-success text-white p-3">Sidebar</div>
  </div>
</div>

  • On small devices, both columns stack vertically.

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

  • This ensures readability and responsive design.

Nesting Columns in the Grid System

You can nest columns inside another column to create more complex layouts. This is useful when one section requires multiple sub-columns.

Example:

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

  • Nested columns maintain the flexibility of the parent column.

  • They can use their own responsive classes independently.

  • Flexbox ensures proper alignment and spacing inside nested rows.

Offsets and Column Ordering

Bootstrap 4 allows offsets to move columns to the right:

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

  • .offset-4 moves the column 4 units to the right.

  • Combined with column widths, this helps center content or create gaps.

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

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

  • .order-1 and .order-2 adjust the visual order without changing the HTML.

  • Useful for responsive reordering on different devices.

Alignment and Spacing in the Grid System

The grid system uses Flexbox utilities for alignment:

  • Vertical alignment: .align-items-start, .align-items-center, .align-items-end

  • Horizontal alignment: .justify-content-start, .justify-content-center, .justify-content-end

Example:

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

  • The column is perfectly centered both horizontally and vertically.

  • No additional CSS is required.

Common Practices in Bootstrap 4 Grid System

  1. Always wrap columns in rows inside a container.

  2. Ensure column widths sum up to 12 for predictable layouts.

  3. Use responsive classes for different screen sizes.

  4. Combine offsets and order classes to adjust layout without changing HTML.

  5. Utilize nested columns for complex content sections.

  6. Apply background colors or padding while testing layouts to verify alignment visually.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid System, which is the framework’s foundation for building responsive web layouts. You learned how containers, rows, and columns work together, how to size and nest columns, use responsive classes for different devices, and apply offsets and ordering for advanced layouts. Alignment and spacing utilities provided additional flexibility. Mastering the grid system ensures that your websites are flexible, responsive, and visually consistent across all screen sizes.

Practice Questions

  1. Create a row with three equal columns using .col inside a .container.

  2. Build a two-column layout where the first column is .col-8 and the second column is .col-4.

  3. Make a responsive layout using .col-12 col-md-6 so that two columns stack on small screens.

  4. Nest two smaller columns inside a larger column to create a nested grid layout.

  5. Center a column in a row using .offset-4 and .col-4.

  6. Create a row with three columns of different widths: .col-3, .col-6, .col-3.

  7. Use .order-1 and .order-2 to visually reorder two columns without changing the HTML structure.

  8. Apply .align-items-center and .justify-content-center to center a column vertically and horizontally inside a row.

  9. Add background colors to each column to test alignment and spacing visually.

  10. Create a row with four equal columns and add .p-3 padding to each column for spacing.

← 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