@extends('layouts/contentLayoutMaster') @section('title', 'Bootstrap Tables') @section('content')

Table Basic

Using the most basic table Leanne Grahamup, 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 bootstrap tables.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Dark Table

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

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Table head options

Similar to tables and dark tables, use the modifier classes .thead-dark to make <thead>s appear dark.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Use the modifier class .thead-light to make <thead>s appear light.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

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.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Striped rows with inverse dark

Use .table-dark 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.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Bordered table

Add .table-bordered for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark along with .table-bordered.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Borderless Table

Add .table-borderless for a table without borders. It can also be used on dark tables.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Hoverable rows

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

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Small Table

Add .table-sm class with .table to display small size table.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Contextual classes

Use contextual classes to color table rows or individual cells. Read full documnetation here.

Project Client Users Status Actions
Figma Figma Project Ronnie Shane
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending
Figma Figma Project Janne Ale
Avatar
Avatar
Avatar
Active
React React Custom Ted Richer
Avatar
Avatar
Avatar
Scheduled
Bootstrap Latest Bootstrap Perry Parker
Avatar
Avatar
Avatar
Pending
Angular Angular UI Ana Bell
Avatar
Avatar
Avatar
Completed
Bootstrap Bootstrap UI Jerry Milton
Avatar
Avatar
Avatar
Completed
Table without card
Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}. Read full documentation here.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Table Hover Animation

Add .table-hover-animation to enable a hover stat with animation on table rows within a <tbody>.

Project Client Users Status Actions
Angular Angular Project Peter Charls
Avatar
Avatar
Avatar
Active
React React Project Ronald Frest
Avatar
Avatar
Avatar
Completed
Vuejs Vuejs Project Jack Obes
Avatar
Avatar
Avatar
Scheduled
Bootstrap Bootstrap Project Jerry Milton
Avatar
Avatar
Avatar
Pending
@endsection