Flatro

Bootstrap 4 Theme - Navy Blue Skin

Print-based theme built with a base purple/gold color scheme, easily updated with 2 variables.

Bootstrap 4 Theme

  • Primary
  • Success
  • Info
  • Warning
  • Danger

Buttons

Typography

Display headings

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Regular headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Body text

I'm the Dude. So that's what you call me. You know, that or, uh, His Dudeness, or uh, Duder, or El Duderino if you're not into the whole brevity thing.

This is an example of .text-muted
This is an example of .text-primary
This is an example of .text-success
This is an example of .text-info
This is an example of .text-warning
This is an example of .text-danger

Text emphasis

This is an example of .lead text

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

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Blockquotes

What's a... pederast, Walter?

Donny The Big Lebowski

Shut the f--- up, Donny.

Walter The Big Lebowski

Inline code

<code> tags look like this.

User input

Press alt + f4 to win $$

Sample output

How about a nice game of chess?

Tables

Basic table

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

Inverse table

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

Default header

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat

Inverse header

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat

Striped rows

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

Bordered rows

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

Hoverable rows

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

Small table

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

Contextual rows

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content

Forms

Default form

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.

Forms grid

Form inputs

$

Indicators

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Labels
DefaultPrimarySuccessInfoWarningDanger

Label pills
DefaultPrimarySuccessInfoWarningDanger

Progress bars

Default

0% 25% 50% 75% 100%

Contextual alternatives

25% 50% 75% 100%

Striped

100%100%100%100% 100%

Animated

25%

Containers

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Cards

Examples

This is a basic card block

Card title

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

Card linkAnother link

Featured card

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.

Button

Primary

Text goes here

Success

Text goes here

Info

Text goes here

Warning

Text goes here

Danger

Text goes here


Card groups

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Card decks

Card title

This is a longer 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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

List groups

Dialogs

Modal

Popovers

Tooltips