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
: 500font-family
: "Helvetica Neue", Helvetica, Arial, sans-serifcolor
: #212529;line-height
: 1.5margin-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.5remfont-weight
: 500line-height
: 1.2
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
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
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
: 300line-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
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.25remfont-weight
: 300
This is normal paragraph.
This paragraph stands out.
Exmple: Bootstrap lead class
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
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
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
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
- Typography incluse certain global settings, headings, texts etc.
- You can use
.h1
to.h6
class to achieve same font properties as ofh1
toh6
elements. - To stand out a paragraph used
.lead
class. - Use
.list-unstyled
class to remove bullets and margin from the list.