Bootstrap Grid system
The grid system in Bootstrap is made up of 12 units called Columns (.col-*-* CSS classes) that are used to layout content across the viewport from left to right. To build horizontal groups of columns, columns are included within Rows (.row CSS class). For proper alignment, rows are placed within a fixed or full-width Container (.container or .container-fluid, respectively). Padding in columns produces a space (known as a "gutter") between the columns' content.
The fluid grid architecture in Bootstrap is responsive and mobile-first, scaling up to 12 columns as the device or viewport size grows. It comes with predefined classes for quickly putting together page layouts using a sequence of rows and columns to hold your information.
Media Queries Examples
With Bootstrap's Media Queries, you can move, show, and hide content based on the viewport size. To create the key breakpoints in the Bootstrap grid system, the following media queries are utilised in LESS files:
Bootstrap Grid Tiers (Breakpoints)
In addition to column units, Bootstrap has tiers, which are different breakpoints or grid sizes. To accommodate varying screen (or viewport) widths, the Bootstrap 3 grid contains four layers. xs, sm, md, and lg are the three Bootstrap tiers. Different col-breakpoint-units CSS classes identify the grid columns in Bootstrap.
Each grid tier has a range of screen widths that are optimized for common devices like desktops, laptops, tablets, and smartphones. CSS media queries are used by Bootstrap to build responsive breakpoints that set a limit for each grid size. The basis of responsive design is the ability to adjust the layout of columns to better meet different screen widths and devices__ and these grid sizes allow you to do just that.
- col-xs-* — for the smallest screen widths like smartphones < 768 px
- col-sm-* — for small screen widths like smartphones and tablets >= 768 px
- col-md-* — for medium screen widths like tablets and laptops >= 992 px
- col-lg-* — for large screen widths like desktops >= 1200 px
Bootstrap Rows & Columns
Columns are 12 units in Bootstrap's grid system that may be used to layout information horizontally across the screen. The reason for a 12-unit grid (rather than 10, 16, or other numbers) is that 12 divides equally into 6 (halves), 4 (quarters), and 3 (thirds) (thirds).
This makes it much easier to adapt to different layouts. Different col-breakpoint-units CSS classes identify the grid columns in Bootstrap.
Col-md-3, for example, denotes a column that occupies 3 of the 12 units (or 25%) of a medium (md) width viewport. Simply use the proper col-breakpoint-units class in your HTML markup to employ a column width in your layout.
Column units in Bootstrap
- • col-*-1: 1 of 12 (8.33333333% width)
- • col-*-2: 2 of 12 (16.66666667% width)
- • col-*-3: 3 of 12 (25% width)
- • col-*-4: 4 of 12 (33.3333333% width)
- • col-*-5: 5 of 12 (41.66666667% width)
- • col-*-6: 6 of 12 (50% width)
- • col-*-7: 7 of 12 (58.33333333% width)
- • col-*-8: 8 of 12 (66.66666667% width)
- • col-*-9: 9 of 12 (75% width)
- • col-*-10: 10 of 12 (83.33333333% width)
- • col-*-11: 11 of 12 (91.66666667% width)
- • col-*-12: 12 of 12 (100% width)
The Columns are contained in the Bootstrap .row class. Rows should always be placed inside Containers, and Columns should always be placed in Rows (container or container-fluid).
Negative margins (-15px) are used in the Row to provide adequate spacing between the column's content and the browser's edge. Horizontally, rows are used to group columns.
Columns will fill the .row horizontally from left to right, and every 12 column unit will wrap to a new line.
As a result, you may use .rows to construct horizontal breaks or more than 12 column units in a single .row element to create columns that wrap (or stack) vertically along with the screen.
You'll need to utilize responsive resets (or clarifies) when utilizing column wrapping (more than 12 units in a.row) to ensure even wrapping of uneven column content. When the content of the columns varies in height, this is critical.
Bootstrap requires a contained element to enclose the contents of the site and house our grid system. You have the option of using one of two containers in your projects.
For a responsive fixed width container, use the.container class.
Use .container-fluid class for a full-width container, spanning the entire width of your viewport.
Column order manipulation using push and pull
This changes the order of the built-in grid columns.
Syntax: .col-md-push-* and .col-md-pull-*.
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website