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.

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
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" />
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200954

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!