Bootstrap 4.0.0.alpha5 elements page example template

A quick preview of everything Bootstrap has to offer.

See Boostrap 4!
Alerts
Breadcrumb
Button
Button Choice
Dropdown
Button Group
Button link
Split Dropdown
Etiquette
Primary Default Success Warning Danger Info
Primary Default Success Warning Danger Info
List group
  • Cras justo odio14
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  • List group item heading

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

  • List group item heading

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

  • List group item heading

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

Modal
click here to open modal
Progress
0 20 40 60 80 100
0 20 40 60 80 100
Forms
=


Card
Content 2
Content
Card
Image

Card title

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

  • Cras justo odio
  • Dapibas ac facilisis in
  • vestibulum at eros
header 1
content 1
Image

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

  • cras justo odio
  • Dapibas ac facilisis in
  • Header list

    vestibulum at eros

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

lorem ipsum dolor sit amet, consectetur adipiscing elit. integer posuere erat a ante.

someone famous in source title

Special title treatment

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

Go somewhere

Special title treatment

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

Go somewhere

Special title treatment

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

Go somewhere

Special title treatment

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

Special title treatment

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

Special title treatment

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

Special title treatment

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

Special title treatment

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

Special title treatment

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

Table
IdEmailActiveCompanyCreated AtUpdated At
1test0@test.comtrueCompany test 77362017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
2test1@test.comtrueCompany test 25532017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
3test2@test.comtrueCompany test 91862017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Displaying User 1 - 3 of 10 in total | Per page:
Table card

IdEmailActiveCompanyCreated AtUpdated At
1test0@test.comtrueCompany test 77362017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
2test1@test.comtrueCompany test 25532017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
3test2@test.comtrueCompany test 91862017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC