WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Typography


Bootstrap includes patterns that define how text elements seem.

Headings

Bootstrap four offers HTML headings from h1 to h6 as shown within the underneath example −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <identify>Bootstrap 4 Example</name>
   </head>
   
   <body>
      <div elegance = "container">
         <h1>h1 - Welookups</h1>
         <h2>h2 - Welookups</h2>
         <h3>h3 - Welookups</h3>
         <h4>h4 - Welookups</h4>
         <h5>h5 - Welookups</h5>
         <h6>h6 - Welookups</h6>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-3.Three.1.Slim.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Bootstrap 4 Example

h1 - Welookups

h2 - Welookups

h3 - Welookups

h4 - Welookups

h5 - Welookups
h6 - Welookups

Display Headings

The display headings are used to show the text with large font size and font weight than the normal headings by way of the usage of four training of show heading together with .Display-1, .Display-2, .Show-three, and .Display-4.
<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content = "width = device-width, preliminary-scale = 1, reduce-to-in shape = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <identify>Bootstrap 4 Example</identify>
    </head>

    <frame>
        <div magnificence = "box">
            <h1 elegance = "display-1">Welookups</h1>
            <h1 magnificence = "display-2">Welookups</h1>
            <h1 class = "display-three">Welookups</h1>
            <h1 magnificence = "show-four">Welookups</h1>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.3.1.Slim.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">
        </script>

    </frame>
</html>

It will produce the subsequent end result −

Output

Bootstrap 4 Example

Welookups

Welookups

Welookups

Welookups

Lead, Abbreviations, Blockquote and Marked Text

  • Add some emphasis to a paragraph with the aid of the usage of .Lead class.

  • The HTML <abbr> detail provides markup for abbreviations or acronyms, like WWW or HTTP. It makes use of identify characteristic and show with a light dotted border along the bottom and well-knownshows the total text on hover.

  • You can quote the block of content inside the document by means of using .Blockquote class inside the <blockquote> detail.

  • Use the <mark> element to make the text as marked or highlighted.

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content material = "width = device-width, preliminary-scale = 1, reduce-to-in shape = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "anonymous">

        <title>Bootstrap 4 Example</name>
    </head>

    <body>
        <div elegance = "field">
            <h2>Lead</h2>
            <p magnificence = "lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.
            </p>

            <h2>Abbreviations</h2>
            <p><abbr identify = "World Wide Web">WWW</abbr></p>
            <h2>Blockquote</h2>
            <blockquote magnificence = "blockquote">
                Lorem ipsum dolor take a seat amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.
            </blockquote>

            <h2>Marked Text</h2>
            <p>Welcome to <mark>Welookups</mark></p>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.Three.1.Slim.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </body>
</html>
It will produce the subsequent result − Bootstrap four Example

Lead

Lorem ipsum dolor take a seat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Abbreviations

WWW

Blockquote

Lorem ipsum dolor take a seat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Marked Text

Welcome to Welookups