Skip to main content

Course Progress

Loading...

Using Bootstrap Grid System

Duration: 45 minutes
Module 1: CSS Frameworks

Learning Objectives

  • Create responsive layouts
  • Design for multiple devices
  • Use modern CSS techniques
  • Build flexible designs

Understanding the Bootstrap Grid System

The grid system is the foundation of Bootstrap's powerful layout capabilities. It provides a flexible way to arrange content in columns and rows, making it easier to create responsive designs that adapt to different screen sizes.

Think of the Bootstrap grid as a digital version of the grid systems used in print design for decades. Just like a newspaper layout divides content into columns, the Bootstrap grid lets you organize your web content into a structured, responsive format.

Key Features of Bootstrap's Grid System

  • 12-Column Structure: The grid divides the horizontal space into 12 equal columns
  • Responsive Breakpoints: Predefined viewport width ranges (xs, sm, md, lg, xl, xxl) allow different layouts at different screen sizes
  • Built with Flexbox: Uses modern CSS Flexbox for alignment and distribution of space
  • Mobile-First Approach: Designed for mobile devices first, then scales up to larger screens
  • Nestable: You can place grid systems within grid systems for complex layouts
  • Gutters: Built-in spacing between columns with customizable widths
                    graph TD
                    A[Bootstrap Grid System] --> B[Container]
                    B --> C[Row]
                    C --> D[Columns]
                    A --> E[Breakpoints]
                    E --> F[xs - Extra small: <576px]
                    E --> G[sm - Small: ≥576px]
                    E --> H[md - Medium: ≥768px]
                    E --> I[lg - Large: ≥992px]
                    E --> J[xl - Extra large: ≥1200px]
                    E --> K[xxl - Extra extra large: ≥1400px]
                    A --> L[Gutters]
                    A --> M[Alignment Options]
                    
                    style A fill:#7952b3,stroke:#333,stroke-width:2px,color:#fff
                    style B fill:#9766e1,stroke:#333,stroke-width:1px,color:#fff
                    style C fill:#9766e1,stroke:#333,stroke-width:1px,color:#fff
                    style D fill:#9766e1,stroke:#333,stroke-width:1px,color:#fff
                    style E fill:#9766e1,stroke:#333,stroke-width:1px,color:#fff

Anatomy of the Bootstrap Grid

The Bootstrap grid consists of three main components: containers, rows, and columns. Understanding how these elements work together is essential for creating effective layouts.

1. Containers

Containers are the outermost element of the Bootstrap grid. They center your content horizontally and provide consistent padding and margins. Bootstrap offers three container types:

.container

A responsive fixed-width container that sets a max-width at each breakpoint.

Breakpoint Container Width
<576px (xs) 100%
≥576px (sm) 540px
≥768px (md) 720px
≥992px (lg) 960px
≥1200px (xl) 1140px
≥1400px (xxl) 1320px

.container-fluid

A full-width container that spans the entire width of the viewport (100% width at all breakpoints).

<div class="container-fluid">
  <!-- Full-width container content -->
</div>

.container-{breakpoint}

A container that is 100% wide until the specified breakpoint, then becomes fixed-width:

  • .container-sm: 100% width until 576px, then fixed width
  • .container-md: 100% width until 768px, then fixed width
  • .container-lg: 100% width until 992px, then fixed width
  • .container-xl: 100% width until 1200px, then fixed width
  • .container-xxl: 100% width until 1400px, then fixed width

The Picture Frame Analogy

Think of containers like picture frames:

  • .container is like a frame that adjusts its size based on the wall size but has maximum dimensions
  • .container-fluid is like a frame that always extends to the edges of the wall, regardless of size
  • .container-{breakpoint} is like a frame that starts at the wall edges, but stops expanding at a certain wall size

2. Rows

Rows are horizontal groups of columns that ensure your columns are lined up properly. They have negative margins to ensure content inside columns is aligned with the content in your container.

Key points about rows:

  • Rows must be placed within a container
  • Rows use display: flex to create a flexbox container
  • The .row class provides negative horizontal margins to counteract the padding on columns
  • Each row by default can accommodate columns that add up to 12 in width
<div class="container">
  <div class="row">
    <!-- Columns go here -->
  </div>
</div>

3. Columns

Columns are where your content is placed. Their width can be specified for different breakpoints, allowing your layout to adapt to different screen sizes.

Column classes follow this pattern: .col-{breakpoint}-{size} where:

  • {breakpoint} is the screen size (xs, sm, md, lg, xl, xxl)
  • {size} is a number from 1 to 12 representing how many of the 12 available columns to span

If you don't specify a breakpoint (e.g., .col-6), it applies to all screen sizes. If you don't specify a size (e.g., .col-md), the column will automatically size itself based on content.

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- This column is:
           - 6 columns wide on small screens (sm)
           - 4 columns wide on medium screens (md)
           - 3 columns wide on large screens (lg) -->
    </div>
  </div>
</div>

Grid Visualization

Here's a visual representation of the Bootstrap grid system with its 12 columns:

.container .row .row .col-sm-3 .col-sm-4 .col-sm-5 1 2 3 4 5 6 7 8 9 10 11 12

Responsive Breakpoints

Bootstrap's grid system is mobile-first, which means styles start at the smallest breakpoint and then are overridden as the screen gets larger. This approach ensures your layout works well on small devices by default.

Bootstrap 5 Breakpoints

Breakpoint Class Infix Dimensions Device Examples
Extra small None <576px Portrait smartphones
Small sm ≥576px Landscape smartphones
Medium md ≥768px Tablets
Large lg ≥992px Laptops
Extra large xl ≥1200px Desktops
Extra extra large xxl ≥1400px Large desktops

Breakpoints Visualization

0px xs 576px sm 768px md 992px lg 1200px xl 1400px xxl + Mobile Phones Tablets Desktops & Laptops

Understanding How Breakpoints Work

The key to mastering the Bootstrap grid is understanding how breakpoints affect your layout. Here's how it works:

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

In this example:

  • On small screens (<768px), each column takes full width (12 columns), stacking vertically
  • On medium screens (≥768px), the first two columns each take half the width (6 columns each) and sit side by side, while the third column remains full width below them
  • On large screens (≥992px), all three columns take equal width (4 columns each) and sit side by side

Responsive Behavior Visualization

Mobile View (<768px)
Column 1 Column 2 Column 3
Tablet View (≥768px)
Column 1 Column 2 Column 3
Desktop View (≥992px)
Column 1 Column 2 Column 3

Basic Grid Layouts

Now that we understand the components of the Bootstrap grid system, let's look at some common layout patterns.

Equal-Width Columns

When you want columns to share equal width, you can use .col without specifying a number:

<div class="container">
  <div class="row">
    <div class="col">Equal Width</div>
    <div class="col">Equal Width</div>
    <div class="col">Equal Width</div>
  </div>
</div>

This creates three columns of equal width, regardless of how many columns there are. Bootstrap's flexbox grid automatically distributes the space evenly.

Equal Width Equal Width Equal Width

Setting One Column Width

You can set the width of one column and have the others automatically resize:

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

In this example, the middle column takes up 6 of the 12 available columns, and the remaining space is divided equally between the first and third columns.

Auto Width Width 6 Auto Width

Responsive Multi-Row Layout

You can create layouts that change from single-column on mobile to multi-column on larger screens:

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

This creates a layout that:

  • Shows one box per row on mobile (each taking full width)
  • Shows two boxes per row on medium screens (each taking half width)
  • Shows all four boxes in one row on large screens (each taking quarter width)

Mobile View

Box 1 Box 2 Box 3 Box 4

Tablet View

Box 1 Box 2 Box 3 Box 4

Desktop View

Box 1 Box 2 Box 3 Box 4

Column Wrapping

When the sum of column sizes in a row exceeds 12, the extra columns wrap to a new line:

<div class="container">
  <div class="row">
    <div class="col-9">Width 9</div>
    <div class="col-4">Width 4 (wraps to new line)</div>
    <div class="col-6">Width 6</div>
  </div>
</div>

In this example, 9 + 4 = 13, which is more than 12, so the second column wraps to a new line.

Width 9 Width 4 Width 6

Advanced Grid Features

Bootstrap's grid system provides several advanced features that give you more control over your layouts.

Column Ordering

You can change the visual order of columns using the .order-* classes, without changing their order in the HTML:

<div class="container">
  <div class="row">
    <div class="col order-3">First in HTML, Third in display</div>
    <div class="col order-1">Second in HTML, First in display</div>
    <div class="col order-2">Third in HTML, Second in display</div>
  </div>
</div>

Order classes range from .order-1 to .order-5 and can be combined with breakpoints for responsive ordering, e.g., .order-md-1.

First in HTML, Third in display order-3 Second in HTML, First in display order-1 Third in HTML, Second in display order-2 Visual Order: 2 → 3 → 1 HTML Order: 1 → 2 → 3

Column Offsetting

You can offset columns to create additional space between them using the .offset-* classes:

<div class="container">
  <div class="row">
    <div class="col-md-4">Width 4</div>
    <div class="col-md-4 offset-md-4">Width 4, Offset 4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">Width 3, Offset 3</div>
    <div class="col-md-3 offset-md-3">Width 3, Offset 3</div>
  </div>
</div>

Offsets can also be responsive with classes like .offset-sm-1, .offset-md-2, etc.

Width 4 Width 4, Offset 4 Offset 4 Width 3, Offset 3 Width 3, Offset 3 Offset 3 Offset 3

Nesting Columns

You can nest rows and columns within columns to create more complex layouts:

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: Column 9
      <div class="row">
        <div class="col-8 col-sm-6">Level 2: Column 6</div>
        <div class="col-4 col-sm-6">Level 2: Column 6</div>
      </div>
    </div>
    <div class="col-sm-3">Level 1: Column 3</div>
  </div>
</div>

Nested rows create a new 12-column grid within the parent column. In the example above, the inner columns divide the width of the parent 9-column grid, not the full container.

Level 1: Column 9 Level 1: Column 3 Level 2: Column 6 Level 2: Column 6

Column Alignment

You can align columns vertically within a row using flexbox alignment utilities:

<!-- Vertical alignment -->
<div class="container">
  <!-- Align columns to the top of the row -->
  <div class="row align-items-start">
    <div class="col">Top aligned</div>
    <div class="col">Top aligned</div>
    <div class="col">Top aligned</div>
  </div>
  
  <!-- Align columns to the center of the row -->
  <div class="row align-items-center">
    <div class="col">Center aligned</div>
    <div class="col">Center aligned</div>
    <div class="col">Center aligned</div>
  </div>
  
  <!-- Align columns to the bottom of the row -->
  <div class="row align-items-end">
    <div class="col">Bottom aligned</div>
    <div class="col">Bottom aligned</div>
    <div class="col">Bottom aligned</div>
  </div>
</div>

<!-- Individual column alignment -->
<div class="container">
  <div class="row">
    <div class="col align-self-start">Top</div>
    <div class="col align-self-center">Center</div>
    <div class="col align-self-end">Bottom</div>
  </div>
</div>

You can also align columns horizontally using .justify-content-start, .justify-content-center, .justify-content-end, .justify-content-around, and .justify-content-between.

Vertical Alignment

Top aligned Top aligned Top aligned .row align-items-start Center aligned Center aligned Center aligned .row align-items-center Bottom aligned Bottom aligned Bottom aligned .row align-items-end

Individual Column Alignment

Top .align-self-start Center .align-self-center Bottom .align-self-end

Gutters (Spacing Between Columns)

You can control the spacing between columns using gutter classes:

<!-- Default gutters -->
<div class="container">
  <div class="row">
    <div class="col-6">Default gutter</div>
    <div class="col-6">Default gutter</div>
  </div>
</div>

<!-- Larger gutters -->
<div class="container">
  <div class="row g-5">
    <div class="col-6">Larger gutter (g-5)</div>
    <div class="col-6">Larger gutter (g-5)</div>
  </div>
</div>

<!-- Horizontal gutters only -->
<div class="container">
  <div class="row gx-5">
    <div class="col-6">Horizontal gutter (gx-5)</div>
    <div class="col-6">Horizontal gutter (gx-5)</div>
  </div>
</div>

<!-- Vertical gutters only -->
<div class="container">
  <div class="row gy-5">
    <div class="col-6">Vertical gutter (gy-5)</div>
    <div class="col-6">Vertical gutter (gy-5)</div>
  </div>
</div>

Gutter sizes range from g-0 (no gutter) to g-5 (largest gutter). The default is g-3.

Gutter Comparison

Default gutter Default gutter Default row (g-3) Larger gutter (g-5) Larger gutter (g-5) Larger gutters (g-5)

Common Grid Patterns and Use Cases

Let's explore some common real-world grid layouts and how to implement them with Bootstrap's grid system.

Classic Blog Layout

A typical blog layout with a main content area and a sidebar:

<div class="container">
  <header class="row">
    <div class="col-12">
      <h1>My Blog</h1>
    </div>
  </header>
  
  <div class="row">
    <!-- Main content -->
    <main class="col-12 col-lg-8">
      <article>
        <h2>Blog Post Title</h2>
        <p>Blog post content...</p>
      </article>
      
      <article>
        <h2>Another Blog Post</h2>
        <p>More content...</p>
      </article>
    </main>
    
    <!-- Sidebar -->
    <aside class="col-12 col-lg-4">
      <div class="p-3 bg-light">
        <h3>About</h3>
        <p>Sidebar content...</p>
      </div>
      
      <div class="p-3 bg-light mt-3">
        <h3>Categories</h3>
        <ul>
          <li>Category 1</li>
          <li>Category 2</li>
        </ul>
      </div>
    </aside>
  </div>
  
  <footer class="row">
    <div class="col-12">
      <p>© 2025 My Blog</p>
    </div>
  </footer>
</div>

This layout:

  • Shows a stacked layout on mobile (main content above sidebar)
  • On large screens (≥992px), displays a two-column layout with main content taking 8 columns and sidebar taking 4 columns

Mobile View

Header Main Content Sidebar Footer

Desktop View

Header Main Content Sidebar Footer

Product Card Grid

A responsive grid of product cards commonly used in e-commerce websites:

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    <!-- Product Card 1 -->
    <div class="col">
      <div class="card h-100">
        <img src="product1.jpg" class="card-img-top" alt="Product 1">
        <div class="card-body">
          <h5 class="card-title">Product 1</h5>
          <p class="card-text">Product description...</p>
          <p class="card-text">$19.99</p>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
      </div>
    </div>
    
    <!-- Product Card 2 -->
    <div class="col">
      <div class="card h-100">
        <img src="product2.jpg" class="card-img-top" alt="Product 2">
        <div class="card-body">
          <h5 class="card-title">Product 2</h5>
          <p class="card-text">Product description...</p>
          <p class="card-text">$24.99</p>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
      </div>
    </div>
    
    <!-- More product cards... -->
  </div>
</div>

This layout uses the row-cols-* classes to specify how many columns to show per row at different breakpoints:

  • row-cols-1: 1 card per row on extra small screens
  • row-cols-sm-2: 2 cards per row on small screens
  • row-cols-md-3: 3 cards per row on medium screens
  • row-cols-lg-4: 4 cards per row on large screens

Row-cols Pattern

Mobile (xs) Card 1 Card 2 Card 3 Card 4 row-cols-1 Tablet (sm) Card 1 Card 2 Card 3 Card 4 row-cols-sm-2 Desktop (md) Card 1 Card 2 Card 3 Card 4 row-cols-md-3

Responsive Vertical Stacking to Horizontal Layout

A common pattern where elements stack vertically on small screens but align horizontally on larger screens:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">Feature 1</h5>
          <p class="card-text">Feature description...</p>
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md-4">
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">Feature 2</h5>
          <p class="card-text">Feature description...</p>
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md-4">
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">Feature 3</h5>
          <p class="card-text">Feature description...</p>
        </div>
      </div>
    </div>
  </div>
</div>

This is a very common pattern for feature sections, team member listings, or service offerings.

Mobile View (Stacked)

Feature 1 Feature 2 Feature 3

Desktop View (Horizontal)

Feature 1 Feature 2 Feature 3

Holy Grail Layout

The classic "Holy Grail" layout with header, footer, main content, and two sidebars:

<div class="container">
  <!-- Header -->
  <header class="row">
    <div class="col-12 p-3 bg-light">
      <h1>Site Header</h1>
    </div>
  </header>
  
  <div class="row">
    <!-- Left Sidebar -->
    <nav class="col-12 col-md-3 p-3 bg-light">
      <h2>Navigation</h2>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
    
    <!-- Main Content -->
    <main class="col-12 col-md-6 p-3">
      <h2>Main Content</h2>
      <p>This is the main content area of the layout.</p>
    </main>
    
    <!-- Right Sidebar -->
    <aside class="col-12 col-md-3 p-3 bg-light">
      <h2>Sidebar</h2>
      <p>Additional information, ads, etc.</p>
    </aside>
  </div>
  
  <!-- Footer -->
  <footer class="row">
    <div class="col-12 p-3 bg-light">
      <p>© 2025 My Website</p>
    </div>
  </footer>
</div>

On mobile, this layout stacks all sections vertically. On medium and larger screens, it creates a three-column layout with navigation, content, and sidebar.

Desktop View (Holy Grail)

Header Navigation Main Content Sidebar Footer

Grid System Best Practices

Here are some best practices to follow when working with Bootstrap's grid system:

Always Use Containers

Always place your grid components inside a container (either .container or .container-fluid). Containers provide proper padding and centering for your layouts.

<!-- Good: Grid inside container -->
<div class="container">
  <div class="row">
    <div class="col">Content</div>
  </div>
</div>

<!-- Avoid: Grid without container -->
<div class="row">
  <div class="col">Content</div>
</div>

Only Place Columns Directly Inside Rows

Columns should be direct children of rows. Don't place other elements between rows and columns, and don't nest rows directly inside other rows without an intervening column.

<!-- Good: Columns as direct children of rows -->
<div class="row">
  <div class="col-md-6">Column content</div>
  <div class="col-md-6">Column content</div>
</div>

<!-- Avoid: Divs between rows and columns -->
<div class="row">
  <div>
    <div class="col-md-6">Column content</div>
  </div>
</div>

Use Semantic HTML Elements

Apply column classes to semantic HTML elements when appropriate to improve accessibility and SEO:

<div class="container">
  <div class="row">
    <main class="col-md-8">Main content</main>
    <aside class="col-md-4">Sidebar content</aside>
  </div>
</div>

Mobile-First Approach

Start with the mobile layout and then progressively enhance for larger screens. Bootstrap's grid is designed to be mobile-first, so follow this pattern:

<!-- Mobile-first approach -->
<div class="col-12 col-md-6 col-lg-4">
  <!-- This is full width on mobile (xs),
       half width on medium screens,
       one-third width on large screens -->
</div>

Use Auto-Layout Columns When Possible

For equal-width columns, use .col without specifying numbers. This allows Bootstrap to handle the layout automatically:

<!-- Equal width columns -->
<div class="row">
  <div class="col">Equal</div>
  <div class="col">Equal</div>
  <div class="col">Equal</div>
</div>

Use Nested Grids Carefully

When nesting grids, remember that the nested grid still follows the 12-column system, but relative to the parent column:

<div class="row">
  <div class="col-sm-9">
    Level 1: col-sm-9
    <div class="row">
      <div class="col-sm-6">Level 2: col-sm-6</div>
      <div class="col-sm-6">Level 2: col-sm-6</div>
    </div>
  </div>
</div>

Use Row Classes for Multiple Rows

When you need multiple rows of content, create multiple .row elements rather than relying on wrapping:

<!-- Good: Multiple distinct rows -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Row 1, Column 1</div>
    <div class="col-md-6">Row 1, Column 2</div>
  </div>
  <div class="row">
    <div class="col-md-6">Row 2, Column 1</div>
    <div class="col-md-6">Row 2, Column 2</div>
  </div>
</div>

<!-- Avoid: Relying on wrapping -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
    <div class="col-md-6">Column 3 (wraps)</div>
    <div class="col-md-6">Column 4 (wraps)</div>
  </div>
</div>

Add Content Inside Columns

Don't add significant padding, margins, or borders directly to columns. Instead, place a div inside the column and style that:

<!-- Good: Content inside columns -->
<div class="row">
  <div class="col-md-4">
    <div class="p-3 border bg-light">
      Column content here
    </div>
  </div>
</div>

<!-- Avoid: Styling columns directly -->
<div class="row">
  <div class="col-md-4 p-3 border bg-light">
    Column content here
  </div>
</div>

Common Grid System Pitfalls

Here are some common mistakes to avoid when working with Bootstrap's grid system:

Forgetting That Columns Must Total 12

In each row, columns should add up to 12 for optimal layout. If they add up to less than 12, there will be unused space. If they add up to more than 12, the extra columns will wrap to a new line.

<!-- Less than 12: unused space -->
<div class="row">
  <div class="col-md-4">Column 1</div>
  <div class="col-md-4">Column 2</div>
  <!-- 4 columns of unused space -->
</div>

<!-- More than 12: wrapping -->
<div class="row">
  <div class="col-md-8">Column 1</div>
  <div class="col-md-6">Column 2 (wraps to new line)</div>
</div>

Misunderstanding Breakpoints

Remember that grid classes apply at the specified breakpoint and above. For example, .col-md-6 means "take 6 columns on medium screens and above" (not just on medium screens).

<!-- Applies to md and above -->
<div class="col-md-6">
  <!-- 6 columns wide on medium, large, and extra large screens
       12 columns (full width) on small and extra small screens -->
</div>

Unnecessary Nesting

Don't create complex nested grid structures when simpler layouts would work. Nesting adds markup complexity and can lead to unexpected behaviors.

Missing Row or Container

Always ensure your grid has the proper structure: container → row → column. Missing any of these components can break the layout.

Inconsistent Breakpoints

Using inconsistent breakpoints across your site can lead to unpredictable layouts. Try to standardize which breakpoints you use for similar components.

Ignoring Gutters

Remember that Bootstrap's grid includes gutters (padding) between columns. If you're trying to create flush edges, you may need to adjust gutter sizes or use .g-0 to remove gutters.

Practice Exercises

Exercise 1: Basic Grid Layout

Create a responsive layout with the following requirements:

  • A full-width header
  • Three equal-width columns on desktop (lg)
  • Two columns on tablet (md) - the first taking 1/3 width and the second taking 2/3 width
  • Stacked columns (full width) on mobile (xs and sm)
  • A full-width footer

Exercise 2: Product Gallery

Create a responsive product gallery with the following specifications:

  • 4 products per row on extra large screens (xl)
  • 3 products per row on large screens (lg)
  • 2 products per row on medium screens (md)
  • 1 product per row on small and extra small screens (sm and xs)
  • Each product should have an image, title, price, and "Add to Cart" button

Exercise 3: Complex Layout

Create a complex layout for a news website with:

  • A full-width header with a logo and navigation menu
  • A featured article section spanning 2/3 of the width on desktop
  • A sidebar with latest news taking 1/3 of the width on desktop
  • A section of 3 article cards per row on desktop, 2 per row on tablet, and 1 per row on mobile
  • A footer with 4 columns on desktop, 2 columns on tablet, and stacked on mobile

Conclusion

Bootstrap's grid system is a powerful tool for creating responsive layouts. Understanding its components (containers, rows, and columns) and how they interact at different breakpoints is essential for effective web design.

Key takeaways from this tutorial:

  • Bootstrap's grid is mobile-first, with layouts defined for small screens and then enhanced for larger screens
  • The grid divides the screen into 12 equal columns that can be combined in various ways
  • Use containers to center content and provide consistent padding
  • Use rows to create horizontal groups of columns
  • Use columns with appropriate breakpoint classes to control layout across different screen sizes
  • Advanced features like ordering, offsetting, and nesting allow for complex layouts

As you become more comfortable with Bootstrap's grid system, you'll find it easier to create sophisticated responsive layouts that work well across all devices.

Additional Resources