Examples

Layouts


Layout with Jumbotron

This layout uses the Jumbotron component along with a header and footer, as well as the grid system and containers.

View

Layout with Cards

This layout uses Card and Jumbotron components, as well as the grid system and fluid containers for the header and footer.

View

Accessible Flyout Menu


Typography


<h1>

Heading 1

<h2>

Heading 2

<h3>

Heading 3

<h4>

Heading 4

<h5>
Heading 5
<h6>
Heading 6
<p>

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

<blockquote class="blockquote">

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

<p class="blockquote-footer">
<p class="lead">

Yale’s reach is both local and international. It partners with its hometown of New Haven, Connecticut to strengthen the city’s community and economy. And it engages with people and institutions across the globe in the quest to promote cultural understanding, improve the human condition, delve more deeply into the secrets of the universe, and train the next generation of world leaders.

<a>

This is how we style links by default in body text

<small>

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

<strong>

The following is rendered as bold text.

<em>

The following is rendered as italicized text.

<abbr>

An abbreviation of the word attribute is attr.

Utilities


Text Emphasis

<p class="text-yale">

This is text that is styled with the text-yale class and this is an example link to see

<p class="text-primary">

This is text that is styled with the text-primary class and this is an example link to see

<p class="text-secondary">

This is text that is styled with the text-secondary class and this is an example link to see

<p class="text-success">

This is text that is styled with the text-success class and this is an example link to see

<p class="text-info">

This is text that is styled with the text-info class and this is an example link to see

<p class="text-warning">

This is text that is styled with the text-warning class and this is an example link to see

<p class="text-danger">

This is text that is styled with the text-danger class and this is an example link to see

<p class="text-light">

This is text that is styled with the text-light class and this is an example link to see

<p class="text-dark">

This is text that is styled with the text-dark class and this is an example link to see

Text Background

<p class="bg-yale">

This is text that is styled with the bg-yale class this is an example link to see

<p class="bg-primary">

This is text that is styled with the bg-primary class this is an example link to see

<p class="bg-secondary">

This is text that is styled with the bg-secondary class this is an example link to see

<p class="bg-success">

This is text that is styled with the bg-success class this is an example link to see

<p class="bg-info">

This is text that is styled with the bg-info class this is an example link to see

<p class="bg-warning">

This is text that is styled with the bg-warning class this is an example link to see

<p class="bg-danger">

This is text that is styled with the bg-danger class this is an example link to see

<p class="bg-light">

This is text that is styled with the bg-light class this is an example link to see

<p class="bg-dark">

This is text that is styled with the bg-dark class this is an example link to see

Other Utilities

<p class="text-monospace">

This is text that is styled with the text-monospace class and this is an example link to see

<p class="text-font-family-sans-serif">

This is text that is styled with the text-font-family-sans-serif class and this is an example link to see

<p class="text-font-family-sans-light">

This is text that is styled with the text-font-family-sans-light class and this is an example link to see

<p class="text-font-family-sans-medium">

This is text that is styled with the text-font-family-sans-medium class and this is an example link to see

<p class="text-font-family-serif">

This is text that is styled with the text-font-family-serif class and this is an example link to see

<p class="text-lowercase">

This is text that is styled with the text-lowercase class and this is an example link to see

<p class="text-uppercase">

This is text that is styled with the text-uppercase class and this is an example link to see

<p class="text-capitalize">

This is text that is styled with the text-capitalize class and this is an example link to see

<p class="text-muted">

This is text that is styled with the text-muted class and this is an example link to see

Code


For example, <section> should be wrapped as inline.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

y = mx + b

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

This text is meant to be treated as sample output from a computer program.

Forms


We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Success! You've done it.
Sorry, that username's taken. Try another?
$
.00

Custom Forms


Custon Radio Buttons
Inline Custom Radio Buttons

Buttons


Tables


<table>
Normal Table
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content
<table class="table-borderless">
Borderless Table
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content
<table class="yale-table">
Division Male Female Total %International*
Yale College 2,775 2,678 5,453 10%
Special (Degree & Non-Degree) 18 6 24 4%
Graduate School of Arts & Sciences 1,552 1,374 2,926 34%

Breadcrumbs


<ol class="breadcrumb"> <li class="breadcrumb-item active">
<img> Responsive image
... ...

Modal Dialogs


List Groups


Default List Groups

<ul class="list-group"> <li class="list-group-item">
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group with Active Items

<ul class="list-group"> <li class="list-group-item active">
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group with Disabled Items

<ul class="list-group"> <li class="list-group-item disabled">
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group with Links and Buttons

<ul class="list-group"> <li class="list-group-item list-group-item-action">

Alerts


<div class="alert alert-yale">

Alert Heading

This is an alert style based on the yale theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-primary">

Alert Heading

This is an alert style based on the primary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-secondary">

Alert Heading

This is an alert style based on the secondary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-success">

Alert Heading

This is an alert style based on the success theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-info">

Alert Heading

This is an alert style based on the info theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-warning">

Alert Heading

This is an alert style based on the warning theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-danger">

Alert Heading

This is an alert style based on the danger theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-light">

Alert Heading

This is an alert style based on the light theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

<div class="alert alert-dark">

Alert Heading

This is an alert style based on the dark theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Badges


Primary Secondary Success Danger Warning Info Light Dark Yale

Primary Secondary Success Danger Warning Info Light Dark Yale

Primary Secondary Success Danger Warning Info Light Dark Yale

Cards


...
Card title

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

Go somewhere
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
Featured
Special title treatment

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

Go somewhere
Quote

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

Someone famous in Source Title
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
...
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 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 title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card title

This is a longer 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 title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Dropdown


Jumbotron


Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Progress