What is bootstrap?
Bootstrap is an available and open-source CSS framework aimed at responsive, mobile-first front-end web development. It includes CSS- and javaScript-established design templates for typography, forms, buttons, navigation, and other components.
What is the bootstrap grid?
The Bootstrap Grid System is used for layout, especially Responsive Layouts. Recognition of how it operates is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more containers. The Bootstrap Grid can be used only, without the Bootstrap JavaScript and other CSS Elements. You are just required to download and reference the “bootstrap-grid.css” which includes the Grid and Flexbox classes. More info on only doing the Bootstrap Grid CSS.
Here’s the most general example of using the Grid:
< div class="container">
< div class="row">
< div class="col">I'm your content in the grid! < /div>
< /div>
< /div>
What are the different types of bootstrap grid systems?
Bootstrap grid is a great system for creating mobile-first layouts. It's a very extensive tool with a large number of benefits. Below we give you the core principles. It's an uncomplicated overview of the most generally used examples. Bootstrap’s grid system uses a set of containers, rows, and columns to design and align content. It’s built with a flexbox and is fully active.
What are the basic examples of a bootstrap grid system?
Below is an illustration and an in-depth explanation of how the grid system comes together.
< div class="container"> < div class="row"> < div class="col-md"> One of three columns < /div> < div class="col-md"> One of three columns < /div> < div class="col-md"> One of three columns < /div> < /div> < /div>
The above example produces three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.
Taking it to step by step:
Container
Bootstrap needs a containing component to wrap site contents and house our grid system. Without a container, the grid won't operate properly.
Row
Rows build parallel groups of columns. Therefore, if you need to break your layout horizontally, use row.
Columns
Bootstrap's grid system allows up to 12 columns across the page.
How does it work?
Breaking it down, here’s how the grid system comes together:
- Our grid supports six responsive breakpoints. Breakpoints are based on min-width media questions, meaning they assume that breakpoint and all those preceding it. This means you can constrain container and column sizing and behaviour by each breakpoint.
- Containers horizontally pad your content. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container for the mixture of fluid and pixel widths.
Rows are covers for columns. Each column has horizontal padding for controlling the space between them. This padding is then checked on the rows with negative margins to defend the content in your columns is visually arranged down the left side. Rows also hold transformer classes to consistently apply column sizing and gutter classes to improve the spacing of your content
Columns are amazingly flexible. There are 12 template columns free per row, allowing you to perform different sequences of components that traverse any number of columns. Column classes show the number of template columns to span. widths are set in sections so you always have the same corresponding sizing.
- Gutters are also warm and customizable. Gutter classes are open across all breakpoints, with all the same areas as our margin and padding spacing. Change regular gutters with .gx-* classes, upright gutters with .gy-*, or all gutters with .g-* classes. .g-0 is also available to switch gutters
- Sass variables, maps, and mixins power the grid. If you don’t need to use the predefined grid properties in Bootstrap, you can do our grid’s origin Sass to build your own with more semiotic markup. We also add some CSS custom properties to consume these Sass components for even larger flexibility for you.
What are the most common examples?
A few of the most popular grid layout examples to get you close with construction within the Bootstrap grid system.
Five grid tiers
There are five Bootstrap grid system, one for each range of devices we support. Each tier creates at a minimum viewport size and default to the greater systems unless overridden.
< div class="row"> < div class="col-4">.col-4< /div> < div class="col-4">.col-4< /div> < div class="col-4">.col-4< /div> < /div> < div class="row"> < div class="col-sm-4">.col-sm-4< /div> < div class="col-sm-4">.col-sm-4< /div> < div class="col-sm-4">.col-sm-4< /div> < /div> < div class="row"> < div class="col-md-4">.col-md-4< /div> < div class="col-md-4">.col-md-4< /div> < div class="col-md-4">.col-md-4< /div> < /div> < div class="row"> < div class="col-lg-4">.col-lg-4< /div> < div class="col-lg-4">.col-lg-4< /div> < div class="col-lg-4">.col-lg-4< /div> < /div> < div class="row"> < div class="col-xl-4">.col-xl-4< /div> < div class="col-xl-4">.col-xl-4< /div> < div class="col-xl-4">.col-xl-4< /div> < /div>
Three equal columns Get three equal-width columns starting at desktops and scaling to great desktops. On devices, tablets and below, the columns will default stack.
< div class="row"> < div class="col-md-4">.col-md-4< /div> < div class="col-md-4">.col-md-4< /div> < div class="col-md-4">.col-md-4< /div> < /div>
Three unequal columns
Get three columns begins at desktops and scaling to multiple widths. Don’t forget, grid columns should include up to twelve for a single block. More than that, and columns create stacking no matter the viewport.
< div class="row"> < div class="col-md-3">.col-md-3< /div> < div class="col-md-6">.col-md-6< /div> < div class="col-md-3">.col-md-3< /div> < /div>
Two columns
Get two columns creating at desktops and scaling to great desktops.
< div class="row"> < div class="col-md-8">.col-md-8< /div> < div class="col-md-4">.col-md-4< /div> < /div>
Two columns with two nested columns
nesting are simple—just put a row of columns within an existing column. This provides you two columns scaling to large desktops, with another two within the larger column.
At mobile machines sizes, tablets and down, these columns and nested columns will stack.
< div class="row"> < div class="col-sm-6 col-lg-8">.col-sm-6 .col-lg-8< /div> < div class="col-6 col-lg-4">.col-6 .col-lg-4< /div> < /div> < div class="row"> < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div> < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div> < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div> < /div>
Mixed: mobile and desktop
The Bootstrap v5 grid system has five t classes: xs, small, medium, large, and extra-large. You can use almost any mixture of these classes to build more dynamic and suitable layouts.
Each classes scales up, meaning if you plan on setting the equal widths for md, lg and xl, you only require to md.
< div class="row"> < div class="col-md-8">.col-md-8< /div> < div class="col-6 col-md-4">.col-6 .col-md-4< /div> < /div> < div class="row"> < div class="col-6 col-md-4">.col-6 .col-md-4< /div> < div class="col-6 col-md-4">.col-6 .col-md-4< /div> < div class="col-6 col-md-4">.col-6 .col-md-4< /div> < /div> < div class="row"> < div class="col-6">.col-6< /div> < div class="col-6">.col-6< /div> < /div>
Containers
Additional included classes in Bootstrap make containers that are wide until a particular breakpoint.
< div class="container">.container< /div> < div class="container-sm">.container-sm< /div> < div class="container-md">.container-md< /div> < div class="container-lg">.container-lg< /div> < div class="container-xl">.container-xl< /div> < div class="container-xxl">.container-xxl< /div> < div class="container-fluid">.container-fluid< /div>
If you have any doubt about this Bootstrap tutorial. If you want any software consultations and services, Don’t hesitate to contact us through the given email. Airo global software will always be your digital partner.
E-mail id: [email protected]
Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile:www.linkedin.com/in/johnsontaugustine/