Holla Tech - Learn
Bootstrap 3: Typography
 

Typography is the shape, style, and arrangement of text.
Bootstrap gives your text a lift with changes to some of the browser defaults.

The default Bootstrap font-size is 14px, a line-height of 1.428 for all <body> elements and <p> text.
Other Bootstrap defaults include a bottom margin for <p> elements that is half the line-height, or 10px minimum.

Some other Bootstrap variations to HTML:
<h1> to <h6> Headings range from 36px down to 12px.
<small> Creates a smaller, lighter text within a heading.
<mark> Creates a lighter highlight for tagged text.
<abbr> Provides a CSS tooltip.
A <footer> in <blockquote> has an em dash and lighter text. Add class=”blockquote-reverse” to the tag for right alignment.
<dl> <dt> list elements are emphasized.
<code> Styles and highlights tagged computer code.
<kbd> Styles and highlights keyboard characters with a black box.

Bootstrap also has <p> classes for providing meaning through color for both text and backgrounds: text-muted, text-primary, text-success, text-info, text-warning, text-danger, bg-primary, bg-success, bg-info, bg-warning, bg-danger

Other <p> attributes include:text-left, text-justify, text-center , ext-nowrap, text-right

The following code demonstrates Bootstrap typography: 

<div class=“container”>
  <h3>Miscellaneous <small>stuff</small></h3>
  <p class=“bg-info”>The Gutenberg Press 1454</p>
  <p class=“text-success”>revolutionized printing</p>
  <blockquote>
    <p>The only source of knowledge is experience.</p>
    <footer>Albert Einstein</footer>
  </blockquote>
  <p><kbd>Enter</kbd> is a <code>kbd</code> element</p>
  <p class=“bg-warning text-center”>Paragraph formats</p>
</div> 

 

TASK:
Test the codes in a text editor and play around with the outputs. 

BACK NEXT

 


CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT