The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about native font stacks
font-family
for each OS and device.$font-family-base
, $font-size-base
, and $line-height-base
attributes as our typographic base applied to the <body>
.$link-color
and apply link underlines
only on :hover
.$body-bg
to set a background-color
on the <body>
(#fff
by default).
All HTML headings, <h1>
through <h6>
, are available.
.h1
through .h6
classes are also available, for when you want to match the font
styling of a heading.
Preview | Font Size |
---|---|
H6 Heading |
1rem |
H5 Heading |
1.3rem |
H4 Heading |
1.47rem |
H3 Heading |
1.73rem |
H2 Heading |
2.13rem |
H1 Heading |
2.53rem |
All HTML headings are available with light and bold font-weight. Use .text-bold-400
for
light heading and .text-bold-600
for bold headings along with heading tags or classes.
Light headings | Bold headings |
---|---|
Heading 6 |
Heading 6 |
Heading 5 |
Heading 5 |
Heading 4 |
Heading 4 |
Heading 3 |
Heading 3 |
Heading 2 |
Heading 2 |
Heading 1 |
Heading 1 |
Use the included utility classes to recreate the small secondary heading text.
Display heading Secondary text |
Display heading Secondary text |
Display heading Secondary text |
Display heading Secondary text |
Display heading Secondary text |
Display heading Secondary text |
Heading elements are also changed with different color options.
Use .{colorName}
class
with
heading elements.
Display heading |
Display heading |
Display heading |
Display heading |
Display heading |
Display heading |
Traditional heading elements are designed to work best in the meet of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Display 1 |
Display 2 |
Display 3 |
Display 4 |
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any
HTML as the quote.
Left aligned basic blockquotes. Use text utilities classes like .text-center / .text-right
as needed to change the alignment of your blockquote.
Design is not just what it looks like and feels like. Design is how it works.
Add a <footer class="blockquote-footer">
for identifying the
source. Wrap the name of the source work in <cite>
.
Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me.
Add a .border-{left/right}-{color} .border-{left/right}-3
helper
classes, where color can be any color from Frest Admin color palette.
Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
Blockquotes with avatar. it use Media Object. You can customize image type, border alignment & style.
Sometimes life is going to hit you in the head with a brick. Don't lose faith.
Blockquotes with avatar rounded image example
Sometimes life is going to hit you in the head with a brick. Don't lose faith.
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any
HTML as the quote.
Use class .list-unstyled
for Lists Unstyled. It remove the default list-style
and left margin on list items (immediate children only).
This only applies to immediate children list items, meaning you will need to add the
class for any nested lists as well.
List of items in which the order does not explicitly matter. Use .list-style-circle
or
.list-style-square
class in unordered list to add circle or square bullet points.
List of items in which the order does explicitly matter. Use <ol type="1|a|A|i|I">
,
The type attribute specifies the kind of marker to use in the list.
list of terms with icons, use .list-style-icons
class. You can use any icon from Frest
Admin icon types.
Remove a list’s bullets and apply some light margin
with a combination of two classes,
.list-inline
and .list-inline-item
.
Use inline numbers, alphabet, icons etc... for ordered Inline List.
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins).
For longer terms, you can optionally add a .text-truncate
class to
truncate the text with an ellipsis.
Description lists with right aligned text in <dt>
tag using .text-right