Basic table

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of ng-bootstrap tables.

Example 1: Table with outer spacing

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Example 2: Minimal Table with no outer spacing.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Inverse table with info background

You can also invert the colors—with light text on dark backgrounds—with .bg-info , .bg-success , .bg-warning and .bg-danger classes.

To set the light background color use .bg-[color] class where [color] is the value of your selected color from modern color palette. So for teal color background class will be .bg-teal. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.

To set the selected background color lighten use .bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from modern color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Table head options

Similar to default and inverse tables, use one of two modifier classes .thead-default or .thead-inverse to make <thead>s appear light or dark gray.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}
# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Table head options with primary background

Use background classes bg-* to make custom thead background. You can also use Modern Admin color palette classes for background.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}
# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Striped rows with inverse table

Use .table-inverse with .table-striped to add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Bordered table

Add.table-bordered for borders on all sides of the table and cells.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Bordered striped

Use .table-striped with .table-bordered to add zebra-striping to any table row within the <tbody>.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Bordered Table Inverse

Use .table-inverse with .table-bordered to add zebra-striping to any table row within the <tbody>.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# Firstname Lastname Username
{{ i + 1 }} {{ country.firstname }} {{ country.lastname }} {{ country.username }}