Bootstrap 4 Grids

Welcome to The Coding College! In this tutorial, we’ll dive deep into the Bootstrap 4 Grid System, the backbone of creating responsive, mobile-first layouts. Whether you’re building a simple website or a complex web app, understanding the Bootstrap 4 grid system will help you organize content effectively.

Let’s explore the grid system and learn how to use it with practical examples!

What is the Bootstrap 4 Grid System?

The Bootstrap 4 Grid System is a flexible layout system based on a 12-column structure. It allows developers to create responsive designs by dividing the page into rows and columns.

Key Features of the Grid System:

  1. 12-Column Layout: Content is divided into 12 equal-width columns.
  2. Responsive Breakpoints: Adjusts layout based on screen size.
  3. Nestable: Columns can be nested for complex layouts.
  4. Flexbox-Powered: Provides alignment and distribution control.

Bootstrap 4 Grid Classes

The grid system uses a combination of classes to control layout:

1. .container or .container-fluid

The grid must be wrapped inside a container:

  • .container: Fixed-width container with responsive breakpoints.
  • .container-fluid: Full-width container spanning the viewport.

2. .row

Rows are used to create horizontal groups of columns.

3. .col-*

Columns define the layout within a row. The * represents the number of columns (1-12) or the breakpoint (-sm, -md, -lg, -xl).

Responsive Breakpoints in Bootstrap 4

Bootstrap 4 uses the following breakpoints to make layouts responsive:

Breakpoint NameClass PrefixScreen Size (Min Width)
Extra Small.col-*< 576px (default)
Small.col-sm-*≥ 576px
Medium.col-md-*≥ 768px
Large.col-lg-*≥ 992px
Extra Large.col-xl-*≥ 1200px

Basic Grid Example

Here’s a simple example of how to use the grid system:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Bootstrap 4 Grid Example</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
    <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>  
</body>  
</html>

Auto-Layout Columns

Bootstrap 4 allows auto-layout for columns, meaning columns automatically size based on their content or available space.

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

Specifying Column Widths

You can specify the number of columns a section should span using .col-{size}-{number} classes.

<div class="container">  
    <div class="row">  
        <div class="col-md-6">Half Width</div>  
        <div class="col-md-6">Half Width</div>  
    </div>  
</div>

Offset Columns

Offsets create empty space to the left of a column. Use the .offset-* class:

<div class="container">  
    <div class="row">  
        <div class="col-md-4 offset-md-4">Centered Column</div>  
    </div>  
</div>

Nesting Columns

Columns can be nested within other columns to create complex layouts.

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

Alignment and Order

With Bootstrap 4’s flexbox-based grid, you can control alignment and ordering.

Vertical Alignment

Use .align-items-* for vertical alignment:

  • .align-items-start: Align to top.
  • .align-items-center: Align to middle.
  • .align-items-end: Align to bottom.
<div class="container">  
    <div class="row align-items-center" style="height: 100px;">  
        <div class="col">Aligned to Middle</div>  
    </div>  
</div>

Column Ordering

Use .order-* to change the order of columns.

<div class="container">  
    <div class="row">  
        <div class="col order-2">Second</div>  
        <div class="col order-1">First</div>  
    </div>  
</div>

Grid System Best Practices

  1. Use the 12-Column Structure: Keep your layout balanced by utilizing the 12-column system.
  2. Start Mobile-First: Design for smaller screens and scale up.
  3. Test Responsiveness: Always test your layout on different devices.
  4. Avoid Over-Nesting: Minimize the use of nested rows and columns for better readability.

Learn More with The Coding College

At The Coding College, we’re committed to providing high-quality tutorials to help you master web development. The Bootstrap 4 grid system is a powerful tool for responsive design, and now you have the knowledge to use it effectively.

Explore more on our website to learn about Bootstrap components, advanced layouts, and more!

Leave a Comment