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.
