Twitter Bootstrap Common classes and HTML styles

Now that you have the Twitter Bootstrap setup and you have added your buttons to the site, you can now use the built in features for your content. There is a large list of CSS classes you can use in your content. This article will explain what the table HTML looks like and the <img> classes look like and how the code is used.

For a full list of Bootstrap classes see the following link.

Twitter Bootstrap Base CSS

HTML Table Styles

The Bootstrap table styles are attached to the HTML. You do not need to use CSS classes for the table styles. You will; however, want to follow the table format that the Bootstrap CSS styles were designed for. Below is an example of a table in bootstrap and the correlating code.

<table class="table table-bordered table-striped">  <thead>   <tr>    <th>Column 1 header</th>    <th>Column 2 header</th>   </tr>  </thead>  <tbody>   <tr>    <td>Tabular 1a</td>    <td>Tabular Description 1a</td>   </tr>   <tr>    <td>Tabular 1b</td>    <td>Tabular Description 1b</td>   </tr>   <tr>    <td>Tabular 1c</td>    <td>Tabular Description 1c</td>   </tr>   <tr>    <td>Tabular 1d</td>    <td>Tabular Description 1d</td>   </tr>  </tbody> </table>

CSS Classes for Images

You can use the bootstrap premade CSS classes to style your images. Below is what the classes look like.

img-rounded

img-polaroid

img-circle

No Style

<img class="img-rounded" src="image.jpg" /> <img class="img-polaroid" src="image.jpg" /> <img class="img-circle" src="image.jpg" />