What are Bootstrap Tables?
Bootstrap tables are standard HTML tables enhanced with the styling and features provided by the Bootstrap CSS framework. They make it easy to create clean, responsive, and visually consistent table layouts with minimal custom CSS. Here are some key features of Bootstrap table classes:
- Basic Styling: The .tableclass adds consistent padding, borders, and optional hover effects to standard HTML tables.
- Responsive Tables: Wrap your table with .table-responsiveto enable horizontal scrolling on smaller screens, ensuring content remains accessible.
- Table Variants: Use utility classes such as .table-striped,.table-bordered,.table-hover, and.table-darkto enhance appearance and readability.
- Color Classes: Apply contextual background colors with classes like .table-primary,.table-success,.table-danger, and more to convey meaning or improve design.
- Compact Rows: Add the .table-smclass to reduce cell padding for a more compact table layout.
HTML
<table id="demoTable" class="table table-striped table-responsive">
 <thead>
  <tr>
   <th>Year</th>
   <th>Song Title</th>
   <th>Artist</th>
 </tr>
 </thead>
 <tbody>
 <tr>
   <td>1979</td>
   <td>Ain't No Stoppin' Us Now</td>
   <td>McFadden & Whitehead</td>
 </tr>
 <tr>
   <td>2012</td>
   <td>One More Night</td>
   <td>Maroon 5</td>
 </tr>
 <tr>
   <td>1975</td>
   <td>I'm Sorry</td>
   <td>John Denver</td>
 </tr>
 <tr>
   <td>2009</td>
   <td>Hotel Room Service</td>
   <td>Pitbull</td>
 </tr>
 <tr>
   <td>1997</td>
   <td>Something About the Way You look Tonight</td>
   <td>Elton John</td>
 </tr>
 <tr>
   <td>1973</td>
   <td>Free Electric Band</td>
   <td>Albert Hammond</td>
 </tr>
 <tr>
  <td>1965</td>
  <td>Go Now</td>
  <td>The Moody Blues</td>
 </tr>
 <tr>
   <td>1973</td>
   <td>Hi Hi Hi</td>
   <td>Wings</td>
 </tr>
 <tr>
   <td>1970</td>
   <td>Neanderthal Man</td>
   <td>10CC</td>
   </tr>
 <tr>
   <td>1989</td>
   <td>Another Day in Paradise</td>
   <td>Phil Collins</td>
   </tr>
 <tr>
   <td>2006</td>
   <td>Irreplaceable</td>
   <td>Beyonce</td>
 </tr>
</tbody>
</table>
CSS
@import url("https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css");
JS
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$("#demoTable").DataTable({
  paging: true,
  pageLength: 4,
  ordering: true,
  info: false,
  lengthChange: false,
   language: {
    search: "_INPUT_",
    searchPlaceholder: "Search",
    paginate: {
    next: 'Next',
    previous: 'Previous' 
    }
},
  search: {
  addClass: 'form-control input-lg col-xs-12',
},
});
});
</script>
Basic Page
Button alignment
Button styles
Button with an icon
Button with text and icon on the left
Button with text and icon on the right
Content pagination
Include CSS and JS Files
Modal window
Popover  
Popover with HTML content
Progress bars 
Progress bars with tooltip 
Popover with HTML content and a close button
Responsive cards
Responsive cards styled like business cards
Responsive cards styled like post-it notes
Responsive columns
Table
Table pagination with keyboard keys
Tabs  
Tooltip
Tooltip with HTML content