Software Development

Bootstrap 5 Typography – GeeksforGeeks

Bootstrap 5 Typography – GeeksforGeeks
Written by admin


Enhance Article

Save Article

Like Article

Enhance Article

Save Article

Bootstrap 5 Typography is a characteristic of Bootstrap for styling and formatting textual content content material. It’s used to create custom-made headings, inline subheadings, lists, and paragraphs, align, add extra design-oriented font types, and rather more. Bootstrap assist world settings for the font stack, Headings and Hyperlink types for use within the net app for each kind of OS and Gadget to ship the most effective consumer interface.

Bootstrap 5 Typography:

  • Headings: For heading, courses can be found from [.h1 to .h6]. Heading courses assist us create a font-style-like heading with out using HTML heading tags.
  • Show headings: Show headings are used to create a heading if it has a bigger (bigger font dimension and lighter font weight than a daily heading. Show heading courses are from .display-1 to .display-6.
  • Lead: For making a paragraph that standouts from different paragraphs .lead class is used.
  • Inline textual content parts: The inline text-elements present a technique to model the widespread HTML parts.For ex: If we wish to spotlight a textual content within the paragraph we are able to use <mark> tag.
  • Textual content utilities: The textual content utilities are used for altering textual content alignment, model, weight, line-height, and different decorations.
  • Blockquotes: The <blockquote> tag in HTML is used to show lengthy quotations (a bit that’s quoted from one other supply). It modifications the alignment to make it distinctive from others. It comprises each opening and shutting tags.
  •  Lists: This technique is principally used to model the listing added on the webpage. By utilizing this technique we are able to take away the pre-defined types on the lists and add new types.

Syntax:

<p class="Typography courses">
    ...
</p>

Instance 1:  Allow us to see an instance of Typography Headings.

HTML

<!DOCTYPE html>

<html>

<head>

    

    <hyperlink rel="stylesheet" 

          href=

          crossorigin="nameless">

</head>

  

<physique class="m-5">

    <h1 class="text-success"

        GeeksforGeeks

    </h1>

    <h3>Bootstrap 5 Typography</h3>

  

    <div class="h6">GeeksforGeeks</div>

    <div class="h5">GeeksforGeeks</div>

    <div class="h4">GeeksforGeeks</div>

    <div class="h3">GeeksforGeeks</div>

    <div class="h2">GeeksforGeeks</div>

    <div class="h1">GeeksforGeeks</div>

</physique>

</html>

Output:

 

Instance 2: Allow us to see an instance of show heading courses.

HTML

<!DOCTYPE html>

<html>

<head>

    

    <hyperlink rel="stylesheet" 

          href=

          crossorigin="nameless">

</head>

  

<physique class="m-5">

    <h1 class="text-success"

        GeeksforGeeks 

    </h1>

    <h3>Bootstrap5 Typography</h3>

    <p class="display-5">GFG 5</p>

    <p class="display-4">GFG 4</p>

    <p class="display-3">GFG 3</p>

    <p class="display-2">GFG 2</p>

    <p class="display-1">GFG 1</p>

</physique>

</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/content material/typography/

About the author

admin

Leave a Comment