Margin & Padding

Margin on all sides - .m

.m-1 (margin: 4px;)

.m-2 (margin: 8px;)

.m-3 (margin: 16px;)

.m-4 (margin: 24px;)

.m-5 (margin: 48px;)

Margin left - .ml

.ml-1 (margin-left: 4px;)

.ml-2 (margin-left: 8px;)

.ml-3 (margin-left: 16px;)

.ml-4 (margin-left: 24px;)

.ml-5 (margin-left: 48px;)

Margin right - .mr

.mr-1 (margin-right: 4px;)

.mr-2 (margin-right: 8px;)

.mr-3 (margin-right: 16px;)

.mr-4 (margin-right: 24px;)

.mr-5 (margin-right: 48px;)

Margin top - .mt

.mt-1 (margin-top: 4px;)

.mt-2 (margin-top: 8px;)

.mt-3 (margin-top: 16px;)

.mt-4 (margin-top: 24px;)

.mt-5 (margin-top: 48px;)

Margin bottom - .mb

.mb-1 (margin-bottom: 4px;)

.mb-2 (margin-bottom: 8px;)

.mb-3 (margin-bottom: 16px;)

.mb-4 (margin-bottom: 24px;)

.mb-5 (margin-bottom: 48px;)

Margin auto - .m-auto

.m-auto (margin: auto;)

Responsive Margin Example

Screen sizes: extra small .ml-5 | small .ml-0 | medium .ml-5 | large .ml-0 | extra large .m-5

padding on all sides - .p

.p-1 (padding: 4px;)

.p-2 (padding: 8px;)

.p-3 (padding: 16px;)

.p-4 (padding: 24px;)

.p-5 (padding: 48px;)

padding left - .pl

.pl-1 (padding-left: 4px;)

.pl-2 (padding-left: 8px;)

.pl-3 (padding-left: 16px;)

.pl-4 (padding-left: 24px;)

.pl-5 (padding-left: 48px;)

padding right - .pr

.pr-1 (padding-right: 4px;)

.pr-2 (padding-right: 8px;)

.pr-3 (padding-right: 16px;)

.pr-4 (padding-right: 24px;)

.pr-5 (padding-right: 48px;)

padding top - .pt

.pt-1 (padding-top: 4px;)

.pt-2 (padding-top: 8px;)

.pt-3 (padding-top: 16px;)

.pt-4 (padding-top: 24px;)

.pt-5 (padding-top: 48px;)

padding bottom - .pb

.pb-1 (padding-bottom: 4px;)

.pb-2 (padding-bottom: 8px;)

.pb-3 (padding-bottom: 16px;)

.pb-4 (padding-bottom: 24px;)

.pb-5 (padding-bottom: 48px;)

Responsive padding Example

Screen sizes: Extra small pl-5 | small pl-0 | medium pr-5 | large ml-0 | extra large p-5

Text Alignment

.text-left (Left aligned text on all viewport sizes.)

.text-center (Center aligned text on all viewport sizes.)

.text-right (Right aligned text on all viewport sizes.)

Responisve text alignment example

.text-sm-left (Left aligned text on screens sized SM (small) or wider.)

.text-md-right (Right aligned text on screens sized MD (medium) or wider.)

.text-lg-right (Right aligned text on screens sized LG (large) or wider.)

.text-xl-right (Right aligned text on screens sized XL (extra-large) or wider.)

Text transforms

.text-lowercase (Lowercased text.)

.text-uppercase (Uppercased text.)

.text-capitalized (First letter of each word capitalized.)

Font weight & italics

.font-weight-bold (Bold text.)

.font-weight-normal (Normal weight text.)

.font-weight-light (Light weight text.)

.font-italic (Italic text.)

Fancy heading text

.display-1

.display-2

.display-3

.display-4

Fancy paragraph text

normal paragraph - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

.lead (Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor).

Text colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Background colors

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

Display properties

.d-inline

.d-block

.d-inline-block

Responsive example - show extra small (default) - hide on small - show large - hide extra large

.d-flex

Flexbox - Direction

.flex-row

.flex-column

Flexbox - Justify Content

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-start

Flexbox - Align Items

.justify-content-start

.justify-content-end

.justify-content-center

Learn more about other Flexbox Properties

Border-radius

.rounded-top (Border radius on top)

.rounded-bottom (border radius on bottom)

.rounded-left (radius left side)

.rounded-right (border radius right side)

.rounded (border radius all around)

.rounded-cirlce

Box Shadow

.shadow-sm (Small shadow)

.shadow (Regular shadow)

.shadow-lg (Larger shadow)

Width & Height

.w-25 (Width 25%)

.w-50 (Width 50%)

.w-75 (Width 75%)

.w-100 (Width 100%)

.w-auto (Width auto)

.h-25 (Height 25%)

.h-50 (Height 50%)

.75 (Height 75%)

.h-100 (Height 100%)

.h-auto (Height auto)

Buttons

Button Groups

.btn-group

Cards & Card groups

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Carousel

Collapse content

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Dropdown content

Forms

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Nav

Navbar

Grid System

.col-12

.col-6

.col-4

.col-3

.col-2

.col-1

Mix and match columns as long as the total is equal to 12

.col-4

.col-8

.col-6

.col-3

Responsive grids example

.col-4 on xs-sm and .col-8 on md-xl

.col-8 on xs-sm and .col-4 on md-xl