A responsive Bootstrap column chart: 3 demos

The column chart

Presenting information in a graphical format like bar charts, columns etc. is always eye catching and says many words than lots of textual information.

In this tutorial, I am going to show you a columns chart that is based on Bootstrap and jQuery. The jQuery part is just a few lines of code (no external JS file other than the jQuery library is required).

The markup contains Bootstrap classes and custom CSS for creating columns for the chart. First, have a look at demos which is followed by the guide to set up this chart for your project.

An example of SEO chart

In this example, I have created an SEO chart for the activities based on its importance. The chart contains activities like creating content, earning backlinks, trustworthiness of content, authority, and engagement of the users. The chart bars or percentage is only for demonstration purpose. In real, it may vary.

Bootstrap chart

See online demo and code

So, how is this chart created? First of all, if you are not already done, include the Bootstrap CSS and jQuery library in the <head> section.

The <style> section contains custom CSS that defines the color scheme and other properties of the charts. See this in the demo page.

In the markup section, the legend-title class is used for creating legend like SEO or whatever purpose the chart is created for.

The <div> containing legend legend-right  with item classes specify the levels in the chart like Highest, High, Good, Poor etc.

While the .bar class in the <div> is used to specify the percentage by using data-percent attribute and inside this you will also specify the title of that bar, for example, Content, Links, Engagement etc. in the demo.

Similarly, you will create the required number of vertical bars in the chart. Finally, just above the </body>closing tag, the code of jQuery is written.

You may get the complete code of this example in the demo page’s code section.

Adding more bars in chart example

As mentioned earlier, you may use the .item class with .bar for creating as many bars as you need in the chart (depending on the available space). In this example, I have added three more bars for the demonstration only:

Bootstrap vertical chart

See online demo and code

This markup is used for single chart bar:

<div class="item">

<div class="bar">

<span class="percent">65%</span>

<div class="item-progress" data-percent="65">

<span class="title">Links</span>





Get the complete code in the demo page.

A demo of changing the colors of bars

By changing the custom CSS in the <style> section, you may change the colors of bars to match with the rest of design of your website. For that, simply find and change the properties of CSS like background-color etc.

Check out this demo where I just changed the colors of bars for showing percentage.

Bootstrap vertical chart colors

See online demo and code

In order to change the colors as shown in the demo, you simple need to change .column-chart > .chart > .item > .bar > .item-progress and .column-chart > .chart > .item > .bar > span.percent properties.

Credits: Berg

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️