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

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)

Exmple: Bootstrap Heading

Run the code

Bootstrap provide .h1 to .h6 classes which gives HTML element same CSS property as of heading h1 to h6.

Exmple: Bootstrap .h1 to .h6 classes

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:

font-weight: 300
line-height: 1.2

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)

Exmple: Bootstrap display classes

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:

font-size: 1.25rem
font-weight: 300

This is normal paragraph.

This paragraph stands out.

Exmple: Bootstrap lead class

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.

Exmple: Bootstrap text formatting

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

Exmple:List Unstyle

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

Exmple:List Unstyle

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.

Exmple

Run the code

Points to remember:

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

Bootstrap 4 Jumbotron

Previous Next