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
.table
class adds consistent padding, borders, and optional hover effects to standard HTML tables. - Responsive Tables: Wrap your table with
.table-responsive
to 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-dark
to 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-sm
class 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