Table (Bootstrap style)

The table shortcode is upgrading the markdown table to a genuine Bootstrap styled table.

Sample

Just markdown

With [table] applied

With [table class="table-striped table-bordered"] applied

With [table class="table-striped table-bordered table-dark"] applied

With [table class="table-striped table-bordered thead-dark"] applied

With [table class="table-striped table-bordered table-sm"] applied

Usage

[table class="table-striped table-bordered thead-dark table-sm another-class"]
| Brand  | Country | 
| :----- | :----- |
| Ford | USA |
| Dacia | Romania |
| Mercedes | Germany |
[/table]

Options

class

Please read this one carefully, for you use this option to change the flavor of the table easily.

Option Required Default
class no blanks
Description
Custom classes that can be added to this shortcode, but you can also use the Bootstrap special classes here
Values
String of additional custom classes to be added to the alert. Delimited by blanks.
table-striped
Bootstrap class to have striped rows
table-bordered
Bootstrap class to have borders around the table
thead-dark
Bootstrap class to have a dark table header
thead-light
Bootstrap class to have a light table header
table-sm
Bootstrap class to have a table with smaller rows
See Bootstrap tables documentation for all classes that can be applied

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Contextual row classes are not supported yet.

Last update: Tue, 13 Sep 2022 14:32:15