« Previous Next »

Typography

What is typography?

Using Bootstrap’s typography classes ensures consistency, scalability, and ease of customization across different devices and screen sizes. This makes it simple to maintain a uniform appearance without writing custom CSS for every text element.

Key Typography Features in Bootstrap

  1. Headings:

    Bootstrap offers classes for headings (h1 to h6) that adjust font size and weight.

    You can also use .display-1 to .display-6 for larger, more prominent headings.

  2. Paragraphs:

    Text in paragraphs can be styled with .lead to create larger, standout text.

    Text alignment can be modified using .text-start, .text-center, or .text-end.

  3. Inline Text Elements:

    Bootstrap provides classes like .mark, .small, .text-muted, .text-bold, and .text-

    uppercase to style text within paragraphs.

  4. Lists:

    Ordered and unordered lists can be styled with Bootstrap classes like .list-unstyled and

    .list-inline to remove bullet points or make lists appear horizontally.

  5. Blockquotes:

    Use .blockquote for styled quotations, with .blockquote-footer for citation.

  6. Text Utilities:

    OBootstrap includes utility classes for changing text color (e.g., .text-primary, .text-success)

    font weight (e.g., .fw-bold, .fw-light), and text transformation (e.g., .text-uppercase, .text-lowercase).

  7. Responsive Text:

    You can apply responsive font sizing with Bootstrap’s .fs-1 to .fs-6 classes to adjust text

    size across different screen sizes.

Some Examples Inputs And Outputs

Input Code Examples


      <!DOCTYPE html>
      <html lang="en">
      <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
      </head>
      <body>
      
      <div class="container mt-3">
          <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
          <h1>h1 Bootstrap heading</h1>
          <h2>h2 Bootstrap heading</h2>
          <h3>h3 Bootstrap heading</h3>
          <h4>h4 Bootstrap heading</h4>
          <h5>h5 Bootstrap heading</h5>
          <h6>h6 Bootstrap heading</h6>
      </div>
      
      </body>
      </html>

Output Example


            
            

              
h1 Bootstrap heading

              
h2 Bootstrap heading

              
h3 Bootstrap heading

              
h4 Bootstrap heading

              
h5 Bootstrap heading

              
h6 Bootstrap heading

Input Code Examples


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Bootstrap Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        </head>
        <body>
                    
            <div class="container mt-3">
              <h1>Highlight Text</h1>
              <p>It class is very niceAIT</mark>Academy Of Information Technology.</p>   
            </div>
                
        </body>
        </html>

Output Example


               
                

                  
Highlight Text
    
                  
It class is very nice AIT Academy Of Information Technology.
« Previous Next »