Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Add classes to an element to remove all borders or some borders.

          
  <span class="border"></span>
  <span class="border-0"></span>
  <span class="border-top-0"></span>
  <span class="border-right-0"></span>
  <span class="border-bottom-0"></span>
  <span class="border-left-0"></span>
          

Border color

Change the border color using utilities built on our theme colors.

          
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-info"></span>
  <span class="border border-warning"></span>
  <span class="border border-danger"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
          

Border-radius

Add classes to an element to easily round its corners.

          
  <img src="..." alt="..." class="rounded">
  <img src="..." alt="..." class="rounded-top">
  <img src="..." alt="..." class="rounded-right">
  <img src="..." alt="..." class="rounded-bottom">
  <img src="..." alt="..." class="rounded-left">
  <img src="..." alt="..." class="rounded-circle">
  <img src="..." alt="..." class="rounded-0">
          

Colors

To add to these items, add and override colors in _colors.scss:$theme-colors(). See Bootstrap's docs for more.

$theme-colors(primary);

$theme-colors(secondary);

$theme-colors(success);

$theme-colors(info);

$theme-colors(warning);

$theme-colors(danger);

$theme-colors(light);

$theme-colors(dark);

Text Color

Colors can also be used with text classes. _colors.scss:$theme-colors() is again the go-to here. text-white and text-black are available by default.

Background Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

Spacing

To add to these items, adjust $spacing() in _variables.scss

Tables

Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

Examples

Basic

Quickly create a table style with the .table class as <table class="table">.

Dark Basic

As easy as adding the table-dark class to the table as <table class="table-dark">!

Table Head Options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark in your <thead> for a light or dark gray appearance. For example, <thead class="thead-dark"> or <thead class="thead-light">.

Striped Rows

Use the .table-striped class with basic or dark tables to add zebra-striping to any table. <table class="table table-striped"> or <table class="table table-dark table-striped">

Bordered table

Add .table-bordered for borders on all sides of the table and cells. Available for both basic and dark tables. <table class="table table-bordered"> or <table class="table table-dark table-bordered">

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>. <table class="table table-hover"> or <table class="table table-dark table-hover">

Small table

Add .table-sm to make tables more compact by cutting cell padding in half. <table class="table table-sm"> or <table class="table table-dark table-sm">

Contextual classes

Use contextual classes to color table rows or individual cells.

Font Families

Font families can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

            
  .class {
    font-family: $font-family-base;
  }
            

            
  .class {
    font-family: $font-family-monospace;
  }
            

Font Sizes

Font sizes can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

Headings

These are heading styles, including both element and classed version. Use the element version in markup following Accessibility guidelines. Use the class version to match font styling of heading. See WebAim for details.

You can use these as either the element or as a class. For example:

Display headings

Bootstrap style for larger headlines. For example:

Text Styles

Lead

          
  <p class="lead">
    Qui quibusdam sapiente dolorem veritatis fuga.
  </p>
        

Paragraphs

Paragraph One Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Paragraph Two after an hr Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header + Paragraphs

Header 1

Paragraph following an h1Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 2

Paragraph following an h2Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 3

Paragraph following an h3Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 4

Paragraph following an h4Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 5

Paragraph following an h5Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 6

Paragraph following an h6Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Misc

This is a text link.

Italic text is used for stylistic purposes in i

This text has added emphasis in em

Bolded text is used for stylistic purposes in b

Strong is used to indicate strong importance in strong

This text is ^superscript

This text is _subscript

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Lists