Typography

Headings

All HTML headings, <h1> through <h6>, are available.

            
              <h1>h1. heading</h1>
              <h2>h2. heading</h2>
              <h3>h3. heading</h3>
              <h4>h4. heading</h4>
              <h5>h5. heading</h5>
              <h6>h6. heading</h6>
            
          

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

            
              <p class="h1">h1. heading</p>
              <p class="h2">h2. heading</p>
              <p class="h3">h3. heading</p>
              <p class="h4">h4. heading</p>
              <p class="h5">h5. heading</p>
              <p class="h6">h6. heading</p>
            
          

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

            
              <h1 class="display-1">Display 1</h1>
              <h1 class="display-2">Display 2</h1>
              <h1 class="display-3">Display 3</h1>
              <h1 class="display-4">Display 4</h1>
              <h1 class="display-5">Display 5</h1>
              <h1 class="display-6">Display 6</h1>
            
          

Lead

Make a paragraph stand out by adding .lead.

            
              <p class="lead text-muted">
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
              </p>
            
          

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote u-blockquote"> around any HTML as the quote.

            
              <blockquote class="blockquote u-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer class="blockquote-footer">Quote by <cite title="Source Title">Ari Budin</cite></footer>
              </blockquote>
            
          

Dropcaps

Add a dropcaps for make big font in start your article.

            
              <p><span class="dropcaps">A</span>enean sodales lacus est, at ultricies augue ele ifend sit amet. 
              everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. 
              Orci varius natoque penatibus et magnis dis parturient montes.</p>
            
          

RFS

RFS resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.

What is RFS?

Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

See the example below for source Sass and compiled CSS.

            
              .title {
							  @include font-size(4rem);
							}
            
          

Css will generate like this

            
              .title {
							  font-size: calc(1.525rem + 3.3vw);
							}

							@media (max-width: 1200px) {
							  .title {
							    font-size: 4rem;
							  }
							}
            
          

For more information about RFS read in here