Headings

.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

Header h1 class = h1

.h1 { font-size: 2.5rem; }

Header h2 class = h2

.h2 { font-size: 2rem; }

Header h3 class = h3

.h3 { font-size: 1.75rem; }

Header h4 class = h4

.h4 { font-size: 1.5rem; }

Header h5 class = h5

.h5 { font-size: 1.25rem; }

Header h6 class = h6

.h6 { font-size: 1rem; }

Display heading

Display 1 class = display-1

.display-1 { font-size: 6rem }

Display 2 class = display-2

font-size: 5.5rem;

Display 3 class = display-3

font-size: 4.5rem;

Display 4 class = display-4

font-size: 3.5rem;

Paragraphs

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus dolorum ut voluptates possimus necessitatibus ipsa? Facilis, delectus sit vero dolor saepe laborum doloribus ut error asperiores animi quidem incidunt quos.

 p {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1rem;
}

class = lead
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia delectus facilis eaque in, debitis mollitia qui blanditiis, sequi veniam quod corrupti magni rerum? Expedita cumque at unde eos quasi animi.

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

Inline text elements

You can use the mark tag to highlight text.

.mark, mark {
  padding: .2em;
  background-color: #fcf8e3;
}

del This line of text is meant to be treated as deleted text.

s This line of text is meant to be treated as no longer accurate.

ins This line of text is meant to be treated as an addition to the document.

u This line of text will render as underlined

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

.small, small {
  font-size: 80%;
  font-weight: 400;
}

strong This line rendered as bold text.

b, strong {
  font-weight: bolder;
}

em This line rendered as italicized text.

Abbreviations

attr

<abbr title="attribute">attr</attr>

abbr[data-original-title],
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

HTML

<abbr title="HyperText Markup Language" class="initialism">
  HTML
</abbr>

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

Blockquotes

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.blockquote {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

Blockquote with footer

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

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <footer class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "\2014\00A0";
}

Lists

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Eget porttitor lorem

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

List unstyled

<ul class="list-unstyled"></ul>

• This list
• is
• unstyled list (level 1)
• It has only
• margin bottom
• Next list is styled
  • If you want it
  • also unstyled.
  • Add class list-unstyled
  • to ul element in this level.
• Faucibus porta lacus fringilla vel
• Eget porttitor lorem

List inline

• Inline item
• Inline item

<ul class="list-inline"></ul>
  <li class="list-inline-item">Inline item<li>
  <li class="list-inline-item">Inline item<li>
</ul>

.list-inline-item {
  display: inline-block;
}