---
title: "Twitter Bootstrap Common classes and HTML styles"
description: "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..."
url: https://www.inmotionhosting.com/support/website/bootstrap-common-css-html-classes/
date: 2013-06-21
modified: 2023-06-12
author: "InMotion Hosting Contributor"
categories: ["Website"]
type: post
lang: en
---

# Twitter Bootstrap Common classes and HTML styles

Now that you have the [Twitter Bootstrap setup](/support/website/website-design/adding-the-bootstrap-files-to-your-responsive-template/) and you have [added your buttons to the site](/support/website/website-design/adding-the-bootstrap-menu-buttons-to-your-responsive-template/), 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](https://twitter.github.io/bootstrap/base-css.html)

## 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.

**With Bootstrap Styles**

| Column 1 Header | Column 2 Header |
| --- | --- |
| Tabular 1a | Tabular Description 1a. |
| Tabular 1b | Tabular Description 1b. |
| Tabular 1c | Tabular Description 1c. |
| Tabular 1d | Tabular Description 1d. |

**Without Bootstrap Styles**

| Column 1 Header | Column 2 Header |
| --- | --- |
| Tabular 1a | Tabular Description 1a. |
| Tabular 1b | Tabular Description 1b. |
| Tabular 1c | Tabular Description 1c. |
| Tabular 1d | Tabular Description 1d. |

<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** ![Google plus logo](https://4.bp.blogspot.com/-9NLW8cCqmko/Tg77yk69o-I/AAAAAAAAAPs/4VVJ5qocs1k/s400/google%2Bplus%2Bblack%2Blogo.jpg) | **img-polaroid** ![Google plus logo](https://4.bp.blogspot.com/-9NLW8cCqmko/Tg77yk69o-I/AAAAAAAAAPs/4VVJ5qocs1k/s400/google%2Bplus%2Bblack%2Blogo.jpg) | **img-circle** ![Google plus logo](https://4.bp.blogspot.com/-9NLW8cCqmko/Tg77yk69o-I/AAAAAAAAAPs/4VVJ5qocs1k/s400/google%2Bplus%2Bblack%2Blogo.jpg) | **No Style** ![Google plus logo](https://4.bp.blogspot.com/-9NLW8cCqmko/Tg77yk69o-I/AAAAAAAAAPs/4VVJ5qocs1k/s400/google%2Bplus%2Bblack%2Blogo.jpg) |
| --- | --- | --- | --- |

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