How to Use Bootstrap Columns to Create a Stacked List of Features

The HTML lists have been one of the most important building blocks of the web for decades. As much as the ol and the ul tags are functional, without any styling, they tend to be quite boring. However, with the help of Bootstrap and FontAwesome icons, you can create beautiful and elegant looking lists using HTML lists. While this is a tutorial to create a stacked list of features, with the same code, you can also create price tables as well.

Getting Started

Since we will be using Bootstrap columns and FontAwesome icons, we put their CDN links in our HTML file:

Next, we put the code for our HTML list inside the Bootstrap column:

HTML

Notice that above, we used an "i" tag with "fa" and "fa-check" classnames. The "i" tag is the tag for FontAwesome icons. FontAwesome uses the "fa" classname to style its icon fonts and "fa-check" is the specific classname for the checkmark icon we want to use. FontAwesome has a different classname for each icon. 

Once we're done writing the HTML code, we style our column and list using CSS:

CSS

The ul or the unordered list we use display bullet points before each list item as a default. We removed the bullet points by selecting the ul and setting the list-style-type value to "none" so that we can use the FontAwesome checkmark icon instead of the bullet points. You can cody the code above, customize the background color of your column and choose the icon you want to use for your list.

Here's our finished featured list: