Typography

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading

This is an h6 heading

Heading Style Overrides

Heading classes are available to override the base heading tag styles. In this way the heading structure can be maintained for accessibility without sacrificing the intended look and feel.

This is an h1 styled as an h6

This is an h2 styled as an h5

This is an h3 styled as an h4

This is an h4 styled as an h3

This is an h5 styled as an h2

This is an h6 styled as an h1

Lead in Text

This is lead in text using the "lead" class. Maecenas id erat vel tortor hendrerit venenatis quis sit amet risus. Vestibulum enim dolor, condimentum at convallis in, consequat id justo. Vivamus mauris justo, facilisis vel orci eget, rhoncus pharetra elit. Vivamus volutpat lacinia.

Meta information

This is meta text using the "meta" class. It is intended for short helper text and links such as categories, authors, dates, etc.

Paragraph

This is a basic paragraph style. Maecenas id erat vel tortor hendrerit venenatis quis sit amet risus. Vestibulum enim dolor, condimentum at convallis in, consequat id justo. Vivamus mauris justo, facilisis vel orci eget, rhoncus pharetra elit. Vivamus volutpat lacinia. Pellentesque lobortis turpis a ornare aliquet. Aenean sagittis hendrerit risus, quis molestie leo posuere convallis. Sed in ex a libero sagittis vestibulum eu vitae nisi.

Fusce scelerisque velit at purus condimentum, at ultrices tellus efficitur. Maecenas aliquam lorem vel finibus maximus. Phasellus iaculis malesuada magna id iaculis. Morbi malesuada mauris quis est commodo semper. Nulla et faucibus turpis. Nunc vitae metus auctor, condimentum libero convallis, aliquet massa. Aliquam pharetra suscipit libero, id porta mi eleifend eget.

Vivamus sodales sem nec placerat rutrum. Aenean porttitor pretium tellus id convallis. Vestibulum libero libero, egestas vel tincidunt eget, viverra in sapien. Nunc placerat, sapien in cursus porta, risus ex sollicitudin leo, quis facilisis ligula libero ut ligula. Duis id lorem sit amet dui fermentum rhoncus porttitor ac leo. Vestibulum viverra non eros et tempor. In scelerisque faucibus nulla vitae vestibulum. Morbi consequat blandit ligula, porta viverra eros ullamcorper vulputate. Sed commodo accumsan ex, id auctor enim lobortis sed. Duis dapibus volutpat metus a finibus.

Text Link

This is a basic text link.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lists

Bulleted List

• Curabitur et libero sed urna scelerisque posuere.
• Vivamus ipsum lacus, lobortis at luctus sit amet, porttitor porttitor ex.
• Morbi a elit aliquam, maximus odio vitae, ultrices ex.
  • Curabitur et libero sed urna scelerisque posuere.
  • Vivamus ipsum lacus, lobortis at luctus sit amet, porttitor porttitor ex.
  • Morbi a elit aliquam, maximus odio vitae, ultrices ex.
    • Curabitur et libero sed urna scelerisque posuere.
    • Vivamus ipsum lacus, lobortis at luctus sit amet, porttitor porttitor ex.
    • Morbi a elit aliquam, maximus odio vitae, ultrices ex.

Numbered List

1. Mauris ac nulla urna. Morbi eu elit posuere, porttitor neque ac, finibus orci.
2. Maecenas non ornare nisl, quis efficitur dolor.
3. Aliquam lobortis dui orci, sit amet posuere magna tristique ut.
   1. Mauris ac nulla urna. Morbi eu elit posuere, porttitor neque ac, finibus orci.
   2. Maecenas non ornare nisl, quis efficitur dolor.
   3. Aliquam lobortis dui orci, sit amet posuere magna tristique ut.
      1. Mauris ac nulla urna. Morbi eu elit posuere, porttitor neque ac, finibus orci.
      2. Maecenas non ornare nisl, quis efficitur dolor.
      3. Aliquam lobortis dui orci, sit amet posuere magna tristique ut.

Directions List

1. Lorem

   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2. Ipsum

   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3. Dolor

   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion

Tables

Tables do not perform well on small screens, so should be avoided unless the content truly needs the tabular structure. Refer to the Bootstrap 4 documentation for more information on table styling options.

Default Table

Bordered Table

This style looks most like a spreadsheet. It does not refow well to adapt to smaller screens, so should not be used for layout purposes. For multiple columns, card blocks are generally a better option.

Buttons

The button styles provide a range of visual emphasis depending on the needs of the content.

Primary Button

The "primary" button is intended for the most important calls-to-action on the page. As such, an effort should be made to limit the number of these on a single page to maintain a clear focus for the content.

Secondary Button

Secondary buttons are suited for general use such as in sidebars or the main content area.

Link Button

Link buttons are for cases where you want something to look like a link, but visually stay inline with some buttons.

Small Button Button Large Button

Button sizes can be modified to adjust their prominence. These sizes are also compatible with form input heights.

Use the button classes on <a>, <button>, or <input> elements.

Link Button

Blocks

Callout Block (Well)

Promo Blocks

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button

Sed Ut Perspiciatis

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Testimonial

 

 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

–  Lorem Ipsum

Photo CTA Links

Works individually in standard Bootstrap columns.

Lorem Ipsum

Dolor Sit Amet

Also can be grouped in a row of Photo CTA Links without gutter spacing.

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit

Photo Block

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Highlight Block

This block is a specialized view initially only used on the degree pages.

Feature Block

Works individually in standard Bootstrap columns.

Can be used as a solid grid of Feature Blocks with some modifier classes. Note the alternate colors and photo backgrounds shown here also rely on modifier classes.

Images

Base image - (no class modifier)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in commodo magna, sit amet porta dui. Nunc ut iaculis magna. Aenean sit amet massa placerat, vulputate risus ornare, efficitur ante. Praesent sodales vulputate nulla eget ornare. Vivamus ut egestas tellus, in dictum nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies erat at neque pulvinar, et rhoncus neque vestibulum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in commodo magna, sit amet porta dui. Nunc ut iaculis magna. Aenean sit amet massa placerat, vulputate risus ornare, efficitur ante. Praesent sodales vulputate nulla eget ornare. Vivamus ut egestas tellus, in dictum nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies erat at neque pulvinar, et rhoncus neque vestibulum.

Image Right Aligned - (alignright)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in commodo magna, sit amet porta dui. Nunc ut iaculis magna. Aenean sit amet massa placerat, vulputate risus ornare, efficitur ante. Praesent sodales vulputate nulla eget ornare. Vivamus ut egestas tellus, in dictum nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies erat at neque pulvinar, et rhoncus neque vestibulum.

Suspendisse eleifend, arcu eget rhoncus scelerisque, justo mi pretium mi, sit amet laoreet est odio id ligula. Praesent et consequat neque, in luctus neque. Sed ullamcorper massa nec consectetur elementum. Aliquam vel porta lorem. Suspendisse pellentesque neque id nibh imperdiet, id rhoncus neque posuere. Pellentesque nec dignissim ex, nec consectetur lectus. Donec id augue in magna semper fermentum et sit amet justo. In at aliquet enim, sed iaculis nulla. Nam egestas vitae nisl feugiat aliquet. Phasellus a lectus ut lacus commodo tempor in sed nunc.

Image Left Aligned - (alignleft)

Morbi molestie et quam vitae.

• Curabitur et libero sed urna scelerisque posuere.
• Vivamus ipsum lacus, lobortis at luctus sit amet, porttitor porttitor.

Morbi molestie et quam vitae consequat. Suspendisse sodales diam quis eros interdum egestas. Nullam semper vitae arcu vel congue. Integer vel turpis quis ex sollicitudin viverra consectetur a quam. Cras quis purus tortor. Curabitur ultricies risus non ex efficitur, non pulvinar erat egestas. Etiam consectetur, felis vel mollis tristique, quam lectus consequat ante, et placerat elit lorem eget nisl. Aliquam commodo nunc eget consectetur molestie. Sed in libero vitae risus tempor sagittis. Cras volutpat, turpis et iaculis luctus, elit est vehicula odio, a congue velit ante vitae lectus. Duis nisl neque, blandit quis condimentum nec, hendrerit id lorem.

Sed sagittis nulla ac lectus condimentum, pellentesque fermentum odio varius. Fusce ut ligula sed nulla posuere sollicitudin eget et urna. Aliquam condimentum neque rhoncus lacus accumsan pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultrices a ante vitae porta. Donec id augue in magna semper fermentum et sit amet justo. Morbi molestie et quam vitae consequat.

Image centered - (aligncenter)

Form Elements