Bootstrap Typography

Post by **C0D3D** »

Bootstrap headings

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Headings</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <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>

Bootstrap headings with secondary text

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Headings with Secondary Text</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <h2>
        Fancy display heading
        <small class="text-muted">With faded secondary text</small>
    </h2>
</div>
</body>
</html>

Bootstrap display headings

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Display Headings</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <h1 class="display-1">Display Heading 1</h1>
    <h1 class="display-2">Display Heading 2</h1>
    <h1 class="display-3">Display Heading 3</h1>
    <h1 class="display-4">Display Heading 4</h1>
    <h1 class="display-5">Display Heading 5</h1>
    <h1 class="display-6">Display Heading 6</h1>
</div>
</body>
</html>

Bootstrap normal and lead paragraphs

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Paragraphs Styling</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p>This is how a normal paragraph looks like in Bootstrap.</p>
    <p class="lead">This is how a paragraph stands out in Bootstrap.</p>
</div>
</body>
</html>

Bootstrap text alignment

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text Alignment</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p class="text-start">Left aligned text on all viewport sizes.</p>
    <p class="text-center">Center aligned text on all viewport sizes.</p>
    <p class="text-end">Right aligned text on all viewport sizes.</p>
</div>
</body>
</html>

Bootstrap text formatting

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text Formatting</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p><b>This is bold text</b></p>
    <p><code>This is computer code</code></p>
    <p><em>This is emphasized text</em></p>
    <p><i>This is italic text</i></p>
    <p><mark>This is highlighted text</mark></p>
    <p><small>This is small text</small></p>
    <p><strong>This is strongly emphasized text</strong></p>
    <p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
    <p><ins>This text is inserted to the document</ins></p>
    <p><del>This text is deleted from the document</del></p>
</div>
</body>
</html>

Bootstrap text transformation

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text Transformation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
    <p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
    <p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>

Bootstrap text emphasis classes

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text Emphasis Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p class="text-primary">Primary: Please read the instructions carefully before proceeding.</p>
    <p class="text-secondary">Secondary: This is featured has been removed from the latest version.</p>
    <p class="text-success">Success: Your message has been sent successfully.</p>
    <p class="text-info">Info: You must agree with the terms and conditions to complete the sign up process.</p>
    <p class="text-warning">Warning: There was a problem with your network connection.</p>
    <p class="text-danger">Danger: An error has been occurred while submitting your data.</p>
    <p class="text-muted">Muted: This paragraph of text is grayed out.</p>
</div>
</body>
</html>

Bootstrap blockquotes formatting

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Styling Blockquote with Attribution</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <figure>
        <blockquote class="blockquote">
            <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
        </blockquote>
        <figcaption class="blockquote-footer">by <cite>Albert Einstein</cite></figcaption>
    </figure>
</div>
</body>
</html>

Bootstrap truncating long text

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text Truncation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <!-- Block level element -->
    <div class="row">
        <div class="col-2 text-truncate">
            The quick brown fox jumps over the lazy dog.
        </div>
    </div>

    <!-- Inline level element -->
    <span class="d-inline-block text-truncate" style="max-width: 100px;">
        The quick brown fox jumps over the lazy dog.
    </span>
</div>
</body>
</html>

Bootstrap handling text overflow

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Text wrapping and Overflow</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="badge bg-primary text-wrap" style="width: 6rem;">
        This text will wrap.
    </div>

    <div class="bg-warning text-nowrap mt-4" style="width: 6rem;">
        This text will overflow the element's box.
    </div>
</div>
</body>
</html>

Bootstrap breaking long words

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Word Break</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="container">
        <h2>Without Word Break</h2>
        <div class="row">
            <div class="col-2">
                <p class="bg-warning">veryveryveryveryveryveryverylongword</p>
            </div>
        </div>
        <hr />
        <h2>With Word Break</h2>
        <div class="row">
            <div class="col-2">
                <p class="bg-warning text-break">veryveryveryveryveryveryverylongword</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Bootstrap Typography

Bootstrap Typography

Who is online