Bootstrap 5 Layout Complete Reference

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 container	Containers are the most fundamental layout component in Bootstrap, which is necessary if you want to use the pre-installed grid system.
Responsive containers	Bootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout.
Fluid containers	Fluid 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 columns	It comes with a flexbox and allows up to 12 columns across the page. you can also group the columns together.
Equal-width	The 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 width	Setting one column width is used to set the width of a specific column, it can be applied to any column.
Variable width content	Grid 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 classes	Grid 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 breakpoints	Bootstrap 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 horizontal	Grid System is a way to create layouts that are responsive and highly customizable.
Mix and match	It is generally utilized where the number of columns in each row is mixed and matched to achieve a certain type of layout.
Row columns	Bootstrap Grid has row column classes to quickly create basic grid layouts for the webpage.
Nesting	Bootstrap 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
Alignment	We can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS.
Vertical alignment	Vertical alignment is used to change the alignment of the column’s content in the vertical direction.
Horizontal alignment	Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.
Column wrapping	Columns are an integral part of the grid system. The columns are placed inside the row that is wrapped by a container
Column breaks	Columns are smaller cells or sections inside a row in a Grid System
Reordering	Columns Reordering holds the feature of manipulation of column order visually and offsets grid columns.
Order classes	Order Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object
Offsetting columns	Offsetting columns can offset grid columns in two ways, offset classes and margin utilities.
Offset classes	This class is used to set the offset of the grid. Size is the among small (sm), medium (md), and large (lg).
Margin utilities	Margin utilities are used to put some margin between the sibling elements such that it pushes the sibling elements away from their position.
Standalone column classes	Standalone 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 gutters	Horizontal gutters are used for padding between columns, responsively space, and aligning content to the grid system
Vertical gutters	A vertical gutter is used for padding between columns, responsively space, and aligning content to the grid system.
Horizontal & vertical gutters	Horizontal & vertical Gutters in Bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system.
Row columns gutters	Row column gutters are used to create responsive space in our grid in the Bootstrap 5 framework.
No gutters	No gutters will remove margin and padding from .row and columns.
Change the gutters	It 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 display	The utility layout is used for showing, hiding, aligning, and spacing content.
Flexbox options	These 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 padding	The margin and padding utilities are used to add space around elements.
Toggle visibility	The 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.