A Bootstrap table is a way of creating a table using the predefined Bootstrap classes. You can create a beautiful looking table by using the pre-styled classes in your tables. See the example below. Test it Live Bootstrap is the fastest way of creating styled tables by just adding the Bootstrap class in the table class name.
Like the Bootstrap 3 tables, the Bootstrap 4 also has built-in classes with added styles and enhancements for creating HTML tables in your web projects. Simple table demo hover effect colored header Customized table demo contextual classes Table caption
Bootstrap CSS class table-striped with source code and live preview. You can copy our examples and paste them into your project! Use 230+ ready-made Bootstrap components from the multipurpose library.
Table head options. Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles.
With the class .text-nowrap you can specify how white-space inside a table is handled. Sequences of white space are preserved. Lines are broken at newline ...
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: Example <div class="table-responsive"> <table class="table"> ... </table> </div> Try it Yourself » Previous Next