Bootstrap- global css- form

form

Example 1. Basic

Any  <table> label added  .table class for imparting basic styles - the amount of complement (padding) and horizontal divider.

<table class="table">
  ...
</table>

2. striped table

By  .table-striped give the class  <tbody> of each row in the increase of the zebra pattern.

<table class="table table-striped">
  ...
</table>

Table 3 with border

Add  .table-bordered class adds a border to the table and each cell therein.

<table class="table table-bordered">
  ...
</table>

4. Hover

By adding  .table-hover allows class  <tbody> in each row responds to mouse hover state.

<table class="table table-hover">
  ...
</table>

5. austerity table

By adding  .table-condensed allows a more compact form class, in the fill (padding) in the cell will be halved.

<table class="table table-condensed">
  ...
</table>

6. Status Class

Color may be provided to a row or cell state through these classes.

Class	description
.active	Hover color cell row or the upper set
.success	Identify successful or positive action
.info	Identify common message or action
.warning	Or require the user to identify the warning note
.danger	Identify dangerous or potentially negative impact of action

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

7. Responsive form

Any  .table element wrapped  .table-responsive inside the element, you can create responsive form, it will be on a small screen device (less than 768px) horizontal scrolling. When the screen is larger than 768px width, the horizontal scroll bar disappears.

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