Jumbotron #

Bootpack

Build-tools setup for customizing and creating skins for Bootstrap.


It is powered by Bootstrap, Gulp, Sass, Nunjucks and obviously, Node.js.

Github

Typography #

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Pellentesque ornare sem lacinia quam venenatis vestibulum.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

Navbar #

Breadcrumb #

Cards #

Primary

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Secondary

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Light

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Dark

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Success

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Info

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Warning

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Danger

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Primary

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Secondary

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Light

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Dark

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Success

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Info

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Warning

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Danger

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et orci metus.

Modal #

Tabs #

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a convallis mauris.
Donec consectetur dui eget massa pharetra, sit amet sagittis metus porttitor.

Pills #

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a convallis mauris.
Donec consectetur dui eget massa pharetra, sit amet sagittis metus porttitor.

List groups #

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

Buttons #

Pagination #

Alerts #

Success!

Duis sollicitudin velit nec sagittis aliquet. Integer ultrices diam blandit dictum convallis. Curabitur rutrum nunc nulla, quis congue ante consectetur eu.

Info! Phasellus vehicula purus sed libero lobortis egestas.
Warning! Phasellus vehicula purus sed libero lobortis egestas.
Danger! Phasellus vehicula purus sed libero lobortis egestas.
Primary! Phasellus vehicula purus sed libero lobortis egestas.
Secondary! Phasellus vehicula purus sed libero lobortis egestas.
Light! Phasellus vehicula purus sed libero lobortis egestas.
Dark! Phasellus vehicula purus sed libero lobortis egestas.

Badges #

Primary Secondary Success Danger Warning Info Light Dark

Primary Secondary Success Danger Warning Info Light Dark

Progress bars #

Tables #

Type Column #1 Column #2 Column #3
Active Content Content Content
Default Content Content Content
Primary Content Content Content
Secondary Content Content Content
Success Content Content Content
Danger Content Content Content
Warning Content Content Content
Info Content Content Content
Light Content Content Content
Dark Content Content Content

Tooltips #

Popovers #

Forms #

Legend
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Success! You've done it.
Sorry, that username's taken. Try another?
$
.00
Custom forms
Upload