• About
  • 404 page
  • career
  • Login
  • Registration
  • FAQ
  • Pricing table one
  • Pricing table two
  • Service
  • Terms & Condition
  • Privacy policy
  • Portfolio 3 column
  • Portfolio 4 column
  • Portfolio Single Image
  • Portfolio Single Video
  • Blog
  • Blog two column
  • Blog Single Image
  • Blog single video
  • Contact
  • Tables

    Basic example

    For basic styling—light padding and only horizontal dividers—add the base class .table to any <table> . It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

    # First Name Last Name Username
    1
    Mark
    Otto
    @mdo
    2
    Jacob
    Thornton
    @fat
    3
    Larry
    the Bird
    @twitter

    Striped rows

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

    # First Name Last Name Username
    1
    Mark
    Otto
    @mdo
    2
    Jacob
    Thornton
    @fat
    3
    Larry
    the Bird
    @twitter

    Bordered table

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

    # First Name Last Name Username
    1
    Mark
    Otto
    @mdo
    Mark
    Otto
    @TwBootstrap
    2
    Jacob
    Thornton
    @fat
    3
    Larry the Bird
    @twitter

    Hover rows

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

    # First Name Last Name Username
    1
    Mark
    Otto
    @mdo
    2
    Jacob
    Thornton
    @fat
    3
    Larry the Bird
    @twitter

    Condensed table

    Add .table-condensed to make tables more compact by cutting cell padding in half.

    # First Name Last Name Username
    1
    Mark
    Otto
    @mdo
    2
    Jacob
    Thornton
    @fat
    3
    Larry the Bird
    @twitter

    Contextual classes

    Use contextual classes to color table rows or individual cells.

    Class Description
    .active
    Applies the hover color to a particular row or cell
    .success
    Indicates a successful or positive action
    .info
    Indicates a neutral informative change or action
    .warning
    Indicates a warning that might need attention
    .danger
    Indicates a dangerous or potentially negative action
    # Column heading Column heading Column heading
    1
    Column content
    Column content
    Column content
    2
    Column content
    Column content
    Column content
    3
    Column content
    Column content
    Column content
    4
    Column content
    Column content
    Column content
    5
    Column content
    Column content
    Column content
    6
    Column content
    Column content
    Column content
    7
    Column content
    Column content
    Column content
    8
    Column content
    Column content
    Column content
    9
    Column content
    Column content
    Column content

    Responsive tables

    Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

    # Table heading Table heading Table heading Table heading Table heading Table heading
    1
    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
    3
    Table cell
    Table cell
    Table cell
    Table cell
    Table cell
    Table cell
    # Table heading Table heading Table heading Table heading Table heading Table heading
    1
    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
    3
    Table cell
    Table cell
    Table cell
    Table cell
    Table cell
    Table cell