Scribd
Upload
4 views

Module 5 - Bootstrap Layouts

The document provides an overview of Bootstrap's layout system, focusing on breakpoints, containers, grid system, columns, and gutters for creating responsive designs. It details the types of breakpoints, container classes, and the use of columns for organizing content. Additionally, it explains alignment options and the role of gutters in spacing and aligning content within the grid system.

Uploaded by

Jay Abaleta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Module 5 - Bootstrap Layouts

The document provides an overview of Bootstrap's layout system, focusing on breakpoints, containers, grid system, columns, and gutters for creating responsive designs. It details the types of breakpoints, container classes, and the use of columns for organizing content. Additionally, it explains alignment options and the role of gutters in spacing and aligning content within the grid system.

Uploaded by

Jay Abaleta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like