Typography

Headings


						h1, .h1

The small dog jumped over a cow who slid under a pig. Small text here.


						h2, .h2

The small dog jumped over a cow who slid under a pig. Small text here.


						h3, .h3

The small dog jumped over a cow who slid under a pig. Small text here.


						h4, .h4

The small dog jumped over a cow who slid under a pig. Small text here.


						h5, .h5

The small dog jumped over a cow who slid under a pig. Small text here.


						h6, .h6

The small dog jumped over a cow who slid under a pig. Small text here.

Display headings


						.display-1

The small dog jumped over a cow who slid under a pig. Small text here.


						.display-2

The small dog jumped over a cow who slid under a pig. Small text here.


						.display-3

The small dog jumped over a cow who slid under a pig. Small text here.


						.display-4

The small dog jumped over a cow who slid under a pig. Small text here.

Base Body Styles


							base

Pleff lorem monaq morel plaff lerom baple merol pliff ipsum ponaq mipsu ploff pimsu caple supim pluff sumip qonaq issum daple ussum ronaq ossom fap25 abcde tonaq fghij gaple klmno vonaq pqrst haple uvwxy nonaq zzzz. Laple pleff lorem monaq morel plaff sumip qonaq issum daple ussum ponaq gaple klm50 lorem monaq morel plaff lerom baple merol pliff ipsum ponaq mipsu ploff pimsu caple supim pluff sumip qonaq issum daple ussum ronaq ossom faple abc75 tonaq fghij gaple klmno vonaq pqrst haple uvwxy nonaq zzzzz laple pleff lorem monaq morel plaff sumip qonaq issum daple ussum ponaq gapl.

Klmno pm100 pleff lorem monaq morel plaff lerom baple merol pliff ipsum ponaq mipsu ploff pimsu caple supim pluff sumip qonaq issum daple ussum ronaq ossom fa125 abcde tonaq fghij gaple klmno vonaq pqrst haple uvwxy nonaq zzzzz laple pleff lorem monaq morel plaff sumip qonaq issum daple ussum ponaq gaple km150 lorem monaq morel plaff lerom baple merol pliff ipsum ponaq mipsu ploff pimsu caple supim pluff sumi. Qonaq issum daple ussum ronaq ossom faple ab175 tonaq fghij gaple klmno vonaq pqrst haple uvwxy nonaq zzzzz laple pleff lorem monaq morel plaff sumip qonaq issum daple ussum ponaq gaple klnop m200.


							.lead


							<mark>

You can use the mark tag to highlight text.


							<del>

~~This line of text is meant to be treated as deleted text.~~

<s>

~~This line of text is meant to be treated as no longer accurate.~~


							<ins>

This line of text is meant to be treated as an addition to the document.

<u>

This line of text will render as underlined


							<small>

This line of text is meant to be treated as fine print.


							<em>

This line rendered as italicized text.


							<strong>

This line rendered as bold text.

Abbreviations


							<abbr>

							<abbr class="initialism">

attr

HTML

Blockquotes


							<blockquote class="blockquote">

							  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

							  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>

							</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists


							base

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem


							.list-unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem


							.list-inline

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Lorem ipsum
Phasellus iaculis
Nulla volutpat


							.list-group

							.list-group-item

							.list-group-item.active, .list-group-item.disabled

							.list-group-item.list-group-item-action

.active
.disabled
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.


                            <dl> .text-truncate

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Buttons

Base


						.btn .btn-{color}

Hollow


						.btn .btn-outline-{color}

Sizes


						.btn .btn-lg

						.btn .btn-sm

						.btn .btn-block

States


						.btn .active

						.btn w/ disabled attr

Button Group / Toolbar


						.btn-group

						.btn-group-vertical

						.btn-toolbar

Additional Button Functionality


						data-toggle="button"

						.btn w/ disabled attr

I'm a checkbox

Active Radio Radio

Forms

Base


						.form-group, .form-control, .form-control-file, .form-text, .form-check-input, .form-check-label

Control Sizing


					.form-control-lg, .form-control-sm

Read Only Controls


					<input readonly> , .form-control-plaintext

Input Groups

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

First and last name

$ 0.00

Options

Upload

Choose file

Upload

Choose file

Images


						.img-fluid


						.img-thumbnail


						.rounded


						.float-{left|right}


						.mx-auto

Figures


					.figure, .figure-img, .figure-caption

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

Responsive Embed


					.embed-responsive .embed-responsive-16by9


					.embed-responsive .embed-responsive-9by16


					.embed-responsive .embed-responsive-4by3


					.embed-responsive .embed-responsive-1by1

Media Object


						<div class="media">

						  <img class="mr-3" src="..." alt="Image">

						  <div class="media-body">

							...

						  </div>

						</div>

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Alignment


						.align-self-{dir}

Media heading

