Open In App

Explain the Typography and links in Bootstrap?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the Typography & the Links In Bootstrap, along with understanding their basic implementation through the examples.

Bootstrap Typography facilitates the different styling and formatting of text content, along with providing customization which includes customized headings, inline subheadings, lists, and paragraphs, aligning, adding more design-oriented font styles, & so on. It also supports the global settings for the font stack, Headings and Link styles to be used in the web app for every type of OS and Device to deliver the best user interface. There are various things that Bootstrap provides to enhance the Typography styles that make a better user experience.

Syntax:

<element class="Typography classes">
    ...
</element>

Example 1: This example describes the basic usage of Bootstrap Typography.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
          crossorigin="anonymous">
</head>
  
<body class="m-5">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap Typography</h3>
    <p class="display-5">
          GeeksforGeeks Learning!
      </p>
    <p class="display-4 text-muted">
          This is text muted class
      </p>
    <p class="initialism">
          This is initialism class
      </p>
    <p class="blockquote">
          This is blockquote class
      </p>
</body>
  
</html>


Output:

 

Bootstrap Colored links are generally utilized to include colors in the link element. It helps to highlight the link element with hover states, depending on the class used to add the color. For this, we need to set the colored links, & use the classes of utilities built on our theme colors. To make different color links, we will use the .link-* class and add CSS styles to it, in order to customize the colorized links. In addition to this, these classes have a :hover & :focus state.

Syntax:

<a href="#" class="link-*">
    link
</a>

Example 2: This example describes the basic usage of Bootstrap Colored links.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap Colored links
    </title>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
                GeeksforGeeks
        </h1>
        <h3>Bootstrap 5 Colored links</h3>
        <h4>
            <a href="#" class="link-primary">
                Primary Color Link
            </a><br>
            <a href="#" class="link-secondary">
                Secondary Color Link
            </a><br>
            <a href="#" class="link-success">
                Success Color Link
            </a><br>
            <a href="#" class="link-danger">
                Danger Color Link
            </a>
        </h4>
    </div>
</body>
  
</html>


Output:

 



Last Updated : 19 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads