Bootflow UI Framework

Typography

Headings

Heading 1

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 2
The quick brown fox jumps over the lazy dog
Heading 2
The quick brown fox jumps over the lazy dog

Paragraphs

LEAD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Blockqoute
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.
Cite

– Curabitur lobortis id lorem id bibendum.

Lists

Unordered
  • Lorem ipsum dolor sit amet
  • Ut pretium pretium tempor
  • Fusce vehicula dolor
  • Sit amet blandit dolor
  • In volutpat ante semper diam
ordered
  1. Lorem ipsum dolor sit amet
  2. Ut pretium pretium tempor
  3. Fusce vehicula dolor
  4. Sit amet blandit dolor
  5. In volutpat ante semper diam

Tables

Basic

Table header
Table header
Table header
Table header
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell

Striped

Table header
Table header
Table header
Table header
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell

Bordered

Table header
Table header
Table header
Table header
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell

Forms

Inputs

Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Group
$
.00
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Focused
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Disabled
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Error
$
X
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Warning
$
!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Success
$
OK
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Textareas

Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Selects

Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Check boxes

Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Checked
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Success
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Disabled
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Error
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Warning
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Radio buttons

Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Disabled
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Switches

Active
ON
OFF

Buttons

Options

Default
Primary
Success
Info
Warning
Danger

Options

Large
Default
Small
Extra small

Helpers

Contextual colors

Muted

Cras mattis consectetur purus sit amet fermentum.

Primary

Maecenas sed diam eget risus varius blandit sit amet non magna.

Success

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Info

Sed posuere consectetur est at lobortis.

Warning

Nulla vitae elit libero, a pharetra augue.

Danger

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Contextual backgrounds

Primary

Maecenas sed diam eget risus varius blandit sit amet non magna.

Success

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Info

Sed posuere consectetur est at lobortis.

Warning

Nulla vitae elit libero, a pharetra augue.

Danger

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Components

Dropdowns

Button groups

Navs

Tabs

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Pills

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Navs

Breadcrumbs

Pagination

Pagers

PreviosNext

Labels

Default
Primary
Success
info
Warning
Danger

Badges

Default
Messages
042
Reverse
Messages
042

Alerts

Success
This is some text inside of a div block.
X
Info
This is some text inside of a div block.
X
Warning
This is some text inside of a div block.
X
Danger
This is some text inside of a div block.
X

Progress bars

Basic
Label
37%
Stacked

Panels

Default
Panel title
This is some text inside of a div block.
Primary
Panel title
This is some text inside of a div block.
Success
Panel title
This is some text inside of a div block.
info
Panel title
This is some text inside of a div block.
Warning
Panel title
This is some text inside of a div block.
Danger
Panel title
This is some text inside of a div block.

Wells

Default
Look, I’m in a well!

Modals

Default
Try

Accordion

Default
Accordion title
Accordion title
Accordion title

Carousels

Default

Pellentesque Etiam

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Vehicula

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Colors

#e74c3c
#f39c12
#f1c40f
#2ecc71
#1abc9c
#3498db
#ed796d
#f6b54e
#f5d34b
#63d995
#54cdb5
#67b2e4
#f3a59d
#f9cd88
#f8e187
#96e5b8
#8cddcd
#99cbed
#f9d2ce
#fce6c4
#c6eee6
#fbf0c3
#cbf2db
#cce5f6
#333333
#666666
#999999
#cccccc
#e5e5e5
#fafafa