Arrangement


						.order-{#}

Media heading

Media List

List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Cards


						.card

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Tables


						.table

						.table.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						thead.thead-light

						thead.thead-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						.table-striped

						.table-dark.table-striped

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						.table-bordered

						.table-dark.table-bordered

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						.table-hover

						.table-dark.table-hover

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						.table-sm

						.table-dark.table-sm

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


						.table-responsive{-sm|-md|-lg|-xl}

#	First	Last	Handle	Email	Phone	Website
1	Mark	Otto	@mdo	markotto@reallyawesome.com	444-222-3333	reallyawesome.com
2	Jacob	Thornton	@fat	jacobthorton@reallyawesome.com	444-222-3333	reallyawesome.com
3	Larry	the Bird	@twitter	larrybird@reallyawesome.com	444-222-3333	reallyawesome.com

#	First	Last	Handle
1	Mark	Otto	@mdo	markotto@reallyawesome.com	444-222-3333	reallyawesome.com
2	Jacob	Thornton	@fat	jacobthorton@reallyawesome.com	444-222-3333	reallyawesome.com
3	Larry	the Bird	@twitter	larrybird@reallyawesome.com	444-222-3333	reallyawesome.com

Accordion


						see collapse component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Tabs


						<!-- List group -->

						<div class="list-group" id="myList" role="tablist">

							<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Item</a>

							...

						</div>

						<!-- Tab panes -->

						<div class="tab-content">

						  <div class="tab-pane active fade" id="home" role="tabpanel">...</div>

							...

						</div>

Home Profile Messages Settings

Tab content 1

Tab content 2

Tab content 3

Tab content 4

Badge


						.badge

Example heading New


						.badge .badge-{color}

.badge-primary .badge-secondary .badge-success .badge-danger .badge-warning .badge-info .badge-light .badge-dark


						.badge .badge-pill

.badge-pill.badge-primary .badge-pill.badge-secondary .badge-pill.badge-success .badge-pill.badge-danger .badge-pill.badge-warning .badge-pill.badge-info .badge-pill.badge-light .badge-pill.badge-dark

Breadcrumbs

Callouts / Alerts


						.alert, .alert.alert-{color}

						.alert-link

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Holy guacamole! You should check in on some of those fields below.

Collapse


						data-toggle="collapse"

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.

Multiple Targets

Toggle first element

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.

Carousel


						to do:

Do we use this?

Close


						<button type="button" class="close" aria-label="Close">

						<span aria-hidden="true">×</span>

						</button>

Dropdowns


						to do:

Do we use this?

Jumbotron


						to do:

need

Modal


						to do:

need

Navs


						to do:

need

Navbar


						to do:

need

Pagination


						to do:

need

Popovers


						to do:

need

Progress


						to do:

need

Scrollspy


						to do:

need

Border Classes


						.border{-top|right|bottom|left}

						.border{-top|right|bottom|left}{-0}

.border .border-top .border-right .border-bottom .border-left


						.border-{color}

.border-primary .border-secondary


						.rounded{-top|right|bottom|left|circle|0}

75x75 75x75 75x75 75x75 75x75 75x75 75x75

Display Classes


						.d-{value} for xs

						.d-{breakpoint}-{value} for sm, md, lg, and xl

						{value = none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex }

d-inline-block

d-block

Float Classes


						.float{-sm|md|lg|xl}-{right|left|none}

.float-left

.float-right

Position


						.position-static, .position-relative, .position-absolute, .position-fixed

						.fixed-bottom, .fixed-top

						.sticky-top

Sizing/Width Classes


						.{w|h|mw|mh}-{size}

.w-25

.w-50

.w-75

.w-100

.h-25

.h-50

.h-75

.h-100

Spacing Classes


						.{m|p}{t|b|l|r|x|y|blank}-{0-5|custom|auto}

.mb-1

.mb-2

.mb-3

.mb-4

.mb-5

To do: Add in custom sizes

Text

Text Alignment


						.text{-sm|-md|-lg|-xl}-justify, .text{-sm|-md|-lg|-xl}-left, .text{-sm|-md|-lg|-xl}-center, .text{-sm|-md|-lg|-xl}-right

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Text Wrapping / Overflow


						.text-nowrap

						.text-truncate

This text should overflow the parent.

Praeterea iter est quasdam res quas ex communi.

Text Transform


						.text-lowercase

						.text-uppercase

						.text-capitalize

Lowercased text.

Uppercased text.

CapiTaliZed text.

Text Weight / Decoration


						.font-weight-bold

						.font-weight-normal

						.font-weight-light

						.font-italic

Bold text.

Normal weight text.

Light weight text.

Italic text.

Vertical Align


						.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top

baseline top middle bottom text-top text-bottom

baseline

top

middle

bottom

text-top

text-bottom

Visibility Classes


						.visible, .invisible

						.sr-only, .sr-only-focusable

Your screen size: extra-large large medium small extra-small

Typography

Headings

Display headings

The small dog jumped over a cow who slid under a pig. Small text here.

The small dog jumped over a cow who slid under a pig. Small text here.

The small dog jumped over a cow who slid under a pig. Small text here.

The small dog jumped over a cow who slid under a pig. Small text here.

Base Body Styles

Abbreviations

Blockquotes

Lists

List group item heading

List group item heading

List group item heading

Buttons

Base

Hollow

Sizes

States

Button Group / Toolbar

Additional Button Functionality

Forms

Base

Control Sizing

Read Only Controls

Input Groups

Images

Figures

Responsive Embed

Media Object

Media heading

Media heading

Media heading

Alignment

Media heading

Media heading

Media heading

Arrangement

Media heading

Media heading

Media List

List-based media object

List-based media object

List-based media object

Cards

Card title

Card title

Card subtitle

Special title treatment

Card title

Card subtitle

Tables

Accordion

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Tabs

Badge

Example heading New