Bootstrap Grid System, Containers And Bootstrap Layout

This tutorial includes Bootstrap Containers, Bootstrap Grid System, Bootstrap Layout utilities, and Flex with examples:

Please note that we have used Bootstrap version 4 for all examples.

=> Check Here To See A-Z Of Bootstrap Training Tutorials

Bootstrap Containers

A container is the most basic layout component in Bootstrap 4. It is needed when you are using the default grid system. Usually, containers contain all other elements on the page.

There are three types of containers in Bootstrap 4.

Fixed container (.container class)
Fluid container (.container-fluid class)
Responsive container (.container-{breakpoint} class)

There are four main container breakpoint classes. They are,

.container-sm class
.container-md class
.container-lg class
.container-xl class

Bootstrap Fixed Container

The .container class represents a fixed container. It is the default Bootstrap container and also a responsive, fixed-width container. It sets a max-width at every responsive breakpoint.

Example:

<div class="container">
…
</div>

The below table shows how the .container class responds to different screen sizes.

Container class	Type of device	Width
	Extra small devices - screen width less than 576px (<576px)	100%
	Small devices - screen width equal to or greater than 576px (?576px)	540px
.container	Medium devices - screen width equal to or greater than 768px (?768px)	720px
	Large devices - screen width equal to or greater than 992px (?992px)	960px
	Extra large devices - screen width equal to or greater than 1200px (?1200px)	1140px

Bootstrap Fluid Container

The .container-fluid class represents a fluid container. It is width: 100% at all breakpoints. In other words, it is a full-width container, spanning the entire width of the device screen.

Example:

<div class="container-fluid">
...
</div>

The following table shows how the .container-fluid class responds to different screen sizes.

Container class	Type of device	Width
.container-fluid	Extra small devices - screen width less than 576px (<576px)	100%
	Small devices - screen width equal to or greater than 576px (?576px)	100%
	Medium devices - screen width equal to or greater than 768px (?768px)	100%
	Large devices - screen width equal to or greater than 992px (?992px)	100%
	Extra large devices - screen width equal to or greater than 1200px (?1200px)	100%

Example:

Let’s see an example to see the differences between .container and .container-fluid classes.

<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<title></title>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p> 
</div>

<div class="container-fluid">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div> 
</body>
</html>

Output:

Bootstrap Responsive Container

Responsive containers were newly introduced in Bootstrap version 4.4. The .container-{breakpoint} class (.container-sm|md|lg|xl class) represents a responsive container. It is width: 100% until the specified breakpoint.

Example:

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra-large breakpoint</div>

The following table shows how the .container-sm|md|lg|xl classes respond to different screen sizes.

Container class		Extra mall device <576px	Small device ?576px	Medium device ?768px	Large device ?992px	Extra-large device ?1200px
	.container-sm	100%	540px	720px	960px	1140px
.container-{breakpoint}	.container-md	100%	100%	720px	960px	1140px
	.container-lg	100%	100%	100%	960px	1140px
	.container-xl	100%	100%	100%	100%	1140px

Summary Of Containers

The below table shows a summary of how different types of container classes respond to different screen sizes.

Container class		Extra small device <576px	Small device ?576px	Medium device ?768px	Large device ?992px	Extra-large device ?1200px
.container		100%	540px	720px	960px	1140px
.container-{breakpoint}	.container-sm	100%	540px	720px	960px	1140px
	.container-md	100%	100%	720px	960px	1140px
	.container-lg	100%	100%	100%	960px	1140px
	.container-xl	100%	100%	100%	100%	1140px
.container-fluid		100%	100%	100%	100%	100%

Bootstrap Grid System

The Bootstrap 4 grid system is responsive. It will automatically adjust the columns for different screen sizes. The grid system consists of 12 columns. However, you don’t need to use all 12 columns.

Further, you can combine the Bootstrap columns to create wider columns that have the sum of 12 or lesser. Some examples are shown below.

Grid Classes

The Bootstrap 4 grid system consists of five classes.

.col class
.col-sm class
.col-md class
.col-lg class
.col-xl class

Grid class	Type of device	Width
.col	Extra small devices	Screen width less than 576px (<576px)
.col-sm	Small devices	Screen width equal to or greater than 576px (?576px)
.col-md	Medium devices	Screen width equal to or greater than 768px (?768px)
.col-lg	Large devices	Screen width equal to or greater than 992px (?992px)
.col-xl	Extra-large devices	Screen width equal to or greater than 1200px (?1200px)

Basic Structure Of The Grid System

The below code snippet shows the basic structure of the Bootstrap 4 grid system.

Note:

* is for sm, md, lg or xl, which represent small, medium, large or extra-large screen sizes.

# For Bootstrap row size (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 or 12).

<!-- Adjust the grid layout by specifying the column width and (/or) device screen size -->
<div class="row">
<div class="col-*-#"></div>
<div class="col-*-#"></div>
...
</div>
<div class="row">
<div class="col-*-#"></div>
<div class="col-*-#"></div>
...
</div>

<!-- Bootstrap automatically adjust the grid layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
...
</div>

Note: Use the following code skeleton to run the rest of the below example codes.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<!-- add code here -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Equal Columns

Example: Creating three equal columns.

<div class="row">
<div class="col bg-danger">Item 1</div>
<div class="col bg-warning">Item 2</div>
<div class="col bg-success">Item 3</div>
</div>

Output:

Responsive Columns

Code:

<div class="row">
<div class="col-md-3 bg-danger">Item 1</div>
<div class="col-md-3 bg-warning">Item 2</div>
<div class="col-md-3 bg-success">Item 3</div>
</div>

Output:

Bootstrap Layout Utilities

Borders

The following table shows a summary of border classes.

	Class	Description
Borders - subtractive	.border-0	No border
	.border-top-0	Remove top border
	.border-right-0	Remove right border
	.border-bottom-0	Remove bottom border
	.border-left-0	Remove left border
Border color	.border-primary	Add primary color to the border
	.border-secondary	Add secondary color to the border
	.border-success	Add success color to the border
	.border-danger	Add danger color to the border
	.border-warning	Add warning color to the border
	.border-info	Add info color to the border
	.border-light	Add light color to the border
	.border-dark	Add dark color to the border
	.border-white	Add white color to the border
Border radius	.rounded	Add round border
	.rounded-top	Add a round top border
	.rounded-right	Add a round right border
	.rounded-bottom	Add a round bottom border
	.rounded-left	Add a round left border
	.rounded-circle	Add round in a circle
	.rounded-0	No round
	.rounded-sm	Add a small round border
	.rounded-lg	Add a large round border

Example:

<!-- Add this <style> tag inside the <head> tag -->

<style>
.border {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
}
</style>

<h3 class="mt-3">Border Subtractive</h3>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

<h3 class="mt-3">Border Color</h3>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

<h3 class="mt-3">Border Radius</h3>
<span class="border rounded-sm"></span>
<span class="border rounded"></span>
<span class="border rounded-lg"></span>
<span class="border rounded-top"></span>
<span class="border rounded-right"></span>
<span class="border rounded-bottom"></span>
<span class="border rounded-left"></span>
<span class="border rounded-circle"></span>
<span class="border rounded-0"></span>

Output:

Spacing – Padding And Margin

The following list shows the default padding of the .container class.

Top padding – 0px
Bottom padding – 0px
Left padding – 15px
Right padding – 15px

The below table shows a summary of Bootstrap spacing (padding and margin) classes.

	Class	Description
property classes	p	sets the padding
property classes	m	sets the margin
sides classes	t	sets the top padding/margin
	b	sets the bottom padding/margin
	l	sets the left padding/margin
	r	sets the right padding/margin
	x	sets both the left padding/margin and right padding/margin
	y	sets both the top padding/margin and bottom padding/margin
	blank	sets padding or margin on all sides (left padding/margin, right padding/margin, top padding/margin and bottom padding/margin)
size classes	0	sets padding / margin to 0
	1	sets padding / margin to .25rem
	2	sets padding / margin to .5rem
	3	sets padding /margin to 1rem
	4	sets padding /margin to 1.5rem
	5	sets padding /margin to 3rem
	auto	sets margin to auto
	n1	sets margin to -.25rem
	n2	sets margin to -.5rem
	n3	sets margin to -1rem
	n4	sets margin to -1.5rem
	n5	sets margin to -3rem

Example:

<h3 class="text-primary">No padding or no margin</h3>
<div class="bg-primary">Item</div>
<h3 class="text-warning">Have a top margin only</h3>
<div class="mt-5 bg-warning">Item</div>
<h3 class="text-danger">Have a margin on all sides</h3>
<div class="m-5 bg-danger">Item</div>
<h3 class="text-info">Have a top padding only</h3>
<div class="pt-5 bg-info">Item</div>
<h3 class="text-success">Have a padding on all sides</h3>
<div class="p-5 bg-success">Item</div>

Output:

Floats And Responsive Floats

The below table shows a summary of Bootstrap float and responsive float classes.

	Class	Description
Floats	float-left	Float an item to the left
Floats	float-right	Float an item to the right
Responsive floats	float-sm-right	Float an item to the right on small screens or wider
	float-md-right	Float an item to the right on medium screens or wider
	float-lg-right	Float an item to the right on large screens or wider
	float-xl-right	Float an item to the right on extra-large screens or wider
	float-none	No float

Example:

<div class="float-left bg-danger">Float left on all viewport sizes</div><br>
<div class="float-right bg-warning">Float right on all viewport sizes</div><br>
<div class="float-none bg-success">Don't float on all viewport sizes</div>

Output:

Center Align

The following table shows a summary of the Bootstrap center align class.

Class	Description
.mx-auto	Center an item (adds margin-left and margin-right: auto)

Example:

<div class="mx-auto bg-info" style="width:100px">Centered</div>

Output:

Sizing

The following table shows a summary of Bootstrap sizing classes.

	Class	Description
Width	.w-25	Width 25%
	.w-50	Width 50%
	.w-75	Width 75%
	.w-100	Width 100%
Height	.h-25	Height 25%
	.h-50	Height 50%
	.h-75	Height 75%
	.h-100	Height 100%
Max-width	.mw-100	Max-width 100%
Max-height	.mh-100	Max- height 100%

Example:

<h3>Width</h3>
<div class="w-25 bg-primary">Width 25%</div>
<div class="w-50 bg-danger">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-success">Width 100%</div>
<div class="w-auto bg-info">Width auto</div>

<h3 class="mt-5">Height</h3>
<div style="height: 100px;" class="bg-secondary">
<div class="h-25 bg-primary d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 bg-danger d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 bg-warning d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 bg-success d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto bg-info d-inline-block" style="width: 120px;">Height auto</div>
</div>

Output:

Shadows

The following table shows a summary of Bootstrap shadow element classes.

Class	Description
shadow-none	No shadow
shadow	Default shadow
shadow-sm	Small shadow
shadow-lg	Large shadow

Example:

<div class="shadow-none p-5 mb-5 bg-light">No shadow</div>
<div class="shadow-sm p-5 mb-5 bg-white">Small shadow</div>
<div class="shadow p-5 mb-5 bg-white">Default shadow</div>
<div class="shadow-lg p-5 mb-5 bg-white">Large shadow</div>

Output:

Block Elements

The following table shows a summary of Bootstrap block element classes.

	Class	Description
d-block	d-block	Controls at which point the element should be a block element on a specific screen size
d-*-block	d-sm-block
	d-md-block
	d-lg-block
	d-xl-block

Example:

<span class="d-block bg-primary">d-block</span>
<span class="d-sm-block bg-danger">d-sm-block</span>
<span class="d-md-block bg-warning">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-info">d-xl-block</span>

Output (Fullscreen):

Output (Half screen):

Other Display Classes Of Bootstrap Layout

The below table shows a summary of other display classes.

Class	Description
.d-none	Hides an element
.d-*-none	Hides an element
.d-inline	Makes an inline element
.d-*-inline	Makes an inline element
.d-inline-block	Makes an inline-block element
.d-*-inline-block	Makes an inline-block element

Bootstrap Flex

Flexbox Container And Inline Flexbox Container

	Class	Description
Flexbox container and inline flexbox container	.d-flex	Makes a flexbox container
	.d-*-flex	Makes a flexbox container
	.d-inline-flex	Makes an inline flexbox container
	.d-*-inline-flex	Makes an inline flexbox container

Example:

<div class="d-flex p-3 mb-3 bg-info text-white">Flexbox container</div>
<div class="d-inline-flex p-3 bg-info text-white">Inline flexbox container</div>

Output:

Horizontal And Vertical Directions

	Class	Description
Horizontal and vertical direction	.flex-*-row	Horizontally display flex items
	.flex-*-row-reverse	Horizontally display flex items on right align
	.flex-*-column	Vertically display flex items
	.flex-*-column-reverse	Vertically display flex items on reversed order

Example:

<h3>Horizontal Direction - .flex-row</h3>
<div class="d-flex flex-row bg-info mb-5">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>
<h3>Horizontal Direction - .flex-row-reverse</h3>
<div class="d-flex flex-row-reverse bg-info mb-5">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div> 
<h3>Vertical Direction - .flex-column</h3>
<div class="d-flex flex-column mb-5">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>
<h3>Vertical Direction - .flex-column-reverse</h3>
<div class="d-flex flex-column-reverse mb-5">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

Output:

Justified Content

	Class	Description
Justified content	.justify-content-*-start	Display flex items on left align/start
	.justify-content-*-end	Display flex items on right align/end
	.justify-content-*-center	Display flex items in the center
	.justify-content-*-between	Display flex items in "between"
	.justify-content-*-around	Display flex items "around"

Example:

<div class="d-flex justify-content-start bg-info mb-3">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>
<div class="d-flex justify-content-end bg-info mb-3">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div> 
<div class="d-flex justify-content-center bg-info mb-3">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>
<div class="d-flex justify-content-between bg-info mb-3">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>
<div class="d-flex justify-content-around bg-info mb-3">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

Output:

Fill

	Class	Description
Fill / equal width	.flex-*-fill	Force flex items into widths equal to their content

Example:

<div class="d-flex">
<div class="p-2 flex-fill bg-danger">Flex item A with a lot of content</div>
<div class="p-2 flex-fill bg-warning">Flex item B</div>
<div class="p-2 flex-fill bg-success">Flex item C</div>
</div>

Output:

Grow

	Class	Description
Grow	.flex-*-grow-0	Does not allow items to grow
Grow	.flex-*-grow-1	Make items to grow

Example:

<div class="d-flex">
<div class="p-2 flex-grow-1 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

Output:

Shrink

	Class	Description
Shrink	.flex-*-shrink-0	Does not allow items to shrink
Shrink	.flex-*-shrink-1	Make items to shrink

Example:

<div class="d-flex">
<div class="p-2 w-100 bg-danger">Flex item A</div>
<div class="p-2 flex-shrink-1 bg-warning">Flex item B</div>
</div>

Output:

Bootstrap Order

	Class	Description
Order	.order-*-0-12	Change the order (0 to 12 ) on small screen sizes

Example:

<div class="d-flex bg-info">
<div class="p-2 bg-danger order-A">Flex item A</div>
<div class="p-2 bg-warning order-B">Flex item B</div>
<div class="p-2 bg-success order-C">Flex item C</div>
</div>

Output:

Wrap

	Class	Description
Wrap	.flex-*-nowrap	Does not wrap items
	.flex-*-wrap	Wrap items
	.flex-*-wrap-reverse	Reverse the item wrapping

Example:

<h3>Wrap - .flex-nowrap</h3>
<div class="d-flex flex-nowrap border mb-5">
<div class="p-2 bg-info border">Flex item A</div>
<div class="p-2 bg-info border">Flex item B</div>
<div class="p-2 bg-info border">Flex item C</div>
<div class="p-2 bg-info border">Flex item D</div>
<div class="p-2 bg-info border">Flex item E</div>
<div class="p-2 bg-info border">Flex item F</div>
<div class="p-2 bg-info border">Flex item G</div>
<div class="p-2 bg-info border">Flex item H</div>
<div class="p-2 bg-info border">Flex item I</div>
</div>
<h3>Wrap - .flex-wrap</h3>
<div class="d-flex flex-wrap mb-5">
<div class="p-2 bg-info border">Flex item A</div>
<div class="p-2 bg-info border">Flex item B</div>
<div class="p-2 bg-info border">Flex item C</div>
<div class="p-2 bg-info border">Flex item D</div>
<div class="p-2 bg-info border">Flex item E</div>
<div class="p-2 bg-info border">Flex item F</div>
<div class="p-2 bg-info border">Flex item G</div>
<div class="p-2 bg-info border">Flex item H</div>
<div class="p-2 bg-info border">Flex item I</div>
</div> 
<h3>Wrap - .flex-wrap-reverse</h3>
<div class="d-flex flex-wrap-reverse mb-5">
<div class="p-2 bg-info border">Flex item A</div>
<div class="p-2 bg-info border">Flex item B</div>
<div class="p-2 bg-info border">Flex item C</div>
<div class="p-2 bg-info border">Flex item D</div>
<div class="p-2 bg-info border">Flex item E</div>
<div class="p-2 bg-info border">Flex item F</div>
<div class="p-2 bg-info border">Flex item G</div>
<div class="p-2 bg-info border">Flex item H</div>
<div class="p-2 bg-info border">Flex item I</div>
</div>

Output (with reduced browser size):

Align Content

	Class	Description
Align content	.align-content-*-start	Align items from the start
	.align-content-*-end	Align items at the end
	.align-content-*-center	Align items in the center
	.align-content-*-around	Align items "around"
	.align-content-*-stretch	Stretch items

Example:

<div class="d-flex flex-wrap border align-content-start" style="height: 200px">
<div class="p-2 bg-info border">Flex item A</div>
<div class="p-2 bg-info border">Flex item B</div>
<div class="p-2 bg-info border">Flex item C</div>
<div class="p-2 bg-info border">Flex item D</div>
<div class="p-2 bg-info border">Flex item E</div>
<div class="p-2 bg-info border">Flex item F</div>
<div class="p-2 bg-info border">Flex item G</div>
<div class="p-2 bg-info border">Flex item H</div>
<div class="p-2 bg-info border">Flex item I</div>
</div>

Output (with reduced browser size):

Align Items

	Class	Description
Align items	.align-items-*-start	Align a rows of items from the start
	.align-items-*-end	Align a row of items at the end
	.align-items-*-center	Align a row of items in the center
	.align-items-*-baseline	Align a row of items on the baseline
	.align-items-*-stretch	Stretch a row of items

Example:

<div class="d-flex align-items-start flex-column bg-info mb-3" style="height: 150px;">
<div class="mb-auto p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

<div class="d-flex align-items-end flex-column bg-info mb-3" style="height: 150px;">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="mt-auto p-2 bg-success">Flex item C</div>
</div>

Output:

Align Self

	Class	Description
Align self	.align-self-*-start	Align a flex item from the start
	.align-self-*-end	Align a flex item at the end
	.align-self-*-center	Align a flex item in the center
	.align-self-*-baseline	Align a flex item on the baseline
	.align-self-*-stretch	Stretch a flex item

Example:

<div class="d-flex bg-info" style="height:150px">
<div class="p-2 bg-danger border">Flex item A</div>
<div class="p-2 bg-warning border align-self-start">Flex item B</div>
<div class="p-2 bg-success border">Flex item C</div>
</div>

Output:

Auto Margins

	Class	Description
Auto margins	.mr-auto	Push items to the right
Auto margins	.ml-auto	Push items to the left

Example:

<div class="d-flex mb-3 bg-info">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

<div class="d-flex mb-3 bg-info">
<div class="mr-auto p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="p-2 bg-success">Flex item C</div>
</div>

<div class="d-flex mb-3 bg-info">
<div class="p-2 bg-danger">Flex item A</div>
<div class="p-2 bg-warning">Flex item B</div>
<div class="ml-auto p-2 bg-success">Flex item C</div>
</div>

Output:

Note: Other Bootstrap layout utilities will be discussed in our upcoming tutorials under specific topics.

Frequently Asked Questions

In this section, we will look at some of the frequently asked questions of the Bootstrap layout.

Q #1) What is the most basic layout component of Bootstrap 4?

Answer: Container

Q #2) Briefly describe the types of containers in Bootstrap 4.

Answer: Types of containers are listed below.

They are,

.container class – This class sets a max-width at each responsive breakpoint.
.container-fluid class – This class is width: 100% at all breakpoints.
.container-{breakpoint} class – This class is width: 100% until the specified breakpoint.
.container-sm class
.container-md class
.container-lg class
.container-xl class

Q #3) What are the five classes in the Bootstrap 4 grid system?

Answer:

.col class
.col-sm class
.col-md class
.col-lg class
.col-xl class

Q #4) Does the grid system of Bootstrap 4 support responsive columns?

Answer: Yes

Conclusion

There are three types of Bootstrap containers called .container, .container-fluid and .container-{breakpoint}. The .container-{breakpoint}s are .container-sm, .container-md, .container-lg and .container-xl.

The Bootstrap grid system consists of five classes called .col, .col-sm, .col-md, .col-lg and .col-xl.

The grid system is responsive and it automatically adjusts the columns for different screen sizes. It consists of 12 columns (maximum). You can combine the columns to create wider columns that have the sum of 12 or lesser. It has various utilities to add styles to the layout.

In our upcoming tutorial, we will discuss the typography of Bootstrap.

=> Check Out The Perfect Bootstrap Training Guide Here

Was this helpful?

Thanks for your feedback!

Bootstrap Containers

freestar.config.enabled_slots.push({ placementName: "softwaretestinghelp_medrec_incontent_2", slotId: "softwaretestinghelp_medrec_incontent_2" });

Bootstrap Fixed Container

Bootstrap Fluid Container

Bootstrap Responsive Container

Summary Of Containers

Bootstrap Grid System

Grid Classes

Basic Structure Of The Grid System

Bootstrap Equal Columns

Responsive Columns

Bootstrap Layout Utilities

Borders

Spacing – Padding And Margin

Floats And Responsive Floats

Center Align

Sizing

Shadows

Block Elements

Other Display Classes Of Bootstrap Layout

Bootstrap Flex

Flexbox Container And Inline Flexbox Container

Horizontal And Vertical Directions

Justified Content

Fill

Grow

Shrink

Bootstrap Order

Wrap

Align Content

Align Items

Align Self

Auto Margins

Frequently Asked Questions

Conclusion

Was this helpful?

Recommended Reading

Leave a Comment Cancel reply