Bootstrap 4 Tables

Bootstrap 4 tables are generally a series of rows and columns that contains data inside the table cell. Bootstrap table class is used to enhance the table layout and also make it device friendly i.e responsive.

Basic Bootstrap Table

To create bootstrap basic table,assign.table class to the <table> base class.

General Syntax

		<table class="table"></table>

Try It Now

Source Code

	
		<div class="container table-responsive my-2">   
    <table class="table ">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Work</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Smith</td>
                <td>Jane</td>
                <td>Web Designer</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>Doe</td>
                <td>Graphics Designer</td>
            </tr>
            <tr>
                
                <td>3</td>
                <td>Andre</td>
                <td>Ren</td>
                <td>Developer</td>
            </tr>
        </tbody>
    </table>
</div>

Try it yourself

Note:Bootstrap basic table is created easily ,by assigning .table to the <table> base class.

Dark table

Assign .table & .table-dark to the <table> base class to create dark background of the table.

General Syntax

		<table class="table table-dark">  </table>

Try It Now

Note: To create table with dark background,assign .table & .dark-table to the <table> base class.

Striped Table Row

To create bootstrap stripped row, assign .table-striped class to <table> element base class. These class adds zebra-stripes to a table.

General Syntax

		<table class="table table-striped"></table>

Try It Now

Note: Striped row of table can be created by assigning .table , & .table-striped to the <table> element base class.

Bordered Table

Assign .table-bordered class to <table> element base class.This class adds borders on all sides of the table and cells.

General Syntax

		<table class="table table-bordered"> </table>

Try It Now

Note:Bootstrap bordered table can be created very easily by assigning .table & .bordered-table class to the <table> element base class.

Responsive Table

Assign .table-responsive class to the <table> element base class to create responsive table.Basically,it adds horizontal scrollbar when when content size is too big horizontally.

General Syntax

		<table class="table table-responsive ">  </table>

Try It Now

Note: To create bootstrap responsive table, assign .table , .table-responsive to the <table> base class.

Bootstrap Table Head Color

To provide table head color,assign either .table-light or .table-dark class to <thead> element base class.The .table-light class is used to create light table head while .table-dark class is used to create dark table head.

General Syntax

		<thead class="table-light"></thead>

Try It Now

Note: The .table-light & .table-dark classes are used to create light and dark table head correspondingly.

Table Contextual Classes

General Syntax

		<tr class="table-*">  </tr>

Try It Now

Note: To provide table background color, assign table contextual classes to the <table> element base class.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS