Demo Mode

Lesson 10 of 14

Concept 10: Bootstrap Grid

Bootstrap Grid System

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

Create responsive web layouts using Bootstrap's grid system
Use containers, rows, and columns effectively
Build layouts that look great on phones, tablets, and computers
Apply different column sizes for different screen sizes

:information_source: Bootstrap Grid System is a responsive layout system that uses containers, rows, and columns to create flexible web page layouts. These layouts automatically adapt to different screen sizes and devices, making your website look great everywhere!

Why Use Bootstrap Grid? :emoji:

Bootstrap's grid system helps you:

Create responsive layouts quickly - Your website adapts to different screen sizes automatically
Use a 12-column system - Think of it like dividing your page into 12 equal parts
Build mobile-first designs - Your site looks great on phones, tablets, and computers
Avoid display problems - No more worrying about your site breaking on different devices

To create layouts with Bootstrap grid, you need three building blocks:

Containers - The outer wrapper that holds everything
Rows - Horizontal groups that organize your content
Columns - Vertical divisions where your content lives

:package: Bootstrap Containers

:information_source: Info A Bootstrap container is the outermost wrapper of your grid system. It creates a responsive box that holds all your page content and ensures proper alignment and spacing.

Think of a container like a box that holds all your content. Your page structure looks like this:

The <body> tag (your whole HTML page)
A container div: <div class="container"> or <div class="container-fluid">
Your content goes inside the container

The container in the body

Two Types of Containers

Bootstrap gives you two container options:

.container - Has a fixed maximum width
- Changes width at different screen sizes
- Leaves some space on the sides on large screens
- Good for most websites
.container-fluid - Always full width
- Stretches across the entire screen
- No side margins
- Perfect for dashboards or full-width designs

:bulb: Tip Use .container for regular websites and .container-fluid when you want your content to stretch edge-to-edge!

The difference between .container and .container-fluid

:emoji:️ Rows and Columns

Bootstrap's grid system divides each row into 12 equal parts. You can use these parts individually or combine them to create different layouts.

Rows - The Horizontal Organizers

Rows group your columns together horizontally. Here's what you need to know:

Create a row by adding class="row" to a div
Always put rows inside containers (this is important!)
Rows are only for holding columns - don't put other content directly in rows

The basic structure looks like this:

html

<div class="container">
  <div class="row">
    <!-- Columns go here -->
  </div>
</div>

:memo: Note Why rows need containers: Rows have special negative margins that containers balance out with padding. Without a container, you'll get unwanted horizontal scrolling!

The illustration of the row output in the browser

Columns - Where Your Content Lives

Columns are the vertical divisions where you put your actual content. They're like cells in a table:

Add class="col" to create a column
Columns automatically space out your content
All content must go inside columns (not directly in rows)

Here's a simple column:

html

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Your content goes here -->
    </div>
  </div>
</div>

To create multiple columns, just add more divs with the col class:

html

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

:emoji: Column Sizing

Automatic Equal-Width Columns

When you use class="col", Bootstrap automatically calculates column widths:

Each column gets an equal share of the available space
The width = container width / number of columns
Works on all screen sizes automatically

Let's see how 4 equal columns work:

Example:

HTML Input:

html

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

Output:

css

[Column 1] [Column 2] [Column 3] [Column 4]
Each column takes up 25% of the container width (12 ÷ 4 = 3 columns each)

Custom Column Sizes with Numbers

Bootstrap divides each row into 12 equal parts. You can specify how many parts each column should take:

Use .col- followed by a number (1-12)
The numbers must add up to 12 or less
For 3 equal columns, use .col-4 (because 4 x 3 = 12)

Here's an example with different column sizes:

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-2">
      <div class="bg-primary text-white p-2 text-center">col-2</div>
    </div>
    <div class="col-6">
      <div class="bg-secondary text-white p-2 text-center">col-6</div>
    </div>
    <div class="col-4">
      <div class="bg-success text-white p-2 text-center">col-4</div>
    </div>
  </div>
</div>

Output:

ini

[small] [        large        ] [  medium  ]
 col-2         col-6            col-4
(2+6+4 = 12 columns total)

:bulb: Tip Column Math Tips:

Numbers less than 12 = columns won't fill the whole row
Numbers more than 12 = extra columns wrap to the next line
Always aim for exactly 12 for full-width layouts!

Try this interactive example to see columns in action: https://codepen.io/cristinaconacel/pen/xyaQNw

:iphone: Grid Breakpoints - Making Your Site Responsive

What Are Breakpoints?

:information_source: Breakpoints are specific screen sizes where your layout changes. Think of them as "switching points" where your design adapts to different devices.

Bootstrap uses breakpoints to help your site look great on:

Small phones
Large phones
Tablets
Laptops
Desktop computers

How Breakpoints Work

When you add a breakpoint to a column class, you're saying: "Apply this layout when the screen is at least this size."

The format is: col-[prefix]-[number]

prefix = the screen size (sm, md, lg, xl)
number = how many columns to use (1-12)

Bootstrap's Breakpoint Sizes

Prefix	Grid breakpoints	Viewport Size	Device size
`.col-`	extra small	<576px	Mobile (Portrait)
`.col-sm-`	small	>=576px	Mobile (Landscape)
`.col-md-`	medium	>=768px	Tablets
`.col-lg-`	large	>=992px	Laptops
`.col-xl-`	extra large	>=1200px	Laptops & Desktops

Understanding the Column Classes

Let's break down what class="col-md-4" means:

col = this is a column
md = applies to medium screens and larger
4 = takes up 4 out of 12 columns

:memo: Note Important Rule: When you set a breakpoint, it applies to that screen size and all larger sizes too! So col-sm-6 works on small, medium, large, and extra-large screens.

Example: Creating a 4-Column Layout for Large Screens

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-xl-3">
      <div class="bg-primary text-white p-2 text-center">Column 1</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-secondary text-white p-2 text-center">Column 2</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-success text-white p-2 text-center">Column 3</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-danger text-white p-2 text-center">Column 4</div>
    </div>
  </div>
</div>

Output:

Viewport ``size >= 1200``px: [Col 1] [Col 2] [Col 3] [Col 4] (4 columns in one row)
Viewport `size1200 < 6703`px:
csharp
```
[Column 1]
[Column 2]
[Column 3]
[Column 4]
```
(columns stack vertically)

:art: Responsive Column Sizing

Creating Different Layouts for Different Screens

Want your website to look different on phones versus computers? You can combine multiple column classes! This lets you create layouts that adapt perfectly to each device.

Simply add multiple col- classes to the same element:

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-md-6 col-xl-3">
      <div class="bg-primary text-white p-2 text-center">Column 1</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-secondary text-white p-2 text-center">Column 2</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-success text-white p-2 text-center">Column 3</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-danger text-white p-2 text-center">Column 4</div>
    </div>
  </div>
</div>

Output:

Viewport ``size >= 1200``px (Extra Large):

sql

[Column 1] [Column 2] [Column 3] [Column 4]
Following .col-xl-3 - 4 columns in one row

Viewport ``size >= 768``px ``but < 1200``px (Medium):

sql

[  Column 1  ] [  Column 2  ]
[  Column 3  ] [  Column 4  ]
Following .col-md-6 - 2 columns per row

Viewport `size768 < 7318`px (Small):

sql

[Column 1]
[Column 2]
[Column 3]
[Column 4]
Default stacking - 1 column per row

:dart: Quick Summary

Let's recap what you've learned about Bootstrap Grid:

Three Building Blocks:
- Container -> The outer wrapper (.container or .container-fluid)
- Row -> Groups columns horizontally (class="row")
- Column -> Where your content lives (class="col")
The 12-Column System:
- Each row is divided into 12 equal parts
- Use col-[number] to specify column width
- Numbers should add up to 12 for full-width layouts
Responsive Breakpoints:
- col- -> Extra small (phones)
- col-sm- -> Small (landscape phones)
- col-md- -> Medium (tablets)
- col-lg- -> Large (laptops)
- col-xl- -> Extra large (desktops)
Pro Tips:
- Always nest: Container -> Row -> Column
- Combine classes for responsive designs
- Test your layouts on different screen sizes!

:emoji: Video Tutorials

Bootstrap Grid System (Part 1) Video Tutorial

Bootstrap Grid System (Part 2) Video Tutorial

:emoji: AI Prompt

Code with AI: Use AI to generate Bootstrap grid layouts.

Prompts:

"Bootstrap code for a three-column layout that stacks on mobile."
"Bootstrap code for a two-column layout with unequal column widths."

:muscle: Practice Time!

Try these exercises to master Bootstrap Grid:

Basic Layout Challenge:
- Create a container with one row
- Add three equal-width columns
- Put different colored boxes in each column
Responsive Challenge:
- Build a layout with 4 columns on desktop
- Make it show 2 columns on tablets
- Make it stack to 1 column on phones
Mixed Sizes Challenge:
- Create a row with 3 columns
- Make the first column take 2 spaces
- Make the middle column take 8 spaces
- Make the last column take 2 spaces
Real-World Project:
- Design a simple blog layout
- Main content area (8 columns)
- Sidebar (4 columns)
- Make it responsive for mobile devices

Remember: The best way to learn Bootstrap Grid is by building lots of layouts. Start simple and gradually make them more complex!

Lesson 10 of 14

Concept 10: Bootstrap Grid

Bootstrap Grid System

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

Create responsive web layouts using Bootstrap's grid system
Use containers, rows, and columns effectively
Build layouts that look great on phones, tablets, and computers
Apply different column sizes for different screen sizes

:information_source: Bootstrap Grid System is a responsive layout system that uses containers, rows, and columns to create flexible web page layouts. These layouts automatically adapt to different screen sizes and devices, making your website look great everywhere!

Why Use Bootstrap Grid? :emoji:

Bootstrap's grid system helps you:

Create responsive layouts quickly - Your website adapts to different screen sizes automatically
Use a 12-column system - Think of it like dividing your page into 12 equal parts
Build mobile-first designs - Your site looks great on phones, tablets, and computers
Avoid display problems - No more worrying about your site breaking on different devices

To create layouts with Bootstrap grid, you need three building blocks:

Containers - The outer wrapper that holds everything
Rows - Horizontal groups that organize your content
Columns - Vertical divisions where your content lives

:package: Bootstrap Containers

:information_source: Info A Bootstrap container is the outermost wrapper of your grid system. It creates a responsive box that holds all your page content and ensures proper alignment and spacing.

Think of a container like a box that holds all your content. Your page structure looks like this:

The <body> tag (your whole HTML page)
A container div: <div class="container"> or <div class="container-fluid">
Your content goes inside the container

The container in the body

Two Types of Containers

Bootstrap gives you two container options:

.container - Has a fixed maximum width
- Changes width at different screen sizes
- Leaves some space on the sides on large screens
- Good for most websites
.container-fluid - Always full width
- Stretches across the entire screen
- No side margins
- Perfect for dashboards or full-width designs

:bulb: Tip Use .container for regular websites and .container-fluid when you want your content to stretch edge-to-edge!

The difference between .container and .container-fluid

:emoji:️ Rows and Columns

Bootstrap's grid system divides each row into 12 equal parts. You can use these parts individually or combine them to create different layouts.

Rows - The Horizontal Organizers

Rows group your columns together horizontally. Here's what you need to know:

Create a row by adding class="row" to a div
Always put rows inside containers (this is important!)
Rows are only for holding columns - don't put other content directly in rows

The basic structure looks like this:

html

<div class="container">
  <div class="row">
    <!-- Columns go here -->
  </div>
</div>

:memo: Note Why rows need containers: Rows have special negative margins that containers balance out with padding. Without a container, you'll get unwanted horizontal scrolling!

The illustration of the row output in the browser

Columns - Where Your Content Lives

Columns are the vertical divisions where you put your actual content. They're like cells in a table:

Add class="col" to create a column
Columns automatically space out your content
All content must go inside columns (not directly in rows)

Here's a simple column:

html

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Your content goes here -->
    </div>
  </div>
</div>

To create multiple columns, just add more divs with the col class:

html

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

:emoji: Column Sizing

Automatic Equal-Width Columns

When you use class="col", Bootstrap automatically calculates column widths:

Each column gets an equal share of the available space
The width = container width / number of columns
Works on all screen sizes automatically

Let's see how 4 equal columns work:

Example:

HTML Input:

html

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

Output:

css

[Column 1] [Column 2] [Column 3] [Column 4]
Each column takes up 25% of the container width (12 ÷ 4 = 3 columns each)

Custom Column Sizes with Numbers

Bootstrap divides each row into 12 equal parts. You can specify how many parts each column should take:

Use .col- followed by a number (1-12)
The numbers must add up to 12 or less
For 3 equal columns, use .col-4 (because 4 x 3 = 12)

Here's an example with different column sizes:

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-2">
      <div class="bg-primary text-white p-2 text-center">col-2</div>
    </div>
    <div class="col-6">
      <div class="bg-secondary text-white p-2 text-center">col-6</div>
    </div>
    <div class="col-4">
      <div class="bg-success text-white p-2 text-center">col-4</div>
    </div>
  </div>
</div>

Output:

ini

[small] [        large        ] [  medium  ]
 col-2         col-6            col-4
(2+6+4 = 12 columns total)

:bulb: Tip Column Math Tips:

Numbers less than 12 = columns won't fill the whole row
Numbers more than 12 = extra columns wrap to the next line
Always aim for exactly 12 for full-width layouts!

Try this interactive example to see columns in action: https://codepen.io/cristinaconacel/pen/xyaQNw

:iphone: Grid Breakpoints - Making Your Site Responsive

What Are Breakpoints?

:information_source: Breakpoints are specific screen sizes where your layout changes. Think of them as "switching points" where your design adapts to different devices.

Bootstrap uses breakpoints to help your site look great on:

Small phones
Large phones
Tablets
Laptops
Desktop computers

How Breakpoints Work

When you add a breakpoint to a column class, you're saying: "Apply this layout when the screen is at least this size."

The format is: col-[prefix]-[number]

prefix = the screen size (sm, md, lg, xl)
number = how many columns to use (1-12)

Bootstrap's Breakpoint Sizes

Prefix	Grid breakpoints	Viewport Size	Device size
`.col-`	extra small	<576px	Mobile (Portrait)
`.col-sm-`	small	>=576px	Mobile (Landscape)
`.col-md-`	medium	>=768px	Tablets
`.col-lg-`	large	>=992px	Laptops
`.col-xl-`	extra large	>=1200px	Laptops & Desktops

Understanding the Column Classes

Let's break down what class="col-md-4" means:

col = this is a column
md = applies to medium screens and larger
4 = takes up 4 out of 12 columns

:memo: Note Important Rule: When you set a breakpoint, it applies to that screen size and all larger sizes too! So col-sm-6 works on small, medium, large, and extra-large screens.

Example: Creating a 4-Column Layout for Large Screens

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-xl-3">
      <div class="bg-primary text-white p-2 text-center">Column 1</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-secondary text-white p-2 text-center">Column 2</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-success text-white p-2 text-center">Column 3</div>
    </div>
    <div class="col-xl-3">
      <div class="bg-danger text-white p-2 text-center">Column 4</div>
    </div>
  </div>
</div>

Output:

Viewport ``size >= 1200``px: [Col 1] [Col 2] [Col 3] [Col 4] (4 columns in one row)
Viewport `size1200 < 6703`px:
csharp
```
[Column 1]
[Column 2]
[Column 3]
[Column 4]
```
(columns stack vertically)

:art: Responsive Column Sizing

Creating Different Layouts for Different Screens

Want your website to look different on phones versus computers? You can combine multiple column classes! This lets you create layouts that adapt perfectly to each device.

Simply add multiple col- classes to the same element:

Example:

HTML Input:

html

<div class="container">
  <div class="row">
    <div class="col-md-6 col-xl-3">
      <div class="bg-primary text-white p-2 text-center">Column 1</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-secondary text-white p-2 text-center">Column 2</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-success text-white p-2 text-center">Column 3</div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="bg-danger text-white p-2 text-center">Column 4</div>
    </div>
  </div>
</div>

Output:

Viewport ``size >= 1200``px (Extra Large):

sql

[Column 1] [Column 2] [Column 3] [Column 4]
Following .col-xl-3 - 4 columns in one row

Viewport ``size >= 768``px ``but < 1200``px (Medium):

sql

[  Column 1  ] [  Column 2  ]
[  Column 3  ] [  Column 4  ]
Following .col-md-6 - 2 columns per row

Viewport `size768 < 7318`px (Small):

sql

[Column 1]
[Column 2]
[Column 3]
[Column 4]
Default stacking - 1 column per row

:dart: Quick Summary

Let's recap what you've learned about Bootstrap Grid:

Three Building Blocks:
- Container -> The outer wrapper (.container or .container-fluid)
- Row -> Groups columns horizontally (class="row")
- Column -> Where your content lives (class="col")
The 12-Column System:
- Each row is divided into 12 equal parts
- Use col-[number] to specify column width
- Numbers should add up to 12 for full-width layouts
Responsive Breakpoints:
- col- -> Extra small (phones)
- col-sm- -> Small (landscape phones)
- col-md- -> Medium (tablets)
- col-lg- -> Large (laptops)
- col-xl- -> Extra large (desktops)
Pro Tips:
- Always nest: Container -> Row -> Column
- Combine classes for responsive designs
- Test your layouts on different screen sizes!

:emoji: Video Tutorials

Bootstrap Grid System (Part 1) Video Tutorial

Bootstrap Grid System (Part 2) Video Tutorial

:emoji: AI Prompt

Code with AI: Use AI to generate Bootstrap grid layouts.

Prompts:

"Bootstrap code for a three-column layout that stacks on mobile."
"Bootstrap code for a two-column layout with unequal column widths."

:muscle: Practice Time!

Try these exercises to master Bootstrap Grid:

Basic Layout Challenge:
- Create a container with one row
- Add three equal-width columns
- Put different colored boxes in each column
Responsive Challenge:
- Build a layout with 4 columns on desktop
- Make it show 2 columns on tablets
- Make it stack to 1 column on phones
Mixed Sizes Challenge:
- Create a row with 3 columns
- Make the first column take 2 spaces
- Make the middle column take 8 spaces
- Make the last column take 2 spaces
Real-World Project:
- Design a simple blog layout
- Main content area (8 columns)
- Sidebar (4 columns)
- Make it responsive for mobile devices

Remember: The best way to learn Bootstrap Grid is by building lots of layouts. Start simple and gradually make them more complex!