Bootstrap Tables
You can add styling to your tables using bootstrap.. lets look at different style classess offered by bootstrap.
You can style your tables in bootstrap based on the lists below:
- Bootstrap Basic Table
- Striped Rows
- Bordered Table
- Hover Rows
- Condensed Table
- Contextual Classes
- Responsive Tables
Bootstrap Basic Table
RESULTS:

STRIPPED ROW
Results:

Bordered Table

Hover Table
Results
Notice that when you over over the table rows, the colour of the row changes from white to Gray. This is affected by <table class=“table table-hover”> ,a bootstrap class . There are many different classess to look at for different tables in bootstrap.
Condensed Table
Results:

Contextual Classes
Results

Responsive Table
Results

Bootstrap List Groups
Basic List Groups (Unordered List With Items)
To create a basic list group, use an <ul>
element with class .list-group
, and <li>
elements with class .list-group-item
:
Example
<ul class=”list-group”>
<li class=”list-group-item”>First item</li>
<li class=”list-group-item”>Second item</li>
<li class=”list-group-item”>Third item</li>
</ul>
List Group With Badges
To create a badge, create a <span>
element with class .badge
inside the list item:
Example
<ul class=”list-group”>
<li class=”list-group-item”>New <span class=”badge”>12</span></li>
<li class=”list-group-item”>Deleted <span class=”badge”>5</span></li>
<li class=”list-group-item”>Warnings <span class=”badge”>3</span></li>
</ul>
List Group With Linked Items
To create a list group with linked items, use <div>
instead of <ul>
and <a>
instead of <li>
:
Example
<div class=”list-group”>
<a href=”#” class=”list-group-item”>First item</a>
<a href=”#” class=”list-group-item”>Second item</a>
<a href=”#” class=”list-group-item”>Third item</a>
</div>
Active State
Example
Use the .active
class to highlight the current item:
<a href=”#” class=”list-group-item active”>First item</a>
Example
To disable an item, add the .disabled
class:
<a href=”#” class=”list-group-item disabled”>First item</a>
Contextual Classes
The classes for coloring list-items are: .list-group-item-success
, list-group-item-info
, list-group-item-warning
, and .list-group-item-danger
:
Contextual classes can be used to color list items:
tҺe website іѕ really good, I like your web site!