Home > Bootstrap > Bootstrap – Table style classes

Bootstrap – Table style classes

If you are new to Bootstrap, refer my previous article to get started with Bootstrap

In this article, lets see how to apply styles to table control.

Lets add a table, with 4 rows with no custom styling and it would render as below.

bs_tbl4

HTML table with no custom styling

Now lets see, how quickly we can apply Bootstrap styling and make the table responsive and vibrant.

bs_tbl2

Table with Responsive UI

In the above screen, browser has shrunk to fit to tablet dimensions but still the table has’t distorted which makes it responsive.

Below is the table script to achieve above styling

<div class=”container”>
<div class=”table-responsive”>
<table class=”table table-striped table-bordered table-hover“>

🙂

Advertisement
Categories: Bootstrap Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: