Bootstrap CSS and Typography

1. Container class

In grid system, we saw that all contents to be written within the div having .container class. This class wraps a content of a page and center it easily.

Example:

<div class="container">
    <div class="row">
        <p>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</p>
    </div>
</div>

Output:

2. Heading 

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

OUTPUT:

2.1 Sub Heading

<h1><small>Heading 1</small></h1>
<h2><small>Heading 2</small></h2>
<h3><small>Heading 3</small></h3>
<h4><small>Heading 4</small></h4>
<h5><small>Heading 5</small></h5>
<h6><small>Heading 6</small></h6>

OUTPUT:

3. Lead Class

If you need to highlight some important paragraph or text on a page, it can be done by applying this class.

<div>
    <h3>Lead class</h3>
    <p class="lead">This is a text with Lead class applied. Lead class changes font size to larger with lighter weight and taller line height.</p>
    <p>This is a simple text without applying any class. This is a simple text without applying any class.</p>
</div>

OUTPUT:

4. Text styles:

<div>
    <p><small>This is a text written in a small size.</small></p>
    <p><strong>This is a text written in a bold.</strong></p>
    <p><em>This is a text written as an italics.</em></p>
    <p class="text-left">This is a text aligned left.</p>
    <p class="text-center">This is a text aligned center.</p>
    <p class="text-right">This is a text aligned right.</p>
    <p class="text-muted">This is a muted text.</p>
    <p class="text-primary">This is a text with a primary class.</p>
    <p class="text-success">This is a text with a success class.</p>
    <p class="text-info">This is a text with an info class.</p>
    <p class="text-warning">This is a text with a warning class.</p>
    <p class="text-danger">This is a text with a danger class.</p>
</div>

OUTPUT:

5.Text Backgrounds

<p class="bg-primary">"primary background"</p>
<p class="bg-success">"success background"</p>
<p class="bg-info">"info background"</p>
<p class="bg-warning">"warning background"</p>
<p class="bg-danger">"danger background"</p>

OUTPUT:

6.Abbreviations

<abbr /> tag will help to show full name of short forms as a tool tip while hover on them.
<div>
    <abbr title="Hyper Text Transfer Protocol">HTTP</abbr>
</div>

OUTPUT:

7. Ordered , Unordered, Definition List

<div class="container">
    <div>
        <h3>Ordered List</h3>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </div>
    <div>
        <h3>Unordered List</h3>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div>
        <h3>Definition List</h3>
        <dl>
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>
    </div>
</div>

OUTPUT:

8. Code Tag:

If you need to display code snippets on a page then <code> tag is useful. When snippets has multiple lines or you want to show it as one block, then <pre>  tag would be used.

<div>
    <p>Below is <code>&lt;code&gt;</code> example.</p>
    <pre>
           &lt;Menu&gt;
              &lt;h1&gt;Menu item&lt;/h1&gt;
           &lt;/Menu&gt;
        </pre>
</div>

OUTPUT:

Hope you have enjoyed “Bootstrap CSS and Typography” post. Please share your views. Enjoy Coding 🙂