Open In App

Bootstrap 5 Layout Complete Reference

Last Updated : 25 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
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 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.



Previous Article
Next Article

Similar Reads

ReactJS UI Ant Design Layout Component Complete Reference
Ant Design is a popular ReactJS UI library that is used to build the design system for enterprise-level products. The Ant Design contains a rich set of high-quality components for building efficient & interactive user interfaces with an enjoyable work experience. Ant design facilitates a huge number of UI components to enrich your web applicati
1 min read
EasyUI jQuery Layout Widget Complete Reference
The EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interface by writing some HTML markups & need not wri
1 min read
Tailwind CSS Layout Complete Reference
Tailwind CSS is basically a utility first CSS framework for rapid custom UI. it is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. we can make the layout of a very qu
3 min read
Pure CSS Layout Complete Reference
Pure CSS is a popular framework & an open-source tool, developed by Yahoo, for creating responsive websites & web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap. The Layout in Pure CSS accomplishes the task of making
1 min read
Tachyons Layout Complete Reference
Tachyons is a free and open-source Toolkit, that is used to create a responsive website. Every website is divided into various parts like header, menus, content, and a footer. Tachyons Layout is used to define those sub-parts of a website. Tachyons Layout Tachyons Debugging Tachyons Debug with a Grid Tachyons Layout Basic Grid Tachyons Layout Flexb
1 min read
Bulma Layout Complete Reference
Bulma Layout can be used to design the structure of the website. It contains the different classes that can be useful to organize the data on the website. Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for respon
5 min read
Bootstrap 4 Complete Reference
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the foremost popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one among which is that the cross-browser compatibility issue. Nowadays, the websites a
2 min read
Bootstrap 5 Content Complete Reference
Bootstrap 5 Content facilitates the different components, such as typography, responsive images, tables, etc., that help to organize the content in the hierarchical order, along with styling them in an elegant, consistent, and simple baseline, in order to enhance the overall user-experience to the website. The complete list of Content is listed bel
7 min read
Bootstrap 5 Layout Form Grid
Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form layout..col: This class is used to create columns
2 min read
Bootstrap 4 | Holy Grail Layout
The Holy Grail Layout is a classic CSS problem in web development. Although there are a lot of creative solutions developed in HTML and CSS, the problem faced was that it involved sacrifices where enriching one feature is often compromised at the expense of the others. Modern frameworks such as Bootstrap 4 provides utilities for implementing this l
3 min read