Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 177

Bootstrap 4 Typography

Bootstrap 4 default font size is 16px, with a line-height of 1.6. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have a bottom margin of 1rem (16px).

<div class="container">
  <h1>h1 Bootstrap heading (40px)</h1>
  <h2>h2 Bootstrap heading (32px)</h2>
  <h3>h3 Bootstrap heading (28px)</h3>
  <h4>h4 Bootstrap heading (24px)</h4>
  <h5>h5 Bootstrap heading (20px)</h5>
  <h6>h6 Bootstrap heading (16px)</h6>
</div>

HTML small tag

In Bootstrap 4, the HTML small element is used to create a lighter, secondary text in any heading. Its font size is 80%, font weight 400.

<div class="container">
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

HTML abbr tag

The HTML abbr tag is used to create abbreviation or acronym. Bootstrap will style the HTML <abbr> tag with a dotted bottom border and help cursor.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> 
Class Description
font-weight-bold
font-weight-normal
font-weight-light
font-italic
To make the text Bold
To make text Normal
Light weight text
To make text italic
small Indicates smaller text (set to 80% of the size of the parent)
text-left
text-center
text-right
text-justify
Indicates left-aligned text
Indicates center-aligned text
Indicates right-aligned text
Indicates justified text
text-lowercase
text-uppercase
Indicates lowercased text
Indicates uppercased text
text-nowrap
text-capitalize
Indicates capitalized text
Text will not break into multiple lines when resize the browser.
d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none
Display none on all devices
Display none on small device (≥576px)
Display none on medium device (≥768px)
Display none on large device (≥992px)
Display none on extra large device (≥1200px).
d-block
d-sm-block
d-md-block
d-lg-block
d-xl-block
Visible on all devices
Visible on small device (≥576px)
Visible on medium device (≥768px)
Visible on large device (≥992px)
Visible on extra large device (≥1200px).
offset-1 to offset-11
offset-sm-0 to offset-sm-11
offset-md-0 to offset-md-11
offset-lg-0 to offset-lg-11
offset-xl-0 to offset-xl-11
Offsets are used for spacing elements in the responsive grid.
Offsets are used for spacing elements in the small device.
Offsets are used for spacing elements in the medium device.
Offsets are used for spacing elements in the large device.
Offsets are used for spacing elements in the extra large device.
m-0 to m-5
mt-0 to mt-5
mr-0 to mr-5
mb-0 to mb-5
ml-0 to ml-5
mx-0 to mx-5
my-0 to my-5
6 classes to define margins on all 4 sides.
mt is use to define margin from top side
mr is use to define margin from right side
mb is use to define margin from bottom side
ml is use to define margin from left side
mx is use to define margin for left and right side
my is use to define margin for top and bottom side
p-0 to p-5
pt-0 to pt-5
pr-0 to pr-5
pb-0 to pb-5
pl-0 to pl-5
px-0 to px-5
py-0 to py-5
6 classes to define paddings on all 4 sides.
pt is use to define padding from top side
pr is use to define padding from right side
pb is use to define padding from bottom side
pl is use to define padding from left side
px is use to define padding for left and right side
my is use to define margin for top and bottom side
display-1
display-2
display-3
display-4
For larger and stand out heading.
Updated: 02-Apr-20