Typography

Headings

All HTML headings, <h1> through <h6>, are available.

Code Font-Size Heading
<h1></h1>

2.5rem

Heading 1 (MEGA)

<h2></h2>

2rem

Heading 2 (XL)

<h3></h3>

1.75rem

Heading 3 (LARGE)

<h4></h4>

1.5rem

Heading 4 (MEDIUM)

<h5></h5>
1.25rem
Heading 5 (SMALL)
<h6></h6>
1rem
Heading 6

Colored headings

All HTML headings, <h1> through <h6>, are available.

Code Heading
<h1></h1>

Heading 1 Sub Heading

<h2></h2>

Heading 1 Sub Heading

<h3></h3>

Heading 1 Sub Heading

<h4></h4>

Heading 1 Sub Heading

<h5></h5>
Heading 1 Sub Heading
<h6></h6>
Heading 1 Sub Heading

Font weight

Using f-w-* class, you can change the font weight.

You can set bolder font weight Heading 1 using f-w-700

You can set bold font weight Heading 2 using f-w-600

You can set medium font weight Heading 3 using f-w-500

You can set normal font weight Heading 4 using f-w-400

You can set light font weight Heading 5 using f-w-300

Listing typography

All typography list:- <ul>,<ol> & <dl>

Unorder list
  • One who looks on the bright side of things
  • One who does something not professionally but for pleasure
  • A person who knows everything
  • A handwriting that cannot be read
  • One who looks on the bright side of things
  • A sound that cannot be heard
  • The study of ancient writing and scriptures
  • The study of rocks and soil
  • creates more sophisticated capabilities for a web page to use coding language.
  • Maintaining contact and communicating clearly are also essential. possess abilities for a designer
Order list
  1. UI Kits
  2. Bonus Ui
  3. Animations
    1. Typography
    2. Avatars
    3. Grid
    4. Tag & pills
    5. Alert
  4. Dropdown
  5. Tabs
  6. Accordion
Description list
The way to get started is to quit talking and begin doing.
-Walt Disney
Life is what happens when you're busy making other plans.
-John Lennon
Whoever is happy will make others happy too.
-Anne Frank
Life is either a daring adventure or nothing at all.
-Helen Keller
The purpose of our lives is to be happy.
-Dalai Lama

Display headings

Traditional heading elements are designed to work best in the meat 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

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Text color

You can Give text color by using txt-* class

This is Primary text You can archive this adding.txt-primary class

This is Secondary text You can archive this adding.txt-secondary class

This is Success text You can archive this adding.txt-success class

This is Info text You can archive this adding.txt-info class

This is Warning text You can archive this adding.txt-warning class

This is Danger text You can archive this adding.txt-danger class

This is Dark text You can archive this adding.txt-dark class

This is Primary text You can archive this adding.txt-primary class

Blockquotes

The <blockquote> tag specifies a section that is quoted from another source.

The only impossible journey is the one you never begin.

Tony Robbins

In this life we cannot do great things. We can only do small things with great love.

Mother Teresa

Live in the sunshine, swim the sea, drink the wild air.

Ralph Waldo Emerson