Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Typography

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 522
    Comment on it

    Bootstrap typography is that feature with the help of which you can create headings, paragraphs, lists and other inline elements. It uses 14 pixel font-size, line-height 1.4 with default font family Helvetica Neue, Helvetica, Arial, and sans-serif. 

    Headings :-  All HTML headings i.e h1 to h6 are styled in Bootstrap

    <h1>This is Heading1 h1</h1>
    <h2>This is Heading2 h2</h2>
    <h3>This is Heading3 h3</h3>
    <h4>This is Heading4 h4</h4>
    <h5>This is Heading5 h5</h5>
    <h6>This is Heading6 h6</h6>

    Inline Subheadings :-Here, you can add an inline subheading to any of the headings. You should include  <small> around any of the elements or include .small class to get smaller text in a lighter color as shown  below −

    <h1>This is Heading1 h1. <small>This is secondary Heading1 h1</small></h1> 
    <h2>This is Heading2 h2. <small>This is secondary Heading2 h2</small></h2>
    <h3>This is Heading3 h3. <small>This is secondary Heading3 h3</small></h3>
    <h4>This is Heading4 h4. <small>This is secondary Heading4 h4</small></h4>
    <h5>This is Heading5 h5. <small>This is secondary Heading5 h5</small></h5>
    <h6>This is Heading6 h6. <small>This is secondary Heading1 h6</small></h6>

    Lead Body Copy :- The lead class will work, if you want to add emphasis to a paragraph. This provides you a large font size and font weight.

    <h2>Lead Example</h2>
    <p class = "lead">This is an example paragraph demonstrating 
       the use of lead body copy. If you want to add emphasis to a paragraph, then lead class will work for you, this will give you a large font size and font weight.</p>

    Emphasis :- Bootstrap offers HTML's default emphasis tags and class with their own style to manage it. 

    <small> sets text at 85% the size of the parent.

    <strong> sets text with heavier font weight.

    <em> sets a text in italics.

    <small>This content is within tag</small><br>
    <strong>This content is within tag</strong><br>
    <em>This content is within tag and is rendered as italics</em><br>
    
    <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-muted">This content is muted</p>
    <p class = "text-primary">This content carries a primary class</p>
    <p class = "text-success">This content carries a success class</p>
    <p class = "text-info">This content carries a info class</p>
    <p class = "text-warning">This content carries a warning class</p>
    <p class = "text-danger">This content carries a danger class</p>

     

    Abbreviations :-It gives markup to abbreviations or acronyms, similar to WWW or HTTP. It gives light dotted border along the bottom to the element and reveals the full text on hover. To get a marginally smaller font-size include .initialism to <abbr>.

    abbr title = "World Wide Web">WWW</abbr><br>
    <abbr title = "Hyper Text Markup Language" class = "initialism">HTML</abbr>

    Addresses :- It is used to display contact information on your webpage. Its default display is block. 

    <address>
       <strong>Company Name</strong><br>
       007 street<br>
       City Name, State XXXXX<br>
       <abbr title = "Phone">P:</abbr> +91 9999999999
    </address>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: