Typography

Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and much more.

Some classes and Tags to implement typography feature of bootstrap

Class Name Used for
lead

to make a paragraph stand out i.e. Tutor joes.
small

to create secondary subheadings.
text-center

to align the text to center.
text-right

to align the text to right.
text-left

to align the text to left.
text-justify

to align the text to left and right.
list-inline

to make the element of list inline.
text-uppercase

to transform text to uppercase.
text-lowercase

to transform text to lowercase.
text-capitalize

to transform text to capitalize first letter of each word leaving other letters in lowercase.

Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and much more.

Colors / Backgrounds

Convey meaning through color with a handful of color utility classes.

Text Colors Classes
  • text-primary
  • text-success
  • text-info
  • text-danger
  • text-warning
Background Classes
  • bg-primary
  • bg-success
  • bg-info
  • bg-danger
  • bg-warning


Source Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
</head>
<body>
    <div class="container">
        <h3>Text Properties</h3>
        <p class="text-primary">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>


        <p class="bg-primary">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="bg-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="bg-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="bg-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="bg-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>

        <p>Tutor <i class='lead'>Joes</i></p>
        <p>Tutor <i class='small'>Joes</i></p>

        <p class="text-left">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-right">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>

        <p class="text-lowercase">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-uppercase">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>
        <p class="text-capitalize">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptates numquam quod amet repellendus veritatis unde nulla mollitia quam nostrum!</p>

        <ul class="list-unstyled">
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul class="list-inline">
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
To download raw file Click Here

Bootstrap Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions