{% set title = 'Table Basic' %} {% set page = 'table-basic.html' %} {% extends "layouts/main.html" %} {% block css%} {% endblock %} {% block content %}
Table

#### Basic

Using the most basic table markup, here’s how `.table`-based tables look in Bootstrap.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Bordered

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

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Striped

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

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Hover

Use `.table-hover` for hover effect

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Small

Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Responsive

Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.

For Different break point use `.table-responsive-sm` or `.table-responsive-md` or `.table-responsive-lg` or `.table-responsive-xl` or `.table-responsive-xxl`

# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell

{% endblock %} {% block js %} {% endblock %}