❮ Bootstrap V2 Icons Bootstrap V2 Scrollspy Plugin ❯

Using Bootstrap List Group Component to Create a Price Table

Objective

A price table is one of the main components of any website that sells products or services. Even though Bootstrap 3 (like its previous versions) does not directly provide a price table component, it does offer the list group component. The purpose of this component is to render complex custom content. Utilizing this feature, we will create a simple price table in this tutorial and explain the CSS rules used to make a list group, as well as how to customize it.

View Demo

Typical Appearance

You can view the demo online, and below is the example code.

<div class="container">
<div class="row">
  <ul class="list-group col-lg-4">
  <li class="list-group-item">Unlimited Users</li>
  <li class="list-group-item">Unlimited storage</li>
  <li class="list-group-item">Forum support</li>
  <li class="list-group-item">More....</li>
  <li class="list-group-item">More.....</li>
</ul>
</div>
</div>

list-group and list-group-item

The CSS rules for the list-group class are as follows:

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
}

.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

Badges

You can use the badges component to include in list-groups. The following code demonstrates how to achieve this.

<div class="container">
<div class="row">
  <ul class="list-group col-lg-4">
  <li class="list-group-item"><span class="badge">Very important</span>Unlimited Users</li>
  <li class="list-group-item">Unlimited storage</li>
  <li class="list-group-item">Forum support</li>
  <li class="list-group-item">More....</li>
  <li class="list-group-item">More.....</li>
</ul>
</div>
</div>

You can click here to view the demo online. Below shows the CSS code for positioning badges within list groups.

.list-group-item > .badge {
  float: right;
}

.list-group-item > .badge + .badge {
  margin-right: 5px;
}

Note that due to float:right, it forces the actual content within the list group items to the right.

Linked Items

<div class="container">
<div class="row">
  <div class="list-group col-lg-4">
  <a href="#" class="list-group-item active">
    The pricing list
  </a>

<a href="#" class="list-group-item">Unlimited users</a> <a href="#" class="list-group-item">Unlimited storage</a> <a href="#" class="list-group-item">email support</a> <a href="#" class="list-group-item">More...</a> </div> </div> </div>

You can click here to view the demo online. The CSS code shown below is for positioning linked items within a list group.

a.list-group-item {
  color: #555555;
}

a.list-group-item .list-group-item-heading {
  color: #333333;
}

a.list-group-item:hover,
a.list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

a.list-group-item.active .list-group-item-heading,
a.list-group-item.active:hover .list-group-item-heading,
a.list-group-item.active:focus .list-group-item-heading {
  color: inherit;
}

a.list-group-item.active .list-group-item-text,
a.list-group-item.active:hover .list-group-item-text,
a.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}

Custom Content

View the example online, which demonstrates a list group with custom content. The HTML and CSS code shown below is from Bootstrap's CSS.

<div class="container">
<div class="row">
  <div class="list-group col-lg-4">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>
</div>
</div>

CSS Code

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

Pricing Table

Now, we will take the basic structure of the list group component and transform it into a simple and attractive pricing table.

Below is the basic HTML code we use to create the pricing table. Note that we have added a button inside the last list item. For the leftmost and rightmost columns, we use Bootstrap's default buttons. For the middle column, we add a button with a different class (warning) to make it stand out. Additionally, we have added a badge in the first list item of the middle column.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
&lt;!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group col-lg-4">
<li class="list-group-item">Bronze Package</li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">Forum Support</li>
<li class="list-group-item">$9/Month</li>
<li class="list-group-item"><a href="#"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
</ul>
<!--second-->
<ul class="list-group col-lg-4">
<li class="list-group-item">Gold Package<span class="badge">Most Preferred</span></li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">24X7 Support</li>
<li class="list-group-item">$25/Month</li>
<li class="list-group-item"><a href="#"><button class="btn btn-warning btn-lg">Buy Now</button></a></li>
</ul>
<!--third-->
<ul class="list-group col-lg-4">
<li class="list-group-item">Silver Package</li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">email support</li>
<li class="list-group-item">$15/Month</li>
<li class="list-group-item"><a href="#"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Now, we will directly customize the appearance and feel by adding CSS classes. The first snippet of CSS code will add some top padding to the page.

body { padding-top: 70px; }


Then, by adding the following CSS code, we will customize the background color, font color, text alignment, and font size of the list item content.

ul.list-group.col-lg-4 > li { background-color: #c952ca; color: white; text-align: center; font-size: 125%; }


However, if we want the first list item in the middle column to look different, we need to add the following CSS code. We use the *:first-child* pseudo-element to access the desired list item.

ul.list-group.col-lg-4 > li.list-group-item:first-child { background-color: #64086f; font-size: 200%; }


To make the badges stand out, we add the following CSS code.

.badge { background-color: #FAFAD2; color: #FF8C00; } ```

You can click here to view an example online.

❮ Bootstrap V2 Icons Bootstrap V2 Scrollspy Plugin ❯