Centering Container
Automatically centers the container box by adjusting the left and right margin values equally on each side.
Tiny Container
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.S Container
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.M Container
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.L Container
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.L+ Container (width: 91.666667%)
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.Max-width(Default), Max-width(XL), Max-width(XXL) Container
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.100% Width
Using.container-fluid for width: 100% across all viewport and device sizes.
Column
It can be used for fluid layout for multiple projects and Bootstrap grid system. Its biggest feature is its support for loop lists.
One Fifth
Still keep 5 columns when small screen.One Fifth
Still keep 5 columns when small screen.One Fifth
Still keep 5 columns when small screen.One Fifth
Still keep 5 columns when small screen.One Fifth
Still keep 5 columns when small screen.One Fourth (1)
Keep 1 columns when small screen< 768px.
One Fourth (2)
Keep 1 columns when small screen< 768px.
One Fourth (3)
Keep 1 columns when small screen< 768px.
One Fourth (4)
Keep 1 columns when small screen< 768px.
One Fifth
Keep 1 columns when small screen< 768px.
Four Fifth
Keep 1 columns when small screen< 768px.
One Fourth (1)
Keep 2 columns when small screen< 992px.
One Fourth (2)
Keep 2 columns when small screen< 992px.
One Fourth (3)
Keep 2 columns when small screen< 992px.
One Fourth (4)
Keep 2 columns when small screen< 992px.
One Third
Keep 1 columns when small screen< 768px.
One Third
Keep 1 columns when small screen< 768px.
One Third
Keep 1 columns when small screen< 768px.
One Half
Always keep 2 columnsJust use the class prefix
.col-
One Half
Always keep 2 columnsJust use the class prefix
.col-
One Half
Keep 1 columns when small screen< 992px.
One Half
Keep 1 columns when small screen< 992px.
One Half
Keep 1 columns when small screen< 768px.
One Half
Keep 1 columns when small screen< 768px.
One Third
Keep 1 columns when small screen< 992px.
Two Third
Keep 1 columns when small screen< 992px.
Two Third
Keep 1 columns when small screen< 992px.
One Third
Keep 1 columns when small screen< 992px.
One Fourth
Keep 1 columns when small screen< 992px.
Three Fourth
Keep 1 columns when small screen< 992px.
Three Fourth
Keep 1 columns when small screen< 992px.
One Fourth
Keep 1 columns when small screen< 992px.
One Third (1)
Keep 1 columns when small screen< 992px.
One Third (1)
Keep 2 columns when small screen< 992px.
Keep 1 columns when small screen
< 576px.
One Third (1)
Keep 2 columns when small screen< 992px.
Keep 1 columns when small screen
< 576px.
Column (No line breaks)
Please simulate mobile viewing after zooming out your viewport.
One Fourth (1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.One Fourth (2)
Aliquam congue dignissim tellus, vel eleifend urna rutrum nec.One Fourth (3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.One Fourth (4)
Morbi et mauris vitae quam venenatis imperdiet.One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit.One Third
Aliquam congue dignissim tellus, vel eleifend urna rutrum nec.One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Column (No gutters)
The class .g-0 used here will be applied .row
One Fifth
Keep 1 columns when small screen< 768px.
Four Fifth
Keep 1 columns when small screen< 768px.
Center Column
The class .align-items-center or .justify-content-center used here will be applied .row