Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn Bootstrap 4
  • Bootstrap 4 Typography

Topics

  • Bootstrap 4 Cards
  • Bootstrap 4 List Groups
  • Bootstrap 4 Breadcrumbs
  • Bootstrap 4 Pagination
  • Bootstrap 4 Progress Bars
  • Bootstrap 4 Spinners
  • Bootstrap 4 Badges
  • Bootstrap 4 Button Group
  • Bootstrap 4 Buttons
  • Bootstrap 4 Alerts
  • Bootstrap 4 Figures
  • Bootstrap 4 Jumbotron
  • Bootstrap 4 Tables
  • Bootstrap 4 Images
  • Bootstrap 4 Colors
  • Bootstrap 4 Typography
  • Bootstrap 4 Grid System
  • Bootstrap 3 Vs Bootstrap 4
  • Bootstrap 4 Layout
  • Bootstrap versions
  • Bootstrap Introduction

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

Bootstrap 4 Typography

Typography is a feature of Bootstrap for styling and formatting the text content like headings, paragraphs, blockquotes, etc. Now learn each one of these typography classes in the following.

Headings:

You can define all HTML headings, <h1> to <h6> in the same way you define in simple HTML document.

Example:

<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>
Try it
By using .h1 to h6 bootstrap classes, you can match the font styling of a heading without using the associated HTML element.

Example:

<p class="h1"> h1 Bootstrap heading </p>
<p class="h2"> h2 Bootstrap heading </p>
<p class="h3"> h3 Bootstrap heading </p>
<p class="h4"> h4 Bootstrap heading </p>
<p class="h5"> h5 Bootstrap heading </p>
<p class="h6"> h6 Bootstrap heading </p>
Try it

Sub-Headings:

You can create a sub-heading or secondary text by placing text inside a <small> element within the heading or add .small class.

Example:

<h1> h1 Bootstrap heading <small> Sub-heading </small> </h1>
<h2> h2 Bootstrap heading <small> Sub-heading </small> </h2>
<h3> h3 Bootstrap heading <small> Sub-heading </small> </h3>
<h4> h4 Bootstrap heading <small> Sub-heading </small> </h4>
<h5> h5 Bootstrap heading <small> Sub-heading </small> </h5>
<h6> h6 Bootstrap heading <small> Sub-heading </small> </h6>
Try it

Display Headings:

Display headings are designed to create better headings i.e. larger font-size and lighter font-weight. There are four classes exists in display headings which are .display-1, .display-2, .display-3, and .display-4.

Example:

<h1 class="display-1"> h1 Bootstrap heading </h1>
<h1 class="display-2"> h2 Bootstrap heading </h1>
<h1 class="display-3"> h3 Bootstrap heading </h1>
<h1 class="display-4"> h4 Bootstrap heading </h1>
Try it

Lead Text:

By using .lead class, you can make a paragraph stand out such as larger font size, lighter weight, and taller line-height.

Example:

<p> This is a normal paragraph in Bootstrap. </p>
<p class="lead"> This is paragraph stands out in Bootstrap. </p>
Try it

Marked Text:

The HTML <mark> element represents text as marked or highlighted for reference purposes.

Example:

<p>This paragraph has <mark> mark text </mark>.</p>
Try it

Abbreviations:

The HTML <abbr> represents an abbreviation or acronym. The title attribute can be used to provide an expansion of the abbreviation. In Bootstrap, <abbr> element with a light dotted bottom border and a help cursor on hover.

Example:

<abbr title = "World Wide Web"> WWW </abbr>
Try it

Blockquotes:

To apply Bootstrap’s styles to the <blockquote> element, use the .blockquote class. The .blockquote-footer class is used to add the footer details for identifying the source of the quote.

Example:

<div class="container">
<blockquote class="blockquote">
<p> This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. </p>
<footer class="blockquote-footer"> by Albert Einstein </footer>
</blockquote>
</div>
Try it

Lists:

The bootstrap supports ordered lists, unordered lists, and definition lists. It applies various styles and has several classes specifically for lists.

Lists — Unstyled

By using .list-unstyled class, you can render lists without their default list-style and left-margin.

Example:

<ul class="list-unstyled">
<li> List1 </li>
<li> List2 </li>
<li> List3 </li>
<li> List4 </li>
</ul>
Try it

Lists — Inline

By using .list-inline and .list-inline-item classes, you can render lists as display: inline-block.

Example:

<ul class="list-inline">
<li class="list-inline-item"> List1 </li>
<li class="list-inline-item"> List2 </li>
<li class="list-inline-item"> List3 </li>
<li class="list-inline-item"> List4 </li>
</ul>
Try it

Definition List

Example:

<dl>
<dt> Description 1 </dt>
<dd> Item 1 </dd>
<dt> Description 2 </dt>
<dd> Item 2 </dd>
</dl>
Try it

Horizontal Definition List

By using .dl-horizontal class, you can make the definition list horizontally.

Example:

<dl class = "dl-horizontal">
<dt> Description 1 </dt>
<dd> Item 1 </dd>
<dt> Description 2 </dt>
<dd> Item 2 </dd>
</dl>
Try it

Code:

In Bootstrap, the <code> element is worked as follows:

Example:

This <code> bootstrap 4 </code> tutorial is very useful.
Try it

Preformatted Text:

Example:

<pre>

This content has been

formatted

using the HTML

pre tag.

</pre>
Try it

Keyboard Input:

In Bootstrap, the <kbd> element is worked like this:

Example:

<p> Use <kbd> ctrl + s </kbd> to open the save dialog box. </p>
Try it

Variables:

In Bootstrap, the <var> element is worked like this:

Example:

<var> E </var> = <var> m </var> <var> c </var> <sup> 2 </sup>
Try it

Other Typography Classes:

Class Description
.text-left This class is used to set the left alignment of text.
.text-right This class is used to set the right alignment of text.
.text-center This class is used to set the center alignment of text.
.font-weight-bold This class is used to sets the font weight to bold. It is used to display the importance of text.
.font-weight-bolder This class is used to sets the font weight to deep bold. It is used to display the importance of text.
.font-italic This class is used to sets the font style italic.
.text-uppercase This class is used to transform text into uppercase.
.text-lowercase This class is used to transform text into lowercase.
.text-capitalize This class is used to transform text to capitalize first letter of each word.
.text-nowrap This class Indicates no wrap text.
.text-reset By using this class resets the color of a text or a link.
.text-justify Indicates justified text.
.text-decoration-none Removes the underline from a link.
.font-weight-light Light weight text.
.font-weight-lighter Lighter weight text.
.initialism Displays the text inside an element in a slightly smaller font size.
.pre-scrollable This class makes a <pre> element scrollable

Post navigation

Bootstrap 4 Grid System
Bootstrap 4 Colors

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok