Bootstrap 4 Styleguide

This is a style guide showcasing Bootstrap 4 and common HTML elements, which are displayed all on a single page.
It is a modified version of the Bootstrap 3 Theme example.

Palette

Blue palette image tile

Blue

Indigo palette image tile

Indigo

Purple palette image tile

Purple

Pink palette image tile

Pink

Red palette image tile

Red

Orange palette image tile

Orange

Yellow palette image tile

Yellow

Green palette image tile

Green

Teal palette image tile

Teal

Cyan palette image tile

Cyan

Gray palette image tile

Gray

Dark Gray palette image tile

Dark Gray

Headings & Body Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.

Buttons





























Tables

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Thumbnails

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Badges

Inbox 42

Dropdown



Navs

Navbars

Alerts

Progress bars

60% Complete

25%

List groups

  • 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

  • Dapibus ac facilisis in
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
  • This is a light list group item
  • This is a dark list group item

Cards Replacing panels, wells and thumbnails

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

Carousel