Bootstrap 3 Typography

Bootstrap's Default Settings

  • Bootstrap's global default font-size is 14px, with a line-height of 1.428.
  • This is applied to the <body> element and all paragraphs (<p>).
  • In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example
  • h1 Bootstrap heading Semibold (36px)

  • h2 Bootstrap heading Semibold (30px)

  • h3 Bootstrap heading Semibold (24px)

  • h4 Bootstrap heading Semibold (18px)

  • h5 Bootstrap heading Semibold (14px)
  • h6 Bootstrap heading Semibold (12px)

        <h1>h1 Bootstrap heading</h1>  
        <h2>h2 Bootstrap heading</h2>  
        <h3>h3 Bootstrap heading</h3>  
        <h4>h4 Bootstrap heading</h4>  
        <h5>h5 Bootstrap heading</h5>  
        <h6>h6 Bootstrap heading</h6>
    

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

Example
  • h1 Bootstrap heading Secondary text

  • h2 Bootstrap heading Secondary text

  • h3 Bootstrap heading Secondary text

  • h4 Bootstrap heading Secondary text

  • h5 Bootstrap heading Secondary text
  • h6 Bootstrap heading Secondary text

        <h1>h1 Bootstrap heading <small>Secondary text</small></h1>  
        <h2>h2 Bootstrap heading <small>Secondary text</small></h2>  
        <h3>h3 Bootstrap heading <small>Secondary text</small></h3>  
        <h4>h4 Bootstrap heading <small>Secondary text</small></h4>  
        <h5>h5 Bootstrap heading <small>Secondary text</small></h5>  
        <h6>h6 Bootstrap heading <small>Secondary text</small></h6>
    

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

Example You can use the mark tag to highlight text.

        You can use the mark tag to <mark>highlight</mark> text.
    

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

Example This line of text is meant to be treated as deleted text.

        <del>This line of text is meant to be treated as deleted text.</del>
    

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

Example This line of text is meant to be treated as no longer accurate.

        <s>This line of text is meant to be treated as no longer accurate.</s>
    

Inserted text

For indicating additions to the document use the <ins> tag.

Example This line of text is meant to be treated as an addition to the document.

        <ins>This line of text is meant to be treated as an addition to the document.</ins>
    

Underlined text

To underline text use the <u> tag.

Example This line of text will render as underlined

        <u>This line of text will render as underlined</u>
    

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

Example This line of text is meant to be treated as fine print.

        <small>This line of text is meant to be treated as fine print.</small>
    

Bold text

For emphasizing a snippet of text with a heavier font-weight.

Example The following snippet of text is rendered as bold text.

        <strong>rendered as bold text</strong>
    

Italics

For emphasizing a snippet of text with italics.

Example The following snippet of text is rendered as italicized text.

        <em>rendered as italicized text</em>
    

Alignment classes

Easily realign text to components with text alignment classes.

Example
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.

        <div class="text-left">Left aligned text.</div> 
        <div class="text-center">Center aligned text.</div> 
        <div class="text-right">Right aligned text.</div> 
        <div class="text-justify">Justified text.</div> 
        <div class="text-nowrap">No wrap text.</div>
    

Transformation classes

Transform text in components with text capitalization classes.

Example
Lowercased text.
Uppercased text.
Capitalized text.

        <div class="text-lowercase">Lowercased text.</div>
        <div class="text-uppercase">Uppercased text.</div>
        <div class="text-capitalize">Capitalized text.</div>
    

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

Example An abbreviation of the word attribute is attr.

        <abbr title="attribute">attr</abbr>
    

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Example
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

        <address> 
                <strong>Twitter, Inc.</strong><br> 
                1355 Market Street, Suite 900<br> 
                San Francisco, CA 94103<br> 
                <abbr title="Phone">P:</abbr> (123) 456-7890 
        </address>
        <address> 
                <strong>Full Name</strong><br> 
                <a href="mailto:#">first.last@example.com</a> 
        </address>
    

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


        <blockquote> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
        </blockquote>
    

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

        <blockquote> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
    

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

        <blockquote> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
    

Copyright 2024 by WebiBeris.com. All Rights Reserved.