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

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 820
    Comment on it

    Bootstrap typography is used for to manage the content text of the webpage. Bootstrap uses 14 pixel font size with line-height 1.4 with default font family Helvetica Neue, Helvetica, Arial, and sans-serif.

    Typography is used to create headings, paragraphs, lists and other text related elements. Below is a short description about it -

    Headings

    All HTML headings h1 to h6 are same styled and different font size

    <h1>Heading1 h1 and font size 36px</h1>
    <h2>Heading1 h2 and font size 30px</h2>
    <h3>Heading1 h3 and font size 24px</h3>
    <h4>Heading1 h4 and font size 18px</h4>
    <h5>Heading1 h5 and font size 14px</h5>
    <h6>Heading1 h6 and font size 12px</h6>

     

    Inline Subheadings

    This is used to add a subheading text in heading tag. For it you just need to add <small> tag which will be placed in heading tag and you will get small and lighter text (small text will be rendered 85%).

    You can add .small class also.

    <h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
    <h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
    <h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
    <h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
    <h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
    <h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>


    Lead Body

    If you want to add emphasis to a paragraph, then the lead class will work for you, this will give you a large font size and font weight.

    <p class = "lead">This is an example paragraph demonstrating the use of lead body copy.</p>


    Emphasis

    Bootstrap offers HTML's default emphasis tags with their style and it also offers you some class to manage it
     

    <p class = "text-right">For right aligned text.</p>
    <p class = "text-center">For center aligned text.</p>
    <p class = "text-left">For left aligned text.</p>
    
    <p class = "text-muted">For to make 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>

    Note - Try is on your end for better understanding


    Marker

    This is used for to make highlighted text, in your all content text you need to add <mark> element as the following way:

    <p> Mark element to <mark>highlight</mark> text.</p>


     

    AddressesUsing <address> tag you can display the contact information on your web page.

    You’ll need to use display: block; property to show <address> as a default.

    Tags to add line breaks to the enclosed address text.

    <address>
       <strong>Some Company, Inc.</strong><br>
       007 street<br>
       Some City, State XXXXX<br>
       <abbr title = "Phone">P:</abbr> +91 9876543210
    </address>

     

    Blockquotes

    Blockquote is used in bootstrap same as usually we used it in HTML. Bootstrap have some style format and adding a <small> tag for identifying the source of quote and add some other options.

    <blockquote>
       This is a blockquote with a source title.
       <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
    </blockquote>


    Lists

    Bootstrap offers some type of lists -


    Ordered List -

    <ol>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
    </ol>

    Un-ordered List -

    <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
    </ul>

    Unstyled List -

    <ul class = "list-unstyled">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
    </ul>

    Inline List -

    <ul class = "list-inline">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
    </ul>

    Definition List-

    <dl>
       <dt>Description 1</dt>
       <dd>Item 1</dd>
       <dt>Description 2</dt>
       <dd>Item 2</dd>
    </dl>

    Horizontal Definition List

    <dl class = "dl-horizontal">
       <dt>Description 1</dt>
       <dd>Item 1</dd>
       <dt>Description 2</dt>
       <dd>Item 2</dd>
    </dl>

     

 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: