Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner
as the parent.
| Country | Population | Yearly Change | Net Change |
|---|---|---|---|
| China | 1,415,045,928 | 0.39 % | 5,528,531 |
| India | 1,354,051,854 | 1.11 % | 14,871,727 |
| U.S. | 326,766,748 | 0.71 % | 2,307,285 |
| Indonesia | 266,794,980 | 1.06 % | 2,803,601 |
| Brazil | 210,867,954 | 0.75 % | 1,579,676 |
| Pakistan | 200,813,818 | 1.93 % | 3,797,863 |
| Nigeria | 195,875,237 | 2.61 % | 4,988,926 |
| Bangladesh | 166,368,149 | 1.03 % | 1,698,398 |
| Russia | 143,964,709 | -0.02 % | -25,045 |
| Mexico | 130,759,074 | 1.24 % | 1,595,798 |
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| Country | Population | Yearly Change | Net Change |
|---|---|---|---|
| China | 1,415,045,928 | 0.39 % | 5,528,531 |
| India | 1,354,051,854 | 1.11 % | 14,871,727 |
| U.S. | 326,766,748 | 0.71 % | 2,307,285 |
| Indonesia | 266,794,980 | 1.06 % | 2,803,601 |
| Brazil | 210,867,954 | 0.75 % | 1,579,676 |
| Pakistan | 200,813,818 | 1.93 % | 3,797,863 |
| Nigeria | 195,875,237 | 2.61 % | 4,988,926 |
| Bangladesh | 166,368,149 | 1.03 % | 1,698,398 |
| Russia | 143,964,709 | -0.02 % | -25,045 |
| Mexico | 130,759,074 | 1.24 % | 1,595,798 |
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
| Country | Population | Yearly Change | Net Change |
|---|---|---|---|
| China | 1,415,045,928 | 0.39 % | 5,528,531 |
| India | 1,354,051,854 | 1.11 % | 14,871,727 |
| U.S. | 326,766,748 | 0.71 % | 2,307,285 |
| Indonesia | 266,794,980 | 1.06 % | 2,803,601 |
| Brazil | 210,867,954 | 0.75 % | 1,579,676 |
| Pakistan | 200,813,818 | 1.93 % | 3,797,863 |
| Nigeria | 195,875,237 | 2.61 % | 4,988,926 |
| Bangladesh | 166,368,149 | 1.03 % | 1,698,398 |
| Russia | 143,964,709 | -0.02 % | -25,045 |
| Mexico | 130,759,074 | 1.24 % | 1,595,798 |
Borderless table
Add .table-borderless for a table without borders.
| Country | Population | Yearly Change | Net Change |
|---|---|---|---|
| China | 1,415,045,928 | 0.39 % | 5,528,531 |
| India | 1,354,051,854 | 1.11 % | 14,871,727 |
| U.S. | 326,766,748 | 0.71 % | 2,307,285 |
| Indonesia | 266,794,980 | 1.06 % | 2,803,601 |
| Brazil | 210,867,954 | 0.75 % | 1,579,676 |
| Pakistan | 200,813,818 | 1.93 % | 3,797,863 |
| Nigeria | 195,875,237 | 2.61 % | 4,988,926 |
| Bangladesh | 166,368,149 | 1.03 % | 1,698,398 |
| Russia | 143,964,709 | -0.02 % | -25,045 |
| Mexico | 130,759,074 | 1.24 % | 1,595,798 |
Responsive table
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or,
pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
| Country | Population | Yearly Change | Net Change |
|---|---|---|---|
| China | 1,415,045,928 | 0.39 % | 5,528,531 |
| India | 1,354,051,854 | 1.11 % | 14,871,727 |
| U.S. | 326,766,748 | 0.71 % | 2,307,285 |
| Indonesia | 266,794,980 | 1.06 % | 2,803,601 |
| Brazil | 210,867,954 | 0.75 % | 1,579,676 |
| Pakistan | 200,813,818 | 1.93 % | 3,797,863 |
| Nigeria | 195,875,237 | 2.61 % | 4,988,926 |
| Bangladesh | 166,368,149 | 1.03 % | 1,698,398 |
| Russia | 143,964,709 | -0.02 % | -25,045 |
| Mexico | 130,759,074 | 1.24 % | 1,595,798 |