BOOTSTRAP 4 TYPOGRAPHY

Typography of Bootstrap includes bootstrap's global settings, headings, body text, list, abbreviations, etc.

Bootstrap 4 Global Settings

To get a start we must select some basic value of CSS parameter, bootstrap typography is all about these default properties and values. Bootstrap sets few default global settings for font-size, link style, display, margin, line-heights, font-family, etc.

Few basic global settings includes:

• font-size: 1rem ( 16px )
• font-weight: 500
• font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
• color: #212529;
• line-height: 1.5
• margin-bottom (<p>): 1rem (16px)
• margin-bottom ( h1-h6 ): 0.5rem ( 8px )
• border-collapse (table): collapse

Bootstrap Headings

Bootstrap 4 sets some CSS styling on HTML headings ( <h1> to <h6> ) with following CSS property values:

• margin-bottom: 0.5rem
• font-weight: 500
• line-height: 1.2

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

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

Bootstrap 4 introduces heading to stand out from traditional heading elements. Display headings are a larger and less font-weight.

These are 4 display classes to choose from .display-1, .display-2, .display-3, and .display-4 with following CSS properties:

• font-weight: 300
• line-height: 1.2

<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>

Stand Out A Paragraph

Using bootstrap you can make a paragraph look special. Bootstrap provides .lead class for a paragraph to standout. Property of lead class:

• font-size: 1.25rem
• font-weight: 300

<p>This is normal paragraph.</p>
<p class="lead">This paragraph stands out.</p>

Text Formatting In Bootstrap

Using Bootstrap you can format text as usual. Some of text formatting are shown below.

<p>mark tag <mark>highlights</mark> text.</p>
<p>del tag used to <del>delete</del> text.</p>
<p>s tag is used for text which is <s>no longer accurate</s>.</p>
<p><ins>This line is additional.</ins></p>
<p>This is <u>underlined</u>.</p>
<p><small>small tag is used for fine prints.</small></p>
<p><strong>strong tag is used to bold text.</strong></p>
<p><em>em tag is used fot italicize text.</em></p>

Using bootstrap you remove list-style and left margin on list items using .list-unstyled property.

This is effective only on immediate children only, any nested list will remain uneffected.

<ul class="list-unstyled">
    <li>Books</li>
    <li>Devices</li>
    <li>Laptop</li>
    <li>Food</li>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Tea</li>
    </ul>
    <li>Bike</li>
  </ul>

List Items Inline

The list items are by default block item, each items flows to different line but using .list-inline and .list-inline-item classes we can make list items inline with little margin to them.

<ul class="list-inline">
  <li class="list-inline-item">Books</li>
  <li class="list-inline-item">Devices</li>
  <li class="list-inline-item">Laptop</li>
  <li class="list-inline-item">Food</li>
  <li class="list-inline-item">Bike</li>
  <li class="list-inline-item">Book</li>
</ul>

Bootstrap Abbreviation

Bootstrap adds additional help cursor to HTML's <abbr> element.

<p><abbr title="HyperText Markup Language">HTML</abbr> is used to create structure of webpage.</p>
<p><abbr title="Cascading Style Sheet">CSS</abbr> is used to style website.</p>

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.