Basic Content Elements in Bootstrap 3.3.7

Explains how to write common web page content in Bootstrap, including headings, tables, panels, and jumbotrons.
Tags:

Headers, headings, and body text

Basic content consists of headers, headings, and body text. In Bootstrap, these mostly use normal HTML tags.

Use <h1> through <h3> for headings, <p> for paragraphs, and <blockquote> for quotations. The page-header class separates the header area visually.

<div class="page-header">
  <h1>Content Display</h1>
  <h2>Subtitle</h2>
</div>
<h3>Small heading</h3>
<p>This is the body content.</p>
<blockquote>
  <p><small>Quoted text</small></p>
</blockquote>
<blockquote class="pull-right">
  <p><small>Quoted text</small></p>
</blockquote>

Most basic content can be written as ordinary HTML. Bootstrap adds a few classes for cleaner visual presentation.

Tables

Tables are written with normal <table> tags. Bootstrap provides table classes that set the design.

Class Description
table Basic table. Uses 100% width and horizontal row lines.
table-striped Adds alternating row backgrounds inside <tbody>. Uses :nth-child, so it does not work in IE8 or older.
table-bordered Adds borders around the table and between cells.
table-hover Highlights the row under the mouse pointer.
table-condensed Reduces row height. 
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>Notebook</td>
      <td>1,000,000</td>
    </tr>
  </tbody>
</table>

Background classes such as active, success, info, warning, and danger can be added to <tr>, <td>, or <th>.

Responsive tables

Wrap a table in table-responsive to add horizontal scrolling on narrow screens.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Panels

Panels are useful for showing compact content separated from the main page, such as columns, notices, or warnings.

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Title</h3>
  </div>
  <div class="panel-body">Content</div>
  <div class="panel-footer">Footer</div>
</div>

Panel style classes include panel-default, panel-primary, panel-success, panel-info, panel-warning, and panel-danger.

Jumbotron

A jumbotron is a large box used to emphasize specific content or information. It is displayed as a gray box with rounded corners, and text inside it appears larger.

<div class="jumbotron">
  <div class="container">
    Content to display
  </div>
</div>

You can also add well as in class="jumbotron well" to make the border slightly clearer.