Default Bootstrap 4 settings

Default font size 16px, and its line height is 1.5.

The default font family is "Helvetica Neue", Helvetica, Arial, sans-serif.

In addition, all <p></pelements have margin-top: 0 and margin-bottom: 1rem.


Bootstrap heading <h1> - <h6>

All heading elements and paragraphs are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.


<div class="container">
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>
        </div>

output: 

Bootstrap heading


Display headings

display heading—a larger, slightly more opinionated heading style.

 <div class="container">
      <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>
 </div>


Output:




.mark and .small classes

.mark and .small classes are also available to apply the same styles as <mark> and <small>

 <div class="container">
      <p>You can use the mark tag to <span class="mark">highlight</span> text.</p>
      <p><span class="small">This line of text is meant to be treated as fine print.</span></p>
  </div>

output:



Abbreviations <abbr>

Bootstrap 4 will style abbr with dotted border:

  <abbr title="attribute">Google LLC is an American multinational technology</abbr>

Output: