Bootstrap Guide

Typography

Level 1

Level 2

Level 3

Level 4

Level 5
Level 6

Level 7

Level 8

Level 9

Level 10

Sphinx of black quartz, judge my vow (200, Extra Light)

Sphinx of black quartz, judge my vow (300, Light)

Sphinx of black quartz, judge my vow (400, Normal)

Sphinx of black quartz, judge my vow (600, Semibold)

Sphinx of black quartz, judge my vow (700, Bold)

Buttons

Standard buttons

Primary Secondary Success Danger Warning Info Light Dark Link

Large buttons

Primary Secondary Success Danger Warning Info Light Dark Link

Small buttons

Primary Secondary Success Danger Warning Info Light Dark Link

Outline buttons

Primary Secondary Success Danger Warning Info Light Dark

Outline large buttons

Primary Secondary Success Danger Warning Info Light Dark

Outline small buttons

Primary Secondary Success Danger Warning Info Light Dark

Containers

In these examples:

  • a blue background denotes the content box
  • a green background denotes the padding box
  • an orange background denotes margin.

A black border has been added to show the natural width of each container, before margins.

Container padding will change based on gutters if the .container is a child of .row.

Standard containers

The behaviour of these containers is fixed width, with different widths at different breakpoints - see the Bootstrap docs. These differ from our previous UIKit containers in that the max-widths are not 100%, but fixed, based on breakpoints.

No container (for reference)

No container

.container

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-sm

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-md

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-lg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-xxl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-fluid

Fluid container

Custom containers

The behaviour of these containers is fixed width, but the same fixed width for EVERY breakpoint beyond the specified one. That is, -sm is 100% until the -sm breakpoint is reached, then becomes 540px at every other breakpoint.

.container-sm-fixed

Fixed, won't go bigger than $container-max-widths['sm'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-md-fixed

Fixed, won't go bigger than $container-max-widths['md'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-lg-fixed

Fixed, won't go bigger than $container-max-widths['lg'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-xl-fixed

Fixed, won't go bigger than $container-max-widths['xl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-xxl-fixed

Fixed, won't go bigger than $container-max-widths['xxl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.

.container-xxxl-fixed

Fixed, won't go bigger than $container-max-widths['xxxl'] - lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis perferendis nulla adipisci non in reiciendis illo quibusdam sunt.