YouTip

Pricing tables are one of the main components of any website that sells products or services. Even though Bootstrap 3 (like previous versions) does not directly provide a pricing table component, it does provide a list group component. This component is designed to render complex, customized content. Leveraging this feature, we will create a simple pricing table in this tutorial, explain the CSS rules used to create a list group, and show how to customize it.   You can (#). Below is the example code. ### 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 list groups. The following code demonstrates how to achieve this. You can (#). The CSS code for positioning badges within the list group is shown below. .list-group-item > .badge { float: right;}.list-group-item > .badge + .badge { margin-right: 5px;} Please note that due to `float:right`, the actual content within the list group item will be forced to align to the right. ### Linked Items You can (#). The CSS code for positioning linked items within the list group is shown below. 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 (#). This example demonstrates a list group with custom content. The HTML and CSS code that appears in Bootstrap's CSS is shown below. 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 yet attractive pricing table. Below is the basic HTML code we used to create the pricing table. Please 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 to the first list item in the middle column. Now, we will directly customize the look and feel by adding CSS classes. The first snippet of CSS code adds 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%; } But 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 badge stand out, we add the following CSS code. .badge { background-color: #FAFAD2; color:#FF8C00; } You can (#).