Bootstrap Table W3school Code Example


Example: bootstrap 3 table

Bootstrap Basic Table A basic Bootstrap table has a light padding and only horizontal dividers.  The .table class adds basic styling to a table ------------------------------------------------------------ Striped Rows The .table-striped class adds zebra-stripes to a table  Bordered Table The .table-bordered class adds borders on all sides of the table and cells ------------------------------------------------------------ Hover Rows The .table-hover class adds a hover effect (grey background color) on table rows ------------------------------------------------------------ Condensed Table The .table-condensed class makes a table more compact by cutting cell padding in half ------------------------------------------------------------ Contextual Classes Contextual classes can be used to color table rows (<tr>) or table cells (<td>)  The contextual classes that can be used are:  Class		Description .active		Applies the hover color to the table row or table cell .success	Indicates a successful or positive action .info		Indicates a neutral informative change or action .warning	Indicates a warning that might need attention .danger		Indicates a dangerous or potentially negative action ------------------------------------------------------------ Responsive Tables The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference  Sample code  <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body>  <div class="container">   <h2>Bootstrap Table Example</h2>   <table class="table -----------">  // try by adding different table class at this place => ("-----------")     <thead>       <tr>         <th>Id</th>         <th>Name</th>         <th>Age</th>       </tr>     </thead>     <tbody>       <tr>         <td>1</td>         <td>Ram</td>         <td>10</td>       </tr>       <tr>         <td>2</td>         <td>Shyam</td>         <td>12</td>       </tr>       <tr>         <td>3</td>         <td>Ramesh</td>         <td>13</td>       </tr>       <tr>         <td>4</td>         <td>Suresh</td>         <td>11</td>       </tr>     </tbody>   </table> </div>  </body> </html>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable