Scribd
Upload
0 views1 page

Lesson 2

The Bootstrap Grid system is essential for creating structured and responsive layouts, utilizing containers, rows, and columns. It includes six breakpoints for different screen sizes, allowing for dynamic column adjustments. Advanced features such as offset classes, column ordering, and nested grids enhance layout flexibility.

Uploaded by

mangolovebanana804
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views1 page

Lesson 2

The Bootstrap Grid system is essential for creating structured and responsive layouts, utilizing containers, rows, and columns. It includes six breakpoints for different screen sizes, allowing for dynamic column adjustments. Advanced features such as offset classes, column ordering, and nested grids enhance layout flexibility.

Uploaded by

mangolovebanana804
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

Lesson 2: Bootstrap Grid

 Overview:
The grid system is the foundation of Bootstrap, enabling the creation of structured,
responsive layouts.

 Key Components:

o Containers:

 .container: Fixed-width layout centered on the page.

 .container-fluid: Full-width layout spanning the viewport.

o Rows: Group columns and ensure proper alignment.

o Columns: Define the width and placement of content. Columns are


adjustable based on breakpoints.

 Breakpoints and Responsive Design:


Bootstrap divides screen sizes into six categories:

o Extra small (<576px)

o Small (≥576px)

o Medium (≥768px)

o Large (≥992px)

o Extra large (≥1200px)

o Extra extra large (≥1400px)

These breakpoints allow columns to adjust their layout dynamically depending on the screen
size.

 Advanced Features:

o Offset Classes: Add margins to shift columns.

o Column Ordering: Rearrange columns at different breakpoints.

o Nested Grids: Create grids inside other columns for complex layouts.

You might also like