Bootstrap is the love of many front end developers. Not only for its easy to use nature but also for its numerous range of components. It provides various inbuilt classes to style the html table. So in this post i will show you how to use those classes to create bootstrap table. In addition to these at the end i will show you how to create your own pricing table with bootstrap.

Brief description about tables

If you are familiar with html then you know what is html table element. A table has 3 parts a head,a foot and a body. Everything we put inside body its shows between the head and foot of the table. The body part actually contains the values.

html tables

Before the invention of HTML 5, tables did the work to structure layout. Now a days most of the sites use multi column layout. So you can imagine how hard it would be to create such layout with tables. Let’s create a simple markup to show you how to use tables.

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>footer 1</th>
			<th>footer 2</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>John</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

The above table show how to use all the table tags. In addition to all these you can also use caption tag to include table captions.

Bootstrap table

Bootstrap provides various classes to make some awesome tables. First of all the .table class is the main class that you have to include in the table element. So now after the table class you can include 4 different classes to style it in the way you want. Let’s check out each one of them with examples. Before i start to explain the codes you must have to know how to use bootstrap. Don’t worry if you have no knowledge about it. I have already written some posts about bootstrap. Bootstrap gird will be best post for you to follow. So read it first and then come back to this post. You will also need to download bootstrap and jquery so use the link to download them first.

The table class

The markup will be same as above but the table will have a class table.

<table class="table">

Now save the code and check it in browser. I have created a table with sample data to help you with how the result will look like.

bootstrap table class

The table bordered class

The table bordered class is one of the additional class of bootstrap table. It adds a 1 pixels border around the table and make it look much smarter.

<table class="table table-bordered">

You will just need to put this class after the table class and it’s done. So now check it in browser, as a result you will get something like below.

bootstrap table bordered

The table hover class

If you are going to use links in your table then this class will be handy. It provides a great looks and feel and improves your User Experience(UX).

<table class="table table-hover">

Just like the others you have to put it after the table class. So the final result on the browser window will look like below.

bootstrap table hover

The table condensed class

This class makes the table condensed by lowering the padding and margin between cells.

<table class="table table-condensed">

You can get the following result by using the above markup for your table.

bootstrap table condensed

The table striped class

A striped table gives a unique stripe looks.Its really helps you to improve User Interface.

<table class="table table-striped">

The result will look like below.

Bootstrap table striped

The bootstrap table responsive class

In addition to the above 4 bootstrap provides a special class table responsive. It has a little different approach, you have to wrap your table into a div and set that div class to table-responsive. It will make your table responsive no matter how small the view port is. So it’s one of the best features of bootstrap table.

However we have completed each and every part of bootstrap table. So now let’s move to the next level and create pricing tables with bootstrap.

CSS pricing tables with bootstrap

Most probably pricing tables are used in every business sites. It shows the different categories of service you are providing. In addition to these it also helps you to catch the buyers attention with your best package.

css pricing tables

So in this post i will help you to create simple and elegant pricing tables with bootstrap. Before you start the project follow the given info graph to make things easier.

bootstrap table classes

Pricing tables markup

I hope you guys are familiar with bootstrap grids so i will just show what you have to put inside the row.

<div class="col-lg-4 col-md-4 col-sm-4">
</div>

I will create 3 tables and each of them will have equal width. So inside  the above div add markup to create table.

<thead>
	<tr><th><h4>BASIC</h4></th></tr>
	<tr><th><h2>10$ / Y</h2></th></tr>
</thead>

I am adding just the table class to the table element but you can use other classes too. Inside the table head i have added 2 table headers one for the package name other for the price. So now our head is ready let’s move to the body.

<tbody>
	<tr><td>10GB STORAGE</td></tr>
	<tr><td>100GB BANDWIDTH</td></tr>
	<tr><td>10 DOMAIN'S</td></tr>
	<tr><td>10 EMAIL'S</td></tr>
	<tr class="buy"><td>
		<a href="#" role="button" class="btn btn-default">GET STARTED</a>
	</td></tr>
</tbody>

In the above piece of code i have just added 5 rows and the last one has a class called buy. Because we will use it to change the background of the last row. We don’t need any footer for our table. So that’s the markup for our pricing tables. Now create two other tables by using the same markup. Finally our markup is ready now get ready for the css part.

If you guys are familiar with bootstrap and looking for a way to customize bootstrap modals then follow our post. In addition to modals i have also written how to create profile cards with bootstrap.

pricing tables style sheet

Before i start to write coders for our project you guys must check out how it will look like.

I hope you guys have liked this project so let’s start to write codes and explain the css. First of all i have added some basic styles to the root element i.e body. So i am not going to explain it in details rather i would move to the main table styles.

.table {
	background:#fff;
	position:relative;
	transition:0.3s all linear;
	box-shadow:5px 5px 3px #808080;
	top:0px;
}

The table is positioned relative to create some hover effects with jQuery. After that the box shadow property makes the tables look like its popping out of the box. The transition property makes sure the hover effects will look smooth.

thead * {
	text-align:center;
	margin:5px;
}
thead tr:first-child {
	background:#696969;
	color:#fff;
}

The table head is styled to hold contents at center and the first row is changed to have different background. So that make’s it easy to catch eye’s of the visitor. Now for the best package change the first row background to make it look distinct from others.

.main thead tr:first-child {
	background:#202020;
}

Notice that i have added a class main to the div which contains the second table. Now we need different background color for our last row so let’s add it.

.buy {
	background:rgba(0,0,0,0.2);
}

Now our style sheet is ready but if you resize the browser window you will see after a certain view port its occupying lot’s of space. So to make sure it doesn’t look bad at smaller screens(less than 768px) add a simple media query.

@media(max-width:767px) {
	.row div {
		width:70%;
		margin:10px auto;
	}
}

The above code is enough to make our bootstrap table responsive. Finally our project is completed and i hope you guys have learnt something from it.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us