• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid Basic

← Previous Next →

What is the Bootstrap 4 Grid?

The Bootstrap 4 Grid is a powerful system for creating responsive and flexible layouts. It divides the page into a 12-column layout, allowing developers to place content in rows and columns that adjust automatically to different screen sizes. The grid system is the foundation of Bootstrap 4, enabling consistent alignment, spacing, and responsiveness without writing complex CSS from scratch.

Bootstrap 4 uses Flexbox for its grid system, which makes it easier to align columns both horizontally and vertically. Understanding the basic grid structure is essential for building any responsive web page.

What is Rows and Columns?

In the Bootstrap 4 Grid Basic, the layout always starts with a container, followed by a row, and then columns inside the row. This structure ensures proper spacing and alignment.

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 holds the content and centers it with padding.

  • .row ensures columns are aligned horizontally and removes extra spacing.

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

This basic layout will create three equal columns that adjust automatically on different screen sizes.

Column Sizes in Bootstrap 4

You can specify column widths in Bootstrap 4 using numbers from 1 to 12. The number represents the portion of the row a column occupies. For example, .col-4 takes 4 out of 12 columns, leaving space for the rest.

Example:

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

  • Here, two columns are half the width of the row each.

  • Using different numbers allows for flexible layouts like 3/9, 2/10, or any combination summing to 12.

Nesting Columns

You can nest columns inside another column to create complex layouts. Nesting allows you to add more structure without affecting the overall grid system.

Example:

<div class="container">
  <div class="row">
    <div class="col-8 bg-primary 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 p-3">Side Column</div>
  </div>
</div>

  • The main column takes two-thirds of the row, while the side column takes one-third.

  • Nested rows create smaller columns inside the main column.

  • Flexbox ensures proper alignment and spacing.

Offsetting Columns

Bootstrap 4 allows offsetting columns to create empty space before a column starts. This is useful for centering or adjusting layouts without empty divs.

Example:

<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 spaces to the right.

  • This centers a 4-column-wide div in the middle of the 12-column row.

  • Offsets are responsive and work with different breakpoints.

Responsive Grid Basics

Bootstrap 4 provides responsive classes that allow columns to behave differently on various screen sizes. The basic classes are:

  • .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-6 bg-primary p-3">Column 1</div>
    <div class="col-12 col-md-6 bg-success p-3">Column 2</div>
  </div>
</div>

  • On small screens, both columns stack vertically.

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

  • This approach ensures content is readable and responsive on all devices.

Alignment and Spacing in the Basic Grid

Bootstrap 4 uses Flexbox utilities to control column alignment:

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

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

Example:

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

  • The column is centered both horizontally and vertically inside the row.

  • Flexbox ensures proper alignment without custom CSS.

Common Practices in Bootstrap 4 Grid Basic

  1. Always start with a container to wrap rows.

  2. Use rows to organize columns; avoid placing columns directly inside containers.

  3. Keep column sizes adding up to 12 for predictable layouts.

  4. Use responsive classes to adjust columns on different devices.

  5. Avoid hardcoding pixel widths; rely on the grid for flexibility.

  6. Combine offsets and nesting for advanced layouts.

Following these practices ensures clean, responsive, and maintainable layouts.

Summary of the Tutorial

This tutorial covered the Bootstrap 4 Grid Basic, which is the foundation of responsive layouts. You learned about containers, rows, and columns, how to set column widths, use nesting and offsets, and apply responsive classes for different devices. Additionally, Flexbox utilities were introduced for alignment and spacing. Mastering these basics is essential for building flexible and responsive web pages using Bootstrap 4.

Practice Questions

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

  2. Build a two-column layout with .col-6 for each column inside a row.

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

  4. Center a single column using .offset-4 inside a .row.

  5. Create a row with four columns of different widths, such as .col-3, .col-3, .col-3, .col-3.

  6. Make a responsive layout where two columns stack vertically on small screens using .col-12 col-md-6.

  7. Use Flexbox utilities to center a column both vertically and horizontally inside a row.

  8. Build a row with a column taking two-thirds width (.col-8) and a side column taking one-third width (.col-4).

  9. Apply background colors to each column to visually distinguish them and check alignment.

  10. Create a row with three columns and add padding using .p-3 to each column.

← 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