Divio Divio
  • Features
  • Developers
  • Plans
Login Request a demo

Navigation

  • Templates
  • Typography
  • Iconography
  • Tables
  • Forms
  • Grid
  • Components
  • Utility
  • Custom

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

1.01 – Homepage development 1.02 – How it works development 1.03 – Agency 1.04 – Enterprise 1.05 – Pricing development 1.06 – Pricing detail development 1.07 – Developers development

Other

2.01 – Blog development

Application

3.01 – Login 3.02 – Registration

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

.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

  1. Lorem ipsum dolor
  2. Facilisis in pretium
    • Nulla volutpat aliquam
    • Facilisis in pretium
      • Nulla volutpat aliquam
  3. 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
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

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.

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.

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

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.

Example block-level help text here.

email@example.com


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

Valid!
There is an error here!
You have to!

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
One of three columns
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
Column
Column
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
col
col
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
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
col-sm
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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
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
.col-6 .col-sm-3
.col-6 .col-sm-3
.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-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.

  • Home
  • Profile
  • Disabled
  • Dropdown
    Action
    Another action


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.

  • Home
  • Profile
  • Disabled
  • Dropdown
    Action Another action Something else here
    Separated link
  • Column up to md
  • Profile
  • Disabled
  • Dropdown
    Action Another action Something else here
    Separated link

Breadcrumbs

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

More about tabs can be found within the Bootstrap documentation.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Pagination

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

More about tabs can be found within the Bootstrap documentation.

Pagination

  • «
  • 1 (current)
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1 (current)
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1 (current)
  • 2
  • 3
  • 4
  • 5
  • »
Previous page Next page

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

Primary Secondary Success Info Warning Danger Light Dark

Primary Secondary Success Info Warning Danger Light Dark

Badges

  • Home 42
  • Profile
  • Messages 3

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.

alt
alt
alt
alt
alt
alt
alt
alt
alt
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
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.

64x64

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.

64x64

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.

64x64

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.

64x64

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.

64x64

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.

100%x180

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.
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
Image cap [100%x180]

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
Image cap [100%x180]

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
  • Active
  • Link
  • Disabled

Special title treatment

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

Go somewhere
100%x180

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

100%x180
100%x270

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.

100%x180

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

100%x180

Card title

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

Last updated 3 mins ago

100%x180

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

100%x180

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
100%x180

Card title

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

Last updated 3 mins ago
100%x180

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
100%x200

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

100%x200

Card title

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

Last updated 3 mins ago

100%x200

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

100%x180

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
100%x180

Card title

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

Last updated 3 mins ago
100%x180

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
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 #3
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.

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 [800x400]

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide [800x400]

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide [800x400]

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

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.

Modal title

One fine body…


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

40%

Striped

60% Complete

Animated

80% Complete

Stacked

40%
30%
20%

Contextual alternatives

20% Complete
40% Complete
60% Complete
80% Complete
90% Complete
95% Complete

Height

20% Complete
20% Complete
20% Complete

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

A section

A section


Divio

Privacy Settings

Keep up to date

  • Follow us on Twitter
  • Follow us on Facebook
  • Follow us on LinkedIn
  • Follow us on GitHub
  • Help and Support

  • Get Started
  • Get Help
  • Support
  • Documentation
  • django CMS
  • Status
  • About Divio

  • Partners
  • Case studies
  • Blog
  • Events
  • About Us
  • Careers
  • Investors

  • Press releases
  • Investor relations
  • Technologies

  • Node.js
  • PHP
  • Python
  • Terms & Policies

  • Terms of Service
  • Data Policy
  • Security Policy
  • Support Policy
  • Privacy Notice
  • Site Notice

Need assistance?

We’re here for you 24/7

USA

+12016934846

Worldwide

+41444801270

Sales

sales@divio.com

Support

Get help

Current status

status.divio.com

This site is built with Django & powered by Divio Cloud

COPYRIGHT © 2001-2019 DIVIO AG. ALL RIGHTS RESERVED.

Your browser is out-of-date!

Update your browser to view this website correctly.

Update my browser now

×

This website uses cookies to help ensure that you enjoy the best experience.
If you do not consent to our use of cookies, please adjust your privacy settings accordingly.
Accept
Privacy Settings

Websites do not have full control over cookies that may set by various third-party scripts. To see detailed information about and to manage cookies in your browser, please check its privacy settings.

Essentials

These cookies and scripts cannot be deactivated as they are needed to correctly render this website.

  • Segment
  • Intercom
  • Triggerbee

Statistics

These tools are used to collect statistics about user behaviour that helps us to improve our website and services. No personal data are collected.

  • Google Analytics

Personalisation

In order to improve your experience of our services, we will customise your experience based upon your usage.

  • HubSpot
Your browser is blocking access to our support tools

Some web advertising and tracking blockers interfere with our support tools. If you're seeing this message, it means that your access to our support is being blocked.

To access our support, you'll need to turn off these blockers for our site or for this session.

See How to unblock our support tools in your browser.