Layout Utilities
Clearfix
Easily clear floats by adding .clearfix
to the parent element. Can also be used as a mixin.
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
Close Icon
Use a generic close icon for dismissing content like modals and alerts.
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Visibility
Class .invisible
will make element invisible in DOM but still occupying its place. In reverse class .visible
makes element fully visible.
<div class="row">
<div class="col-6 invisible">
</div>
<div class="col-6 visible">
</div>
</div>
Display
Display classes allows to change elements display
property per breakpoint.
Available classes and their responsive variants are:
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
.d-sm-none
.d-sm-inline
.d-sm-inline-block
.d-sm-block
.d-sm-table
.d-sm-table-cell
.d-sm-flex
.d-sm-inline-flex
.d-md-none
.d-md-inline
.d-md-inline-block
.d-md-block
.d-md-table
.d-md-table-cell
.d-md-flex
.d-md-inline-flex
.d-lg-none
.d-lg-inline
.d-lg-inline-block
.d-lg-block
.d-lg-table
.d-lg-table-cell
.d-lg-flex
.d-lg-inline-flex
.d-xl-none
.d-xl-inline
.d-xl-inline-block
.d-xl-block
.d-xl-table
.d-xl-table-cell
.d-xl-flex
.d-xl-inline-flex
.d-none
.d-inline
.d-inline
.d-block
.d-inline-block
.d-inline-block
.d-table
.d-table
.d-table-cell
next row
.d-table-cell
.d-flex
.d-inline-flex
next row
.d-inline-flex
<div class="d-none">
</div>
<div class="d-inline">
</div>
<div class="d-inline-block">
</div>
<div class="d-block">
</div>
<div class="d-table">
</div>
<div class="d-table-cell">
</div>
<div class="d-flex">
</div>
<div class="d-inline-flex">
</div>
Margin
The classes are named using the format .m(sides)-(size)
for xs
and .m(sides)-(breakpoint)-(size)
for sm
, md
, lg
, and xl
.
Where sides is one of:
t
- for classes that setmargin-top
b
- for classes that setmargin-bottom
l
- for classes that setmargin-left
r
- for classes that setmargin-right
x
- for classes that set bothmargin-left
andmargin-right
y
- for classes that set bothmargin-top
andmargin-bottom
- blank - for classes that set a
margin
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate themargin
by setting it to0
1
- (by default) for classes that set themargin
to$spacer * .25
2
- (by default) for classes that set themargin
to$spacer * .5
3
- (by default) for classes that set themargin
to$spacer
4
- (by default) for classes that set themargin
to$spacer * 1.5
5
- (by default) for classes that set themargin
to$spacer * 3
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.my-0
.my-1
.my-2
.my-3
.my-4
.my-5
.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mt-0
.mt-1
.mt-2
.mt-3
.mt-4
.mt-5
.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.ml-0
.ml-1
.ml-2
.ml-3
.ml-4
.ml-5
<div class="row">
<div class="col-6 my-5">
</div>
<div class="col-6 mx-4">
</div>
</div>
Negative Margin
The classes are named using the format .m(sides)-n(size)
for xs
and .m(sides)-(breakpoint)-n(size)
for sm
, md
, lg
, and xl
.
Where sides is one of:
t
- for classes that setmargin-top
b
- for classes that setmargin-bottom
l
- for classes that setmargin-left
r
- for classes that setmargin-right
x
- for classes that set bothmargin-left
andmargin-right
y
- for classes that set bothmargin-top
andmargin-bottom
- blank - for classes that set a
margin
on all 4 sides of the element
Where size is one of:
1
- (by default) for classes that set themargin
to$spacer * .25
2
- (by default) for classes that set themargin
to$spacer * .5
3
- (by default) for classes that set themargin
to$spacer
4
- (by default) for classes that set themargin
to$spacer * 1.5
5
- (by default) for classes that set themargin
to$spacer * 3
.m-0
.m-n1
.m-n2
.m-n3
.m-n4
.m-n5
.my-0
.my-n1
.my-n2
.my-n3
.my-n4
.my-n5
.mx-0
.mx-n1
.mx-n2
.mx-n3
.mx-n4
.mx-n5
.mt-0
.mt-n1
.mt-n2
.mt-n3
.mt-n4
.mt-n5
.mr-0
.mr-n1
.mr-n2
.mr-n3
.mr-n4
.mr-n5
.mb-0
.mb-n1
.mb-n2
.mb-n3
.mb-n4
.mb-n5
.ml-0
.ml-n1
.ml-n2
.ml-n3
.ml-n4
.ml-n5
<div class="row">
<div class="col-6 my-5">
</div>
<div class="col-6 mx-4">
</div>
</div>
Padding
The classes are named using the format .p(sides)-(size)
for xs
and .p(sides)-(breakpoint)-(size)
for sm
, md
, lg
, and xl
.
Where sides is one of:
t
- for classes that setpadding-top
b
- for classes that setpadding-bottom
l
- for classes that setpadding-left
r
- for classes that setpadding-right
x
- for classes that set bothpadding-left
andpadding-right
y
- for classes that set bothpadding-top
andpadding-bottom
- blank - for classes that set a
padding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate thepadding
by setting it to0
1
- (by default) for classes that set thepadding
to$spacer * .25
2
- (by default) for classes that set thepadding
to$spacer * .5
3
- (by default) for classes that set thepadding
to$spacer
4
- (by default) for classes that set thepadding
to$spacer * 1.5
5
- (by default) for classes that set thepadding
to$spacer * 3
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.py-0
.py-1
.py-2
.py-3
.py-4
.py-5
.px-0
.px-1
.px-2
.px-3
.px-4
.px-5
.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.pr-0
.pr-1
.pr-2
.pr-3
.pr-4
.pr-5
.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pl-0
.pl-1
.pl-2
.pl-3
.pl-4
.pl-5
<div class="row">
<div class="col-6 py-5">
</div>
<div class="col-6 px-4">
</div>
</div>
Float
These utility classes float an element to the left or right, or disable floating, based on the current viewport size. Please be aware float utilities have no affect on flex items.
Available classes and their responsive variants are:
float-left
float-right
float-none
float-sm-left
float-sm-right
float-sm-none
float-md-left
float-md-right
float-md-none
float-lg-left
float-lg-right
float-lg-none
float-xl-left
float-xl-right
float-xl-none
float-left
- Float left on all viewport sizesfloat-right
- Float right on all viewport sizesfloat-none
- Don't float on all viewport sizesfloat-sm-left
- Float left on sm+ viewport sizesfloat-sm-right
- Float right on sm+ viewport sizesfloat-sm-none
- Don't float on sm+ viewport sizesfloat-md-left
- Float left on md+ viewport sizesfloat-md-right
- Float right on md+ viewport sizesfloat-md-none
- Don't float on md+ viewport sizesfloat-lg-left
- Float left on lg+ viewport sizesfloat-lg-right
- Float right on lg+ viewport sizesfloat-lg-none
- Don't float on lg+ viewport sizesfloat-xl-left
- Float left on xl+ viewport sizesfloat-xl-right
- Float right on xl+ viewport sizesfloat-xl-none
- Don't float on xl+ viewport sizes
<div class="float-left">
</div>
<div class="float-right">
</div>
<div class="float-none">
</div>
Position
Basic Positioning
These classes can quickly change elements position. The this framework extends basic BS4 by adding their responsive variants.
position-static
position-relative
position-absolute
position-fixed
position-sticky
position-sm-static
position-sm-relative
position-sm-absolute
position-sm-fixed
position-sm-sticky
position-md-static
position-md-relative
position-md-absolute
position-md-fixed
position-md-sticky
position-lg-static
position-lg-relative
position-lg-absolute
position-lg-fixed
position-lg-sticky
position-xl-static
position-xl-relative
position-xl-absolute
position-xl-fixed
position-xl-sticky
Fixed Top & Fixed Bottom
Position an element at the top or bottom of the viewport respectively, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.
Sticky Top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it within its parent container. If parent container is out of the viewport the element with class sticky-top
will disappear too. The .sticky-top
utility uses CSS’s position: sticky
, which isn’t fully supported in all browsers.
Microsoft Edge and IE11 will render position: sticky
as position: relative
. As such, we wrap the styles in a @supports
query, limiting the stickiness to only browsers that properly can render it.
Fixed top right
A class usefull for menu toggler to stay in viewport regardless of page scroll. just add class fixed-top-right
to menu toggler ig you want it to stay in top right corner during page scroll.
Classes and their responsive variants:
fixed-top
fixed-bottom
sticky-top
fixed-top-right
fixed-sm-top
fixed-sm-bottom
sticky-sm-top
fixed-md-top
fixed-md-bottom
sticky-md-top
fixed-lg-top
fixed-lg-bottom
sticky-lg-top
fixed-xl-top
fixed-xl-bottom
sticky-xl-top
<div class="fixed-top">
</div>
<div class="fixed-bottom">
</div>
<div class="sticky-top">
</div>
Vertical Align
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Example with inline elementsalign-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
align-baseline | align-top | align-middle | align-bottom | align-text-top | align-text-bottom |
<div>
<span class="align-baseline">align-baseline</span>
<span class="align-top">align-top</span>
<span class="align-middle">align-middle</span>
<span class="align-bottom">align-bottom</span>
<span class="align-text-top">align-text-top</span>
<span class="align-text-bottom">align-text-bottom</span>
</div>
Width
Width utilities to use outside of the grid. The basic Bootstrap 4 classes are w-25
, w-50
, w-75
and w-100
. I added also w-0
which is usefull to toggle with javascript for revealing elements (e.g. sliding menu). If you plan to use w-0
and want to have element totally invisible, do not forget to remove padding with p-0
On top of it I added also responsive variants for width classes to be able to manipulate width in dependency on viewport.
All available classes for width
property are:
w-0
w-25
w-50
w-75
w-100
w-sm-0
w-sm-25
w-sm-50
w-sm-75
w-sm-100
w-md-0
w-md-25
w-md-50
w-md-75
w-md-100
w-lg-0
w-lg-25
w-lg-50
w-lg-75
w-lg-100
w-xl-0
w-xl-25
w-xl-50
w-xl-75
w-xl-100
w-0
w-25
w-50
w-75
w-100
<div class="w-0">
</div>
<div class="w-25">
</div>
<div class="w-50">
</div>
<div class="w-75">
</div>
<div class="w-100">
</div>
Height
Height utilities to use for containers. The basic Bootstrap 4 classes are h-25
, h-50
, h-75
and h-100
. I added also h-0
which is usefull to toggle with javascript for revealing elements (e.g. sliding menu). If you plan to use h-0
and want to have element totally invisible, do not forget to remove padding with p-0
On top of it I added also responsive variants for height classes to be able to manipulate width in dependency on viewport.
All available classes for height
property are:
h-0
h-25
h-50
h-75
h-100
h-sm-0
h-sm-25
h-sm-50
h-sm-75
h-sm-100
h-md-0
h-md-25
h-md-50
h-md-75
h-md-100
h-lg-0
h-lg-25
h-lg-50
h-lg-75
h-lg-100
h-xl-0
h-xl-25
h-xl-50
h-xl-75
h-xl-100
h-0
h-25
h-50
h-75
h-100
<div style="height:150px">
<div class="d-inline-block h-0">
</div>
<div class="d-inline-block h-25">
</div>
<div class="d-inline-block h-50">
</div>
<div class="d-inline-block h-75">
</div>
<div class="d-inline-block h-100">
</div>
</div>