Layout Utilities

These are the basics to keep in mind while developing custom components or interfaces.

Description
Code

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>

Description
Code

Close Icon

Use a generic close icon for dismissing content like modals and alerts.

Some text


<button type="button" class="close" aria-label="Close">
  	<span aria-hidden="true">&times;</span>
</button>

Description
Code

Visibility

Class .invisible will make element invisible in DOM but still occupying its place. In reverse class .visible makes element fully visible.

invisible

visible


<div class="row">
	<div class="col-6 invisible">
	</div>
	<div class="col-6 visible">
	</div>
</div>

Description
Code

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-block

.d-inline-block

.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>

Description
Code

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 set margin-top
b - for classes that set margin-bottom
l - for classes that set margin-left
r - for classes that set margin-right
x - for classes that set both margin-left and margin-right
y - for classes that set both margin-top and margin-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 the margin by setting it to 0
1 - (by default) for classes that set the margin to $spacer * .25
2 - (by default) for classes that set the margin to $spacer * .5
3 - (by default) for classes that set the margin to $spacer
4 - (by default) for classes that set the margin to $spacer * 1.5
5 - (by default) for classes that set the margin 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>

Description
Code

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 set margin-top
b - for classes that set margin-bottom
l - for classes that set margin-left
r - for classes that set margin-right
x - for classes that set both margin-left and margin-right
y - for classes that set both margin-top and margin-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 the margin to $spacer * .25
2 - (by default) for classes that set the margin to $spacer * .5
3 - (by default) for classes that set the margin to $spacer
4 - (by default) for classes that set the margin to $spacer * 1.5
5 - (by default) for classes that set the margin 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>

Description
Code

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 set padding-top
b - for classes that set padding-bottom
l - for classes that set padding-left
r - for classes that set padding-right
x - for classes that set both padding-left and padding-right
y - for classes that set both padding-top and padding-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 the padding by setting it to 0
1 - (by default) for classes that set the padding to $spacer * .25
2 - (by default) for classes that set the padding to $spacer * .5
3 - (by default) for classes that set the padding to $spacer
4 - (by default) for classes that set the padding to $spacer * 1.5
5 - (by default) for classes that set the padding 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>

Description
Code

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 sizes

float-right - Float right on all viewport sizes

float-none - Don't float on all viewport sizes

float-sm-left - Float left on sm+ viewport sizes

float-sm-right - Float right on sm+ viewport sizes

float-sm-none - Don't float on sm+ viewport sizes

float-md-left - Float left on md+ viewport sizes

float-md-right - Float right on md+ viewport sizes

float-md-none - Don't float on md+ viewport sizes

float-lg-left - Float left on lg+ viewport sizes

float-lg-right - Float right on lg+ viewport sizes

float-lg-none - Don't float on lg+ viewport sizes

float-xl-left - Float left on xl+ viewport sizes

float-xl-right - Float right on xl+ viewport sizes

float-xl-none - Don't float on xl+ viewport sizes


<div class="float-left">
</div>
<div class="float-right">
</div>
<div class="float-none">
</div>

Description
Code

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>

Description
Code

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 elements

align-baseline align-top align-middle align-bottom align-text-top align-text-bottom

Example with table cells

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>

Description
Code

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>

Description
Code

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>