Bootstrap Typography

It is used to styling and formatting of text content like headings, paragraphs, blockquotes, etc. with Bootstrap.

 

Heading:

Use “display-*”.

<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>

Ex.

<body>

<div class="bs-example">

    <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>

</div>

</body>

 

Paragraph:

Paragraph define by many format like:

"text-left”, "text-center", "text-right", "text-justify"

 

Script Code:

<style>

    .bs-example{

        width: 600px;

      margin: 20px;

        padding: 20px;

        border: 1px solid #ccc;

    }

    .bd-highlight{

        background-color: #ffe1ef;

      border: 1px solid #f75da4;

    }

</style>

 

Body code:

<body>

<div class="bs-example">

    <p class="text-left">Left aligned text.</p>

      <p class="text-center">Center aligned text.</p>

      <p class="text-right">Right aligned text.</p>

      <p class="text-justify">Justified text.Hi, this is codersarts tutorial which help to increase your efficiency and code skills .</p>

      <p class="text-nowrap bd-highlight" style="width: 10rem;">No wrap text. This text should overflow the parent.</p>

</div>

</body>

Text Formatting:

You are free to use text formatting tags like <strong>, <i>, <small> to make your text bold, italic, small and so on, in the same way you do in simple HTML.

Ex.

<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>

           

Text Transformation

You can also transform the text to lowercase, uppercase or make them capitalize.

Ex.

<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>

 

Text Coloring

Bootstrap has handful of emphasis utility classes that can be used for this purpose such as showing success message in green color, warning or error message in red color, etc.

Ex.

<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>

 

 

Styling Blockquotes

Moreover, for identifying the source you can add a <footer> element with class .blockquote-footer, and wrap the name of the source work in <cite>, like this:

Head section code:

</script>

<style>

    .bs-example{

    margin: 20px;

    }

</style>

 

Body section code:

<blockquote class="blockquote">

<p class="mb-0"></p>

<footer class="blockquote-footer">by <cite>Naveen kumar </cite></footer>

</blockquote>

Powered  by Codersarts