Typography

This section defines default stylings and behaviours for HTML and CSS that can be used within a wysiwyg text editor. A full documentation and detailed examples can be found within the Bootstrap documentation. We only display the most important elements here.

Headings

Headings have to follow a chronologically order. For example a <h1> is followed by <h2> than <h3> and so on. You should not use different headings just because of their styling. So placing first a <h2> and than a <h4> causes SEO problems.

You should avoid the overuse of <h1> tags. In contrary to some beliefs, it is no problem to use multiple <h1> tags however the html outline should always be respected.

Classes .h1-.h6 are also available

h1. Sample Heading

h2. Sample Heading

h3. Sample Heading

h4. Sample Heading

h5. Sample Heading

h6. Sample Heading Secondary text

h1, h2, h3, h4, h5, h6, h6 + small.text-muted

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

.display-1, .display-2, .display-3, .display-4

Text blog

Any long-form text - blog post, legal etc.

H2 heading

Adipisicing id aperiam nemo voluptas quos dolores. Officia reprehenderit voluptates facilis facilis nam Repellendus neque esse ducimus doloremque sapiente Dolores sed perspiciatis praesentium libero hic Nesciunt quibusdam inventore commodi similique!

H3 heading

H4 heading

H5 heading

H6 heading

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

Body Text

The main content part of an area. Always be wary that the most important aspect of SEO is to have well written and structured content. The best design and code will not help your ranking with a bad content strategy.

This is a lead text describing the start of a content area to get the attention of the reader.

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.

p.lead, p, small

Colors

The color palette defines the main look & feel of a website and is mostly adapted from an available CI & CD

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-pink

.bg-light

.bg-dark

.bg-white

.bg-purple

primary, secondary, success, info, warning, danger, muted, dark, light

.text-{name} for text color
.bg-{name} for background color

{name} can be:
primary, secondary, success, info, warning, danger, [muted]

Lists

Lists are a great way of displaying structured informations. If this data has a specific order use the <ol> (ordered list) tag otherwise the <ul> (unordered list) tag.

Sometimes you have information that leads to an explanation or more information. For this the definition list is the markup to choose from. Simple nest a definition term <dt> and than the definition description <dd> within the definition list <dl>. There can be multiple definition description follow after a definition term.

Unordered

Lorem ipsum dolor
Facilisis in pretium
- Nulla volutpat aliquam
- Facilisis in pretium
  - Nulla volutpat aliquam
Eget porttitor

Ordered

Lorem ipsum dolor
Facilisis in pretium
- Nulla volutpat aliquam
- Facilisis in pretium
  - Nulla volutpat aliquam
Eget porttitor

Description

Euismod Dolor: A description list is perfect for defining terms. Etiam porta sem malesuada Etiam porta sem malesuada magna mollis euismod. magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.; Donec id elit non mi porta gravida at eget metus.

Emphasis

In addition to the main elements described above, you can utilise an even broader set of html tags listed here in the emphasis section.

Most WYSIWYG editors are able to produce them simply by pressing a button, but it is wise to study them and eventually add missing tags through the source code mode.

A full list and detailed description can be found within the W3C HTML5 documentation.

The hyperlink element
<a href="#">My text</a>

The abbr element
<abbr title="#">TXT</abbr>

The address element
<address>My text<address>

The cite element
<cite>My text</cite>

The code element
<code>My text</code>

The ~~delete~~ element
<del>My text</del>

The definition element
<dfn>My text</dfn>

The emphasis element
<em>My text</em>

The insert element
<ins>My text</ins>

The keyboard element
<kbd>My text</kbd>

The mark element
<mark>My text</mark>

The ~~strikethrough~~ element
<s>My text</s>

The sample element
<samp>My text</samp>

The small element
<small>My text</small>

The span element
<span>My text</span>

The strong element
<strong>My text</strong>

The _subscript element
<sub>My text</sub>

The ^superscript element
<sup>My text</sup>

The time 10:00 element
<time>My text</time>

The underline element
<u>My text</u>

The variable element
<var>My text</var>

The word break element
<wbr>My text<wbr>

Block quotes

Per definition block-quotes are cites extracted from resources such as books or articles. They generally consist of a body text and the authors name.

Through Bootstrap's utilities they can be left- or right-aligned. More options are also available through different classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Spacing

There are also some extra tags and classes which might be helpful when creating your pages in order to manage spacing in between content areas.

How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Tables

For basic styling — light padding and only horizontal dividers — add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables we've opted to isolate our custom table styles. For complete reference, please visit the Bootstrap documentation.

Basic Table

The basic table is the default behaviour when using the .table class. Not adding a class will result in a table without styles at all.

To ensure a table is responsive, add the wrapper class .table-responsive to the table.

More about the basics of a table can be found within the Bootstrap documentation.

Page	Visits	% New Visits	Revenue
/index.html	1265	32.3%	$321.33
/about.html	261	33.3%	$234.12
/sales.html	665	21.3%	$16.34
/blog.html	9516	89.3%	$1644.43
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/services.html	421	60.3%	$724.32
/blog/post.html	1233	93.2%	$126.34

Striped Rows

Sometimes it is necessary to distinguish content form within a table from one another. For this add the class .table-striped to the table and visual even and odd colours are added.

Use this on larger table where content is difficult to read and a clear separation might be required.

More about striped rows can be found within the Bootstrap documentation.

Page	Visits	% New Visits	Revenue
/index.html	1265	32.3%	$321.33
/about.html	261	33.3%	$234.12
/sales.html	665	21.3%	$16.34
/blog.html	9516	89.3%	$1644.43
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/services.html	421	60.3%	$724.32
/blog/post.html	1233	93.2%	$126.34

Bordered Tables

These tables are used for displaying table data rather than just general listings or informations. Simply add the class .table-bordered to the table and a border is added around the table.

Use this on tables where structured data is displayed or the context of the table is separated from the surrounding content.

More about bordered tables can be found within the Bootstrap documentation.

Page	Visits	% New Visits	Revenue
/index.html	1265	32.3%	$321.33
/about.html	261	33.3%	$234.12
/sales.html	665	21.3%	$16.34
/blog.html	9516	89.3%	$1644.43
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/services.html	421	60.3%	$724.32
/blog/post.html	1233	93.2%	$126.34

Contextual Classes

At any given time, you can combine one or more table styles as described above. But always keep the use cases of each individual style in mind.

Additionally you are able to add contextual classes to the table to highlight single rows. These can be .active, .success, .info, .warning and .danger. Simply add them to the <tr> element of the table.

More about bordered tables can be found within the Bootstrap documentation.

Page	Visits	% New Visits	Revenue
/index.html	1265	32.3%	$321.33
/about.html	261	33.3%	$234.12
/sales.html	665	21.3%	$16.34
/blog.html	9516	89.3%	$1644.43
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/404.html	23	34.3%	$23.52
/services.html	421	60.3%	$724.32
/blog/post.html	1233	93.2%	$126.34

Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. For complete reference, please visit the Bootstrap documentation.

Buttons

There are various button sizes and colours to choose from. It is imperative however that you structure the usage according to the importance of the action. When using two actions together, decide which one is of more importance and make it slightly bigger.

For color usage also consider the individual use case. A red button is ideal for cancellation actions while the green counterpart signifies a success action. Please refer to the button names for its descriptive meaning.

The Spot framework only defines Default and Primary buttons, so use of others is discouraged.

Colors

Outline

Disabled

Sizes

Types

Link

Button Utilities

There are additional combinations possible using the button system. You can easily add drop-down menus, icons or append more buttons to one another.

More about button utilities can be found within the Bootstrap documentation.

Left Middle Right

Basic Elements

The basics of a form element include text inputs and basic controls. A form always starts with the <form> element followed with a <fieldset>. A fieldset can be the ideal element to create a two column form. Also always ensure to add the class .form to the forms class.

The entire form can also be easily displayed horizontally or vertically. Simply add either .form-horizontal or .form-inline to the forms class.

More about forms can be found within the Bootstrap documentation.

Text Input

Example block-level help text here.

Text Input with Placeholder

Static Control

email@example.com

File input

Choose file

Text area

Disabled States

Various states can be helpful to restrict user actions prior to certain requirements. They can also be helpful to just display data without the ability to change the form itself.

More about states can be found within the Bootstrap documentation.

Validation States

Validation helps the user to understand what went wrong. It is recommended to display a message as well as to highlight the specific error within input.

These states can either be shown directly using AJAX or after a page reload from the server side.

More about validation can be found within the Bootstrap documentation.

Controls

Input with success

Valid!

Input with error

There is an error here!

Check this custom checkbox

Check this as well

You have to!

Toggle this custom radio

Or toggle this other custom radio

Select

Choose file

Messages

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Input Groups

We simply allow the extension of buttons or icons within form controls. It is also possible to combine these elements with other components such as drop-down's or select2.

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

More about validation can be found within the Bootstrap documentation.

.00

$ .00

Sizing

Grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mix-ins for generating more semantic layouts. For complete reference, please visit the Bootstrap documentation.

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, here’s how it works:

Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.
Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.
Content should be placed within columns, and only columns may be immediate children of rows.
Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .col-sm-4.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices).
You can use predefined grid classes or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Sounds good? Great, let’s move on to seeing all that in an example.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Equal-width columns can be broken into multiple lines, but there is a Safari flexbox bug that prevents this from working without an explicit flex-basis or border. Our example works thanks to the border being set; you can do the same with .col { border: 1px solid transparent; }. Alternatively, you can set the flex-basis to the width of the column (e.g., .col { flex: 1 0 50%; }).

Both these fixes have been documented in a reduced test case outside Bootstrap.

Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

col

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

col

col-8

col-4

Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

col-sm-8

col-sm-4

col-sm

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

Column resets

With the handful of grid tiers available, you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive display utilities.

.col-6 .col-sm-3

Reordering

Flex order

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

Offsetting columns

With the move to flexbox in v4, we no longer have v3’s style of offset classes. Instead, use margin utilities like .mr-auto to force sibling columns away from one another.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Components

Components are reusable modular parts of a website that can be implemented multiple times. This list features the most common elements that can be found within the Bootstrap framework.

Learn more

Tabs

Tabs are controlled over the data-toggle="tab" attribute and a reference name href="#home" which points to a container with the corresponding id="home"

More about tabs can be found within the Bootstrap documentation.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.

Pills

Pills behave similar to tabs, they just use another class .nav-pills for styling.

More about tabs can be found within the Bootstrap documentation.

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

More about tabs can be found within the Bootstrap documentation.

Pagination

Used for navigating within multiple pages like the search results page.

More about tabs can be found within the Bootstrap documentation.

Labels & Badges

Adds additional information to a specific context.

More about tabs can be found within the Bootstrap documentation.

Labels

Primary Secondary Success Info Warning Danger Light Dark

Badges

Images

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

More about tabs can be found within the Bootstrap documentation.

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

Media Object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

More about the media object can be found within the Bootstrap documentation.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

List Groups

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

More about tabs can be found within the Bootstrap documentation.

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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Disabled

List group item heading

3 days ago

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

Donec id elit non mi porta.

List group item heading

3 days ago

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

Donec id elit non mi porta.

List group item heading

3 days ago

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

Donec id elit non mi porta.

Cards

Generic card component that can vary a lot.

More about cards can be found within the Bootstrap documentation.

Card title

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

Go somewhere

This is some text within a card block.

Card title

Card subtitle

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

Card link Another link

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

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
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Featured

Special title treatment

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

Go somewhere

Featured

Special title treatment

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

Go somewhere

Quote

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

Someone famous in Source Title

Featured

Special title treatment

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

Go somewhere

2 days ago

Special title treatment

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

Go somewhere

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 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 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

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.

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 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 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

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

Tooltips & Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

More about tabs can be found within the Bootstrap documentation.

Tooltips

Popovers

Collapse

Get base styles and flexible support for collapsible components like accordions and navigation.

More about tabs can be found within the Bootstrap documentation.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

Carousel

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

More about tabs can be found within the Bootstrap documentation.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

More about modals can be found within the Bootstrap documentation.

Progress Bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

`img-fluid`	makes image responsive, but the image will not exceed it's original width
`sr-only`	the text inside the element will only be visible for screen readers
`clearfix`	when applied to a container of floated elements will expand the element correctly
`invisible`	when applied to an element will hide it (but will maintain it's dimensions in place)
`mx-auto`	makes block element center aligned, requires a width
`text-truncate`	Truncates the text with the ellipsis if it's too long Dolor aliquam amet et architecto ipsam Est itaque neque nostrum sequi sunt. Tenetur consequuntur veniam quibusdam enim maiores, corrupti Nostrum et mollitia esse temporibus vitae! Expedita impedit reprehenderit porro molestiae.

Online Styleguide

Main

Other

Application

Legend

Browser Support

Typography

Headings

h1. Sample Heading

h2. Sample Heading

h3. Sample Heading

h4. Sample Heading

h5. Sample Heading

h6. Sample Heading Secondary text

Display headings

Display 1

Display 2

Display 3

Display 4

Text blog

H2 heading

H3 heading

H4 heading

H5 heading

H6 heading

Body Text

Colors

Lists

Unordered

Ordered

Description

Emphasis

Block quotes

Spacing

How it works

Notation

Horizontal centering

Iconography

Tables

Basic Table

Striped Rows

Bordered Tables

Contextual Classes

Forms

Buttons

Colors

Outline

Disabled

Sizes

Types

Button Utilities

Basic Elements

Selection Elements

Disabled States

Validation States

Controls

Messages

Input Groups

Sizing

Grid

How it works

Grid options

Auto-layout columns

Equal-width

Setting one column width

Variable width content

Equal-width multi-row

Responsive classes

All breakpoints

Stacked to horizontal

Mix and match

Alignment

Vertical alignment

Horizontal alignment

Column resets

Reordering

Flex order

Offsetting columns

Nesting

Components