
You will see default typography default settings in Bootstrap 4
Bootstrap 4 uses a default font-size
of 16px, and its line-height
is 1.5.
The default font-family
is “Helvetica Neue”, Helvetica, Arial, sans-serif.
In addition, all <p>
elements have margin-top: 0
and margin-bottom: 1rem
(16px by default).
<h1> – <h6>
Bootstrap 4 styles HTML headings (<h1>
to <h6>
) with a bolder font-weight and an increased font-size:
Example
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Display Headings
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1
, .display-2
, .display-3
, .display-4
Example
Display 1
Display 2
Display 3
Display 4
<small>
In Bootstrap 4 the HTML <small>
element is used to create a lighter, secondary text in any heading:
Example
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap 4 will style the HTML <mark>
element with a yellow background color and some padding:
Example
Use the mark element to highlight text.
<abbr>
Bootstrap 4 will style the HTML <abbr>
element with a dotted border bottom:
Example
The WHO was founded in 1948.
<blockquote>
Add the .blockquote
class to a <blockquote>
when quoting blocks of content from another source:
Example
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. From WWF's website
<dl>
Bootstrap 4 will style the HTML <dl>
element in the following way:
Example
Coffee - black hot drink Milk - white cold drink
<code>
Bootstrap 4 will style the HTML <code>
element in the following way:
Example
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap 4 will style the HTML <kbd>
element in the following way:
Example
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap 4 will style the HTML <pre>
element in the following way:
Example
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Leave a Reply