# Bootstrap Text/Typography

« Previous
Next Chapter »

## 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>` and all paragraphs.

In addition, all `<p>` elements have a bottom margin that equals half their computed line-height (10px by default).

## Bootstrap vs. Browser Defaults

In this chapter, we will look at some HTML elements that will be styled a little bit different by Bootstrap than browser defaults.

## <h1> - <h6>

By default, Bootstrap will style the HTML headings (`<h1>` to `<h6>`) in the following way:

## Example

# h1 Bootstrap heading (36px)

## h2 Bootstrap heading (30px)

### h3 Bootstrap heading (24px)

#### h4 Bootstrap heading (18px)

##### h5 Bootstrap heading (14px)

###### h6 Bootstrap heading (12px)

Try it Yourself »

## <small>

In Bootstrap the HTML `<small>` element is used to create a lighter, secondary text in any heading:

## Example

# h1 heading secondary text

## h2 heading secondary text

### h3 heading secondary text

#### h4 heading secondary text

##### h5 heading secondary text

###### h6 heading secondary text

Try it Yourself »

## <mark>

Bootstrap will style the HTML `<mark>` element in the following way:

## Example

Use the mark element to highlight text.

Try it Yourself »

## <abbr>

Bootstrap will style the HTML `<abbr>` element in the following way:

## Example

The WHO was founded in 1948.

Try it Yourself »

## <blockquote>

Bootstrap will style the HTML `<blockquote>` element in the following way:

## Example

> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Try it Yourself »

To show the quote on the right, use the `.blockquote-reverse` class:

## Example

> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Try it Yourself »

## <dl>

Bootstrap will style the HTML `<dl>` element in the following way:

## Example

Coffee
  - black hot drink
Milk
  - white cold drink

Try it Yourself »

## <code>

Bootstrap will style the HTML `<code>` element in the following way:

## Example

The following HTML elements: `span`, `section`, and `div` defines a section in a document.

Try it Yourself »

## <kbd>

Bootstrap will style the HTML `<kbd>` element in the following way:

## Example

Use `ctrl + p` to open the Print dialog box.

Try it Yourself »

## <pre>

Bootstrap will style the HTML `<pre>` element in the following way:

## Example

    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.

Try it Yourself »

## Contextual Colors and Backgrounds

Bootstrap also has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are:`.text-muted`, `.text-primary`, `.text-success`, `.text-info`, `.text-warning`, and `.text-danger`:

## Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »

The classes for background colors are:`.bg-primary`, `.bg-success`, `bg-info`, `bg-warning`, and `.bg-danger`:

## Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »

## More Typography Classes

The Bootstrap classes below can be added to style HTML elements further:

Class | Description | Example
--- | --- | ---
`.lead` | Makes a paragraph stand out | Try it
`.small` | Indicates smaller text (set to 85% of the size of the parent) | Try it
`.text-left` | Indicates left-aligned text | Try it
`.text-center` | Indicates center-aligned text | Try it
`.text-right` | Indicates right-aligned text | Try it
`.text-justify` | Indicates justified text | Try it
`.text-nowrap` | Indicates no wrap text | Try it
`.text-lowercase` | Indicates lowercased text | Try it
`.text-uppercase` | Indicates uppercased text | Try it
`.text-capitalize` | Indicates capitalized text | Try it
`.initialism` | Displays the text inside an `<abbr>` element in a slightly smaller font size | Try it
`.list-unstyled` | Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it
`.list-inline` | Places all list items on a single line | Try it
`.dl-horizontal` | Lines up the terms (`<dt>`) and descriptions (`<dd>`) in `<dl>` elements side-by-side. Starts off like default `<dl>`s, but when the browser window expands, it will line up side-by-side | Try it
`.pre-scrollable` | Makes a `<pre>` element scrollable | Try it

## Complete Bootstrap Typography Reference

For a complete reference of all typography elements/classes, go to our complete Bootstrap Typography Reference.

Also look at our Bootstrap Helper Classes Reference for more information about contextual classes.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples