Bootstrap Typography

When you use bootstrap in your webpages, you should see that some elements are styled in a different way than usual. Also, you can further improve the typography of your page using myriads of bootstrap typography classes.

By default, the font size used in bootstrap for body and paragraph tags is 14px. The default line-height is 1.428. Paragraphs also have margin of approximately 10 px.

Bootstrap Headings

Bootstrap has default font sizes of 36, 30, 24, 18, 14 and 12 for h1 to h6 headings respectively. We shall see it in the following example. Also, if if you want to add in-line subheadings in your text, you can use “small” class. Lets have a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    
    
    <body>
         <h1>Welcome to knowledge hills. <small>Tutorial Blog</small></h1>
         <h2>Welcome to knowledge hills. <small>Tutorial Blog</small></h2>
         <h3>Welcome to knowledge hills. <small>Tutorial Blog</small></h3>
         <h4>Welcome to knowledge hills. <small>Tutorial Blog</small></h4>
         <h5>Welcome to knowledge hills. <small>Tutorial Blog</small></h5>
         <h6>Welcome to knowledge hills. <small>Tutorial Blog</small></h6>

    </body>

</html>

Download the code
Try the code

If you run the above webpage, you should see different heading sizes styled by bootstrap. You should also see a small grey text inline with the Heading text. This the bootstrap-based subheading created via “small” class.

Lead, Emphasis and Text Types

The lead class increases the font size of a paragraph and makes it more prominent. Emphasis classes put an emphasis around a text block i.e “small”, “strong” and “em”. Finally there are multiple text types that can style any text block i.e success text, centered text, text alignment etc. Take a look at the following example to see these bootstrap typography classes in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <p>This is a random paragraph text.</p>
        <p class="lead">This is a random paragraph text with lead.</p>
        <p><strong>This is inside strong</strong><em>This is inside em.</em></p>
        <p><small>This is inside small</small></p>
        
        <p class = "text-left">This is left aligned</p>
        <p class = "text-center">This is center aligned</p>
        <p class = "text-right">This is right aligned</p>
        <p class = "text-muted">This is muted text</p>
        <p class = "text-primary">This is text with primary class</p>
        <p class = "text-success">This is text with success class</p>
        <p class = "text-info">This is text with info class</p>
        <p class = "text-warning">This is text with warning class</p>
        <p class = "text-danger">This is text with danger class</p>
    </body>

</html>

Download the code
Try the code

Adding block quotes using Bootstrap

Bootstrap classes also style the block quote element. Classes are added to the blockquote tag in order to style it. For instance, the “small” class will add source of the quote below it, similarly “pull-right” class can pull the quote to the right of the screen. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <blockquote>
           <p>Time and tide waits for none.</p>
        </blockquote>

        <blockquote>
           Brevity is the soul of wit.
           <small>Some one in USA <cite title = "Source Title">In his book</cite></small>
        </blockquote>

          <blockquote class="pull-right">
           Brevity is the soul of wit.
           <small>Some one in USA <cite title = "Source Title">In his book</cite></small>
        </blockquote>
    </body>

</html>

Download the code
Try the code

When you open the above page in browser, you should see a quote, a quote with some source on the left and a quote with some source on right. Bootstrap typography classes are extremely helpful, specially if you want to tweak the look and feel of your site.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .