Tutorials Tonight's Logo
Follow Us

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:


Bootstrap Headings

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

while font-size of all headings are different.

h1 heading (font-size: 2.5rem = 40px)

h2 heading (font-size: 2rem = 32px)

h3 heading (font-size: 1.75rem = 28px)

h4 heading (font-size: 1.5rem = 24px)

h5 heading (font-size: 1.25rem = 20px)

h6 heading (font-size: 1rem = 16px)

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
▶ Run the code

Bootstrap provide .h1 to .h6 classes which gives HTML element same CSS property as of heading h1 to 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>
▶ Run the code

Display Headings

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:

Display 1 (font-size: 6rem = 96px)

Display 2 (font-size: 5.5rem = 88px)

Display 3 (font-size: 4.5rem = 72px)

Display 4 (font-size: 3.5rem = 56px)

<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>
▶ Run the code


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:

This is normal paragraph.

This paragraph stands out.

<p>This is normal paragraph.</p>
<p class="lead">This paragraph stands out.</p>
▶ Run the code

Text Formatting In Bootstrap

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

mark tag highlights text.

del tag used to delete text.

s tag is used for text which is no longer accurate.

This line is additional.

This is underlined.

small tag is used for fine prints.

strong tag is used to bold text.

em tag is used fot italicize text.

<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>
▶ Run the code

List Unstyled In Bootstrap

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.

  • Books
  • Devices
  • Laptop
  • Food
    • Milk
    • Bread
    • Tea
  • Bike
<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>
▶ Run the code

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.

  • Books
  • Devices
  • Laptop
  • Food
  • Bike
  • Book
<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>
▶ Run the code

Bootstrap Abbreviation

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

HTML is used to create structure of webpage.

CSS is used to style website.

<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>
▶ Run the code

Points to remember:

  1. Typography incluse certain global settings, headings, texts etc.
  2. You can use .h1 to .h6 class to achieve same font properties as of h1 to h6 elements.
  3. To stand out a paragraph used .lead class.
  4. Use .list-unstyled class to remove bullets and margin from the list.

More Learning

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

Bootstrap 4 Jumbotron

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.