Style Guide

Color Typography Buttons Cards Tables Ratings Grid Forms Popovers Tooltips Dialogs Alerts Utility Icons

Background Colors

Primary --bs-primary-rgb .bg-primary

Primary (subtle) --bs-primary-bg-subtle .bg-primary-subtle

Secondary --bs-secondary-rgb .bg-secondary

Secondary (subtle) --bs-secondary-bg-subtle .bg-secondary-subtle

Tertiary --k-tertiary-rgb .bg-tertiary

Accent --k-accent-rgb .bg-accent

Dark Green --k-darkgreen-rgb .bg-darkgreen

Success --bs-success-rgb .bg-success

Success (subtle) --bs-success-bg-subtle .bg-success-subtle

Danger --bs-danger-rgb .bg-danger

Danger (subtle) --bs-danger-bg-subtle .bg-danger-subtle

Warning --bs-warning-rgb .bg-warning

Warning (subtle) --bs-warning-bg-subtle .bg-warning-subtle

Info --bs-info-rgb .bg-info

Info (subtle) --bs-info-bg-subtle .bg-info-subtle

Light --bs-light-rgb .bg-light

Light (subtle) --bs-light-bg-subtle .bg-light-subtle

Dark --bs-dark-rgb .bg-dark

Dark (subtle) --bs-dark-bg-subtle .bg-dark-subtle

Body Secondary --bs-secondary-bg-rgb .bg-body-secondary

Body Tertiary --bs-tertiary-bg-rgb .bg-body-tertiary

Body --bs-body-bg-rgb .bg-body

Black --bs-black-rgb .bg-black

White --bs-white-rgb .bg-white

Transparent .bg-transparent

Text Colors

.text-primary

--bs-primary-rgb

.text-primary-emphasis

--bs-primary-text-emphasis

.text-secondary

--bs-secondary-rgb

.text-secondary-emphasis

--bs-secondary-text-emphasis

.text-tertiary

--k-tertiary-rgb

.text-accent

--k-accent-rgb

.text-darkgreen

--k-darkgreen-rgb

.text-success

--bs-success-rgb

.text-success-emphasis

--bs-success-text-emphasis

.text-danger

--bs-danger-rgb

.text-danger-emphasis

--bs-danger-text-emphasis

.text-warning

--bs-warning-rgb

.text-warning-emphasis

--bs-warning-text-emphasis

.text-info

--bs-info-rgb

.text-info-emphasis

--bs-info-text-emphasis

.text-light

--bs-light-rgb

.text-light-emphasis

--bs-light-text-emphasis

.text-dark

--bs-dark-rgb

.text-dark-emphasis

--bs-dark-text-emphasis

.text-body

--bs-body-color-rgb

.text-body-emphasis

--bs-body-emphasis-color

.text-body-secondary

--bs-secondary-color

.text-body-tertiary

--bs-tertiary-color

.text-black

--bs-black-rgb

.text-white

--bs-white-rgb

.text-black-50

.text-white-50

Typography

Headings

h1 HEADING Heading

h2 HEADING Heading

h3 HEADING Heading

h4 HEADING Heading

h5 HEADING Heading

h6 HEADING Heading


h1 HEADING Heading
h2 HEADING Heading
h3 HEADING Heading
h4 HEADING Heading
h5 HEADING Heading
h6 HEADING Heading

Font Family

More font-weight and font-style options listed below.

Primary Font Family

Raleway

Bold text.

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Italic text.

Secondary Font Family

Solway

Bold text.

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Italic text.


Primary Font Family
Raleway
Bold text.
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Italic text.

Secondary Font Family
Solway
Bold text.
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Italic text.

Links

This is a link


This is a link

Buttons

Base Button

Variants

Outline Buttons

Disabled State

Sizes

X-Large

Large

Small

X-Small

Cards

Standard Cards

Card Title

Text within the the card body.

Call to Action

Card title

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

Go somewhere

Featured

Card title

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

Go somewhere

2 days ago



    
        
            
                Card Title
                Text within the the card body.
                Call to Action
            
        
    
    
        
          
          
            Card title
            Some quick example text to build on the card title and make up the bulk of the card’s content.
            Go somewhere
          
        
    
    
        
            
                Featured
            
            
                Card title
                With supporting text below as a natural lead-in to additional content.
                Go somewhere
            
            
                2 days ago

Custom Cards

Item 1 of 4:

...



    
        
            
                Item 1 of 4: 
            
            
                ...

Tables

Default

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Variants

The following .table-* variants are supported: primary, secondary, success, danger, warning, info, light, dark

Primary

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Secondary

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Variant Rows & Cells

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Stripes

You can use any of the .table-* classes in conjunction with striped rows/columns

Striped Rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Striped Columns

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Hoverable

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Borders

Bordered table

You can change the color of the border via the border classes, e.g. .border-primary .border-secondary .border-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Borderless table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Table Group Divider

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social



    
        
        #
        First
        Last
        Handle
        
    
    
        
        1
        Mark
        Otto
        @mdo
        
        
        2
        Jacob
        Thornton
        @fat
        
        
        3
        John
        Doe
        @social

Ratings

Grid

Class Prefixes

Extra Small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra Large ≥1200px	Extra Extra Large ≥1400px
`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`

Auto-layout Columns

Equal Width

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Fixed + Auto 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.

1 of 2

2 of 2

1 of 3

2 of 3

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

some content here

3 of 3

1 of 3

some larger content here

3 of 3



    
        
            1 of 3
        
        
            some content here
        
        
            3 of 3
        
    
    
        
            1 of 3
        
        
            some larger content here
        
        
            3 of 3

Vertically Stacked on Mobile, Horizontal on Desktop

Using a single set of .col-md-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the medium breakpoint (md).

col-md-8

col-md-4

col-md



    
        col-md-8
        col-md-4
    
    
        col-md
        col-md
        col-md

Traditional 12-Grid

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-7

col-5

col-8

col-4

col-9

col-3

col-10

col-2

col-11

col-1

col-4

col-3

col-2

col-1



    
        col-1
        col-11
    

    
        col-2
        col-10
    

    
        col-3
        col-9
    

    
        col-4
        col-8
    

    
        col-5
        col-7
    

    
        col-6
        col-6
    

    
        col-7
        col-5
    

    
        col-8
        col-4
    

    
        col-9
        col-3
    

    
        col-10
        col-2
    

    
        col-11
        col-1
    


    
        col-4
        col-4
        col-4
    

    
        col-3
        col-3
        col-3
        col-3
    

    
        col-2
        col-2
        col-2
        col-2
        col-2
        col-2
    
    
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1

Forms

Form with Background



    
        
            
                
                    First Name *
                    
                
            

            
                
                    Last Name *

Form without Background



    
        
            
                
                    First Name *
                    
                
            

            
                
                    Last Name *

Popovers

Tooltips

Dialogs

The following dialogs should be opened from a URL. This will open the page in an iframe.

Default Dialog with Button

Default Dialog with Button

Default Dialog with Link

Default Dialog with Link

YouTube Dialog

YouTube Dialog

PDF Dialog

PDF Dialog

Dialog without Header/Footer

Dialog without Header/Footer

Alerts

Success: This was done correctly. Collect $200.

Info: This is information you might want to know.

Warning: This is very important info.

Error: You did something wrong. Please fix it and try again.


     Success This was done correctly. Collect $200.


     Info This is information you might want to know.


     Warning This is very important info.


     Error You did something wrong. Please fix it and try again.

Utility Classes

Alignment

Left aligned text.

Center aligned text.

Right aligned text.

Left aligned text.
Center aligned text.
Right aligned text.

Floats


    ...
    ...

Images

Screen Size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block`

Icons

Icons via Font Awesome

See this page for all available icons: https://fontawesome.com/v5/search?m=free