Typography

Text Alignment:

Bootstrap 4 have a classes to align text horizontally:

  • .text-left, .text-center, .text-right, .text-justify.
                                      
    
<p class="text-leftr">Left text.</p>
<p class="text-center">Centered text.</p>
<p class="text-right">Right text.</p>
<p class="text-justify">Justify text.</p>

Boostrap 4 can align text vertically within its container using

  • .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom.

Headings:

Bootstrap provides styles for headings <h1> to <h6>.

Bootstrap has utility classes to adjust the margins of headings: .mt-, .mb-, .ml-, .mr-, .mx-, .my-, where - is replaced with a number representing spacing size.

Paragraphs:

You can style paragraphs with classes like .lead for larger, emphasized text and .blockquote for quoting blocks of content.

Similar to headings, you can use margin utility classes to adjust the spacing around paragraphs.

Text Styles and Utilities:

Bootstrap provides utility classes for text styles such as:

  • .text-muted, .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-white, .text-body, and .text-black-50.
  • Also you can use .font-weight-bold, .font-weight-normal, .font-italic for font weight and italic styles.
  • Adjusting text size can be done with .text-small, .text-large, .text-sm, .text-lg, .text-xs, .text-xl.

Example demonstrating these concepts:

                                      
                                      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typography Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h1 class="text-center">Heading 1</h1>
    <h2 class="text-muted">Heading 2</h2>
    <h3 class="text-primary">Heading 3</h3>
    <h4 class="text-danger">Heading 4</h4>
    <h5 class="text-success">Heading 5</h5>
    <h6 class="text-warning">Heading 6</h6>

    <p class="lead">This is a lead paragraph.</p>
    <p class="blockquote">This is a blockquote.</p>
    <p class="text-muted">This text is muted.</p>
    <p class="font-italic">This text is italic.</p>
    <p class="font-weight-bold">This text is bold.</p>
    <p class="text-center">Centered text.</p>
</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</body>
</html>