Open In App
Related Articles

Bootstrap 5 Layout Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bootstrap 5 Layout facilitates the different components for the Layout to build a better user interface, along with enhancing the overall interactivity of the website. It helps to customize the in-built functions to make a responsive layout & scalable that fits across different device or viewport sizes.

The complete list of Layout is listed below with their brief description:

Breakpoints

Breakpoint allows developers to create flexible and adaptable layouts that can be customized according to the device & screen width.

Components

Descriptions

Available breakpoints

Bootstrap 5 provides a predefined set of different available breakpoints to build responsive utilities.

Media queries

We use a handful of media queries for delivering different style sheets to different devices, to create sensible breakpoints for our layouts and interfaces.

Min-width

For Min-Width breakpoints, CSS would only be applied for devices larger than min-width.

Max-width

For Max-width, CSS is executed for the size smaller than mentioned in the media query.

Single breakpoint

We use media queries to create sensible breakpoints for our interfaces and layouts.

Between breakpoints

We use media queries to create sensible breakpoints for our interfaces and layouts.

Containers

Containers are basically used to add pad the contents inside or center the items inside the container.

Components

Descriptions

Default containerContainers are the most fundamental layout component in Bootstrap, which is necessary if you want to use the pre-installed grid system.
Responsive containersBootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout.
Fluid containersFluid Containers are used to make containers that span the entire width of the screen i.e. they span the entire width of the viewport.
Sass Containers Sass has a set of predefined container classes which makes building layouts easier.

Grid

The Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns.

Components

Descriptions

Auto-layout columnsIt comes with a flexbox and allows up to 12 columns across the page. you can also group the columns together.
Equal-widthThe equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid’s width.
Setting one column widthSetting one column width is used to set the width of a specific column, it can be applied to any column.
Variable width contentGrid system Variable width content means in a grid system we can add a setting where the column will adjust to the content inside it and occupy that space only.
Responsive classesGrid system Responsive classes help to create a responsive layout using predefined six tiers classes of Bootstrap 5 by customizing the size of columns with extra-small (xs), small (sm), medium (md), large (lg), or extra large (xl).
All breakpointsBootstrap 5 Grid System has been responsive on its own and also we can add the custom sm/md/lg/xl breakpoints and the respective column sizes to them.
Stacked to horizontalGrid System is a way to create layouts that are responsive and highly customizable.
Mix and matchIt is generally utilized where the number of columns in each row is mixed and matched to achieve a certain type of layout.
Row columnsBootstrap Grid has row column classes to quickly create basic grid layouts for the webpage.
NestingBootstrap 5 Grid system Nesting is adding rows and columns of the grid in one cell of an already existing grid

Columns

Columns facilitate the different options for the alignment, ordering, and offsetting of the Columns with the help of a flexbox grid system. 

Components

Descriptions

AlignmentWe can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS.
Vertical alignmentVertical alignment is used to change the alignment of the column’s content in the vertical direction.
Horizontal alignmentHorizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.
Column wrappingColumns are an integral part of the grid system. The columns are placed inside the row that is wrapped by a container
Column breaksColumns are smaller cells or sections inside a row in a Grid System
ReorderingColumns Reordering holds the feature of manipulation of column order visually and offsets grid columns.
Order classesOrder Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object
Offsetting columnsOffsetting columns can offset grid columns in two ways, offset classes and margin utilities.
Offset classesThis class is used to set the offset of the grid. Size is the among small (sm), medium (md), and large (lg).
Margin utilitiesMargin utilities are used to put some margin between the sibling elements such that it pushes the sibling elements away from their position.
Standalone column classesStandalone column classes are used to give an element a specific width, where the .col-* classes can also be used outside a .row, which can be used to create the standalone column.

Gutters

Gutters are used to give padding between columns,  responsively space, and align content to the grid system.

Components

Descriptions

Horizontal guttersHorizontal gutters are used for padding between columns, responsively space, and aligning content to the grid system
Vertical guttersA vertical gutter is used for padding between columns, responsively space, and aligning content to the grid system.
Horizontal & vertical guttersHorizontal & vertical Gutters in Bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system.
Row columns guttersRow column gutters are used to create responsive space in our grid in the Bootstrap 5 framework.
No guttersNo gutters will remove margin and padding from .row and columns.
Change the guttersIt helps to change the gutters using $spacer to make the $gutters SASS map.

Utilities

 The Utility Layout is used for showing, hiding, aligning, and spacing content.

Components

Descriptions

Changing displayThe utility layout is used for showing, hiding, aligning, and spacing content.
Flexbox optionsThese classes include options for setting the width and height of elements, controlling the placement of elements using margins and padding, and arranging elements using a flexbox.
Margin and paddingThe margin and padding utilities are used to add space around elements.
Toggle visibilityThe visibility of an element can be changed without using any display properties but by using the Utilities Toggle visibility classes

Z-index

 The z-Index is a CSS property that is used to control the stacking order of elements on a web page.



Last Updated : 25 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads