Bootstrap Form

Previous: Bootstrap layout

Next: Bootstrap Form

Brief introduction

In this tutorial, you will learn how to use the Bootstrap toolkit to create form.

Explanation

Bootstrap version 2.0 bootstrap.css in 1034 to form the line number line number 1167, contains a table style.

As you know, the only form used to present tabular data. Bootstrap, too, the position must be marked as follows:

If you use the column headings, the hierarchy should be as follows:

Examples of simple table Bootstrap

Examples

<Table class = "table">
<Thead>
<Tr>
<Th> Student-ID </ th>
<Th> First Name </ th>
<Th> Last Name </ th>
<Th> Grade </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> 001 </ td>
<Td> Rammohan </ td>
<Td> Reddy </ td>
<Td> A + </ td>
</ Tr>
<Tr>
<Td> 002 </ td>
<Td> Smita </ td>
<Td> Pallod </ td>
<Td> A </ td>
</ Tr>
<Tr>
<Td> 003 </ td>
<Td> Rabindranath </ td>
<Td> Sen </ td>
<Td> A + </ td>
</ Tr>
</ Tbody>
</ Table>

Export

View Online

Examples of Bootstrap zebra table

This table uses the zebra stripes CSS class, this class is in the associated bootstrap css file defined, class name is .table-striped.

Examples

<Table class = "table table-striped">
<Thead>
<Tr>
<Th> Student-ID </ th>
<Th> First Name </ th>
<Th> Last Name </ th>
<Th> Grade </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> 001 </ td>
<Td> Rammohan </ td>
<Td> Reddy </ td>
<Td> A + </ td>
</ Tr>
<Tr>
<Td> 002 </ td>
<Td> Smita </ td>
<Td> Pallod </ td>
<Td> A </ td>
</ Tr>
<Tr>
<Td> 003 </ td>
<Td> Rabindranath </ td>
<Td> Sen </ td>
<Td> A + </ td>
</ Tr>
</ Tbody>
</ Table>