Bootstrap
Layouts
Lecturer: Jay A. Abaleta
The Layouts
Breakpoints
Containers
Grid System
Columns
Gutters
Utilities
The Breakpoints
Breakpoints in Bootstrap are used to create responsive designs. You
may adjust them at a particular viewport or device size.
CSS media queries allow us to customize styling based on browsers
and operating sytem parameters.
Bootstrap's goal is mobile-first, responsive designs. Bootstrap creates
mobile-friendly layouts with minimal styles, adding layers for larger
devices.
Types of Breakpoints
Breakpoint Class Infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
Example:
The Containers
01 02 03
Containers are Containers are used to Containers can also be
required for default contain, pad, and nested, though most
grid system (Grid center the content layouts don't require a
system uses a series within them. nested container.
of containers, rows
and columns to align
content).
Different container classes
.container (sets responsive max-widths).
.container-{breakpoint} (width: 100% until specified
breakpoint).
.container-fluid (width: 100% at all breakpoints).
Default Containers - The .container class provides a
responsive fixed width container.
Container-fluid - The .container-fluid class provides a full-
width container which spans the entire width of the viewport.
The Grid System
Bootstrap's grid system is a
responsive layout tool that uses
containers, rows, and columns to
align content.
Use a .container class for a
responsive fixed width container.
Classes in Grid
System
•Extra small (.col-xs)
•Small (.col-sm-)
•Medium (.col-md-)
•Large (.col-lg-)
•Extra large (.col-xl-)
•Extra extra large (.col-xxl-)
Grid Row Example
Column Grid System
The Columns
The flexbox grid system allows you to modify columns with various alignment,
ordering, and offsetting options. Using column classes, you can control the
widths of non-grid items.
Columns in Bootstrap Grid System
Syntax:
Use of Columns
Columns allow you to divide the page
horizontally into different sections.
They enable you to organize content into
a grid layout, making it easier to create
responsive designs that adapt well to
various devices and screen sizes.
By combining and nesting columns, you
can create complex layouts with multiple
levels of content hierarchy.
The Alignment
Vertical alignment
Use the align-items-start class to align content vertically at starting position.
Use the align-items-center class to align content vertically at center.
Use the align-items-end class to align content vertically at the end.
Horizontal alignment
Use justify-content-start to align columns from start.
Use justify-content-center to align columns at the center.
Use justify-content-end to align columns at the end.
Vertical Example
Horizontal Example
Self Align Column Example
The Gutters
Bootstrap 5 Gutters are used to give padding between columns, responsively
space, and align content to the grid system.
Bootstrap 5 Gutters:
•Horizontal gutters: Horizontal gutter is used for horizontal padding between
columns, responsively space, and aligning content to the grid system.
•Vertical gutters: Vertical gutter is used for vertical padding between columns.
•Horizontal & vertical Gutters: In bootstrap 5, horizontal & vertical gutters are
used to give horizontal & vertical padding between columns.
•Row columns gutters: This gutter is used to create responsive space in our grid.
•No gutters: No gutters remove margin and padding from rows and columns.
Horizontal Gutters
Vertical Gutters
