Online Styleguide
The Online Styleguide is a uniformed compendium for project managers, web publisher, designers or developers of how to maintain, update or further develop a website. This section is covering an overview of all available templates developed for this website.
Main
Other
Application
Legend
01.01.14 template is finished, date indicates latest change
development template is in development, untested
outdated template is outdated
Browser Support
Google Chrome*, Mozilla Firefox*, Apple Safari, Internet Explorer 11+ * latest 2 iterations
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
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!
H4 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!
H5 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!
H6 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!
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
.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>
<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 element
<time>My text</time>
The underline element
<u>My text</u>
The variable element
<var>My text</var>
The
<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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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 setmargin
p
- for classes that setpadding
Where sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-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
orpadding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to$spacer * .25
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
3
- (by default) for classes that set themargin
orpadding
to$spacer
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
- (by default) for classes that set themargin
orpadding
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
.
Iconography
Generate font icons using the gulp icons
command. The following icons are available throughout your website. Implement them using
{% include "includes/icon.html" with icon="{name}" [color="{color}" title="{title}" sprite="{sprite}"] %}
and replace {name} with the icon name.
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.
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.
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.
Selection Elements
These elements are ideally used for user choices.
We are normally using only custom checkboxes/radios/selects
More about controls can be found within the Bootstrap documentation.
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
Messages
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.
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.
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
width
s 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 themargin
from rows andpadding
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 em
s or rem
s for defining most sizes, px
s 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.
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.
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.
Variable width content
Use col-{breakpoint}-auto
classes to size columns based on the natural width of their content.
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.
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
.
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.
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.
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
Horizontal alignment
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.
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.
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.
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).
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.
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.
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.
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.
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
List group item heading
3 days agoDonec 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 agoDonec 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 agoDonec 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 somewhereCard 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 linkSome 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
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereFeatured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard 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
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
Card title
This card has supporting text below as a natural lead-in to additional content.
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.
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.
Card title
This card has supporting text below as a natural lead-in to additional content.
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.
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.
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.
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.
More about tabs can be found within the Bootstrap documentation.
Basic
Striped
Animated
Stacked
Contextual alternatives
Height
Utility classes
There is a number of utility classes provided, both bootstrap and custom to help with building pages apart from spacers and the ones covered in "Typography" and "Iconography"
The utilities provided by bootstrap are described here
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.
|
Custom Components
Diagonal backgrounds
Diagonal stripes can be set with classes.
Set stripe direction:
.stripe-down .stripe-up, .stripe-steep-down, .stripe-steep-up