Bootstrap

Chapter 2. Bootstrap CSS

At the core of Bootstrap is a set of basic HTML elements that have been styled to allow for easy enhancement via classes and user styles.

Typography

Starting with typography, Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. These are all standard fonts and are included as defaults on all major computers. If by chance these fonts don’t exist, they fall back to sans-serif (the catchall) to tell the browser to use the default font for the browser. All body copy has the font-size set at 14 pixels, with the line-height set at 20 pixels. The <p> tag has a margin-bottom of 10 pixels, or half the line-height.

Headings

All six standard heading levels have been styled in Bootstrap (see Figure 2-1), with the <h1> at 36 pixels tall, and the <h6> down to 12 pixels (for reference, default body text is 14 pixels tall). In addition, to add an inline subheading to any of the headings, simply add <small> around any of the elements and you will get smaller text in a lighter color. In the case of the <h1>, the small text is 24 pixels tall, normal font weight (i.e., not bold), and gray instead of black:

h1 small {
    font-size:24px;
        font-weight:normal;
        line-height:1;
        color:#999;
        }

Figure 2-1. Headings

Lead Body Copy

To add some emphasis to a paragraph, add class="lead" (see Figure 2-2). This will give you larger font size, lighter weight, ...