Access Careers Site

Bootstrap 4 Master Stylesheet

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Styles

You can use the mark tag to highlight text.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

And this is a muted text.

Displays

Display 1

Display 2

Display 3

Display 4

Sample body

Lorem ipsum dolor sit amet, erat et libero malesuada hendrerit. Curabitur vulputate tincidunt ante id volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel pretium neque. Sed rhoncus, metus sed auctor varius, est neque lacinia enim, dignissim mollis velit nisl id nisi. Sed arcu diam, laoreet vitae neque eget, fermentum semper magna. Nulla vel commodo nibh. Vestibulum turpis lacus, posuere ac felis a, semper auctor lectus. Duis rutrum arcu eu massa sollicitudin luctus. In fringilla rhoncus felis, quis tincidunt ante rhoncus in. Pellentesque accumsan urna mollis egestas mollis. Vestibulum a purus volutpat, suscipit dui non, ornare nisl.

Colors

.text-primary .text-secondary .text-tertiary .text-quaternary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-white

Primary link Secondary link Tertiary link Quaternary link Success link Danger link Warning link Info link Light link Dark link White link

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

...unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

...inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Definition list

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Background colors

.bg-primary
.bg-secondary
.bg-tertiary
.bg-quaternary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Buttons

General buttons

Outline buttons

Sizes

Groups and dropdown

Pagination

Cards

Various types of cards

This is some text within a card block.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

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

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
Featured

Special title treatment

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

Go somewhere
Card image
Card image cap

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 image cap
Card image cap

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 somewhere

Special title treatment

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

Go somewhere

Colored cards

Header

Primary card

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

Header

Secondary card

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

Header

Light card

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

Header

Dark card

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

Cards with colored borders

Header

Primary card

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

Header

Secondary card

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

Header

Light card

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

Header

Dark card

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

List groups

Images

Responsive image

responsive image

Thumbnail

thumbnail image

Figure

Figure
A caption for the above image.

Forms

Text fields

We'll never share your email with anyone else.
Please provide a valid value.
$
.00

Layouts

@
Must be 8-20 characters long.

Selects

Checkboxes

Radio buttons

Navs

Bootstrap 4 Master Stylesheet