Fat Lost 0 / 1,000,000
Home � Website Building � Weebly Tutorials � How to Add Bootstrap Progress Bars on Weebly Site?
How to Add Bootstrap Progress Bars on Weebly Site?
Updated on Jun 4, 2017 | Posted by Editorial Staff | Website Building, Weebly Tutorials | 0 comments
Bootstrap framework offers many easy to use features and progress bars are one of them. Many different types of progress bars can be created with Bootstrap and in this article we will discuss some of them with the CSS code.
How to Add Bootstrap Progress Bars on Weebly?
Step 1 � Link Bootstrap CSS
In order to add progress bars the first step is to link the Bootstrap CSS to your Weebly site. Add the below code under �Settings > SEO > Header Code�.
Bootstrap CSS Link
You can also link the stylesheet at page level if you want the progress bars only on that page.
Step 2 � Adding Additional CSS for Progress Bars
Add the below CSS code under the �Header Code� section of the page you want to add the progress bars. The �.margin� class is used to create 10px margin so that the bars are not truncated.
Additional CSS for Progress Bars
Step 3 � Adding HTML for the Progress Bars
Below is the HTML code along with the picture of how it looks; click here to view the demo of all Bootstrap progress bars on Weebly site. The bars can be used as full width element or as part of a column. The text, percentage and the colors can be customized as per your need.
Thin Progress Bars
Thin Progress Bars
HTML for Thin Bars
The colors are defined in the additional CSS in step 2 and you can add any color you want.
Color Progress Bars
The bars are placed in two columns using �col-md-6� class, you can remove this class to make the bars full width.
HTML for Colored Progress Bars
Since Bootstrap is a framework, it may conflict with other styles on Weebly site. Hence, we recommend to use the widget codes on page level so that you can easily check all the elements on that page.
Tags: BootstrapProgress BarSkill BarWeeblyWidget
About Editorial Staff
Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community.
Leave a Reply
Your email is safe with us.
Notify me of follow-up comments by email.
Notify me of new posts by email.
Download Free eBooks
ALT Code Shortcuts PDF
Google Search Shortcuts Guide
Free HTTP Status Codes Guide
Do It Yourself SEO Guide
WordPress SEO PDF Guide
Weebly SEO Guide
View All Free eBooks
TRENDING TECH ARTICLES
ALT Code Shortcuts for Symbols
Fix Chrome Resolving Host Problem
Fix Slow Page Loading Issue in Google Chrome
View Webpage Source CSS and HTML in Google Chrome
Fix Safari Slow Loading Pages in macOS
Fix Windows 10 WiFi Connection Issue
VIBGYOR Rainbow Color Codes
Fix I�m Not A Robot reCAPTCHA Issue in Google Search
Structure of HTTP Request and Response
POPULAR WEB TUTORIALS
Move WordPress Localhost Site to Live Server
Move Live WordPress Site to Localhost
Move WordPress Media Folder to Subdomain
Fix WooCommerce Ajax Loading Issue
Edit Weebly Source Code HTML and CSS
Add Scroll To Top Button in Weebly
Add Table in Weebly Site
Add Vertical Timeline Widget in Weebly
Bootstrap Advanced Data Table Widget
Free AdWords Coupon Codes
Subscribe to Blog via Email
Subscribe to get fresh content from WebNots on your email inbox!!!
Enter Email Address
Popular Free Web Tools
Find My IP Address
Find My Browser
Webpage Source Code Viewer
Bulk Geo IP Locator
QR Code Generator
Popular Free SEO Tools
HTTP Header Checker
Search Engine Spider Simulator
Robots.txt File Generator
Meta Tags Generator
Auto Backlink Generator
View 80+ Free SEO Tools
FREE RESOURCES AT WEBNOTS
Bootstrap Tutorial (43)
Make Money Online (77)
Tech Fixes (15)
Tech How to (58)
Tech Tips (309)
Web Designing (111)
Web Traffic (69)
Website Building (821)
Weebly Tips & Tricks (70)
Weebly Tutorials (219)
Windows 10 (93)
WordPress Tips & Tricks (96)
WordPress Tutorials (226)
Download free search engine optimization guide for beginners Download SEO eBook
WebNots � A Tech & Web Platform
WebNots is a knowledge sharing platform for webmasters and tech geeks. We have published 1000+ free articles focusing on website building and technology. We share our experience and knowledge through blog articles, demos, eBooks, videos and glossary terms for the benefit of webmasters and tech community.
Fresh From the Blog
How to Change Profile Picture on Your Mac?
9 Ways to Take Screenshot in Mac
Disable Two Times Message Notifications Alerts in iPhone
Fix Handoff Continuity Connection Between MacBook and iPhone
How to Import Bookmarks from Firefox to Google Chrome?
Other Services From WebNots
Free Web and SEO Tools
Bootstrap 4 Examples Site
Weebly Showcase Site
Flag Counter Traffic Tracker
Site Up or Down Checking Service
� 2018 � WebNots Web Consulting Services
Finder Bootstrap 4 Theme
Parallax Bootstrap Template
Entrance Bootstrap 4 Theme
Colorful Bootstrap Template
Elegance Bootstrap Template
Brilliance Bootstrap Theme
Pleasant Bootstrap Theme
StoreFront Bootstrap Theme
TakeOff Maintenance Mode
Rocket Coming Soon
VIEW ALL TEMPLATES