Progress Complete
Fat Lost 0 / 1,000,000
WebNots Home Shop Blog Tech Tips Web Tutotials SEO Tools 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. View Demo 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 1 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 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

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

Medium Size Medium Size Progress Bars HTML for Medium Size Progress Bars

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

Thick Size Thick Progress Bars HTML for Thick Size Progress Bars

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

Default Size Default Size Progress Bars HTML for Default Size Progress Bars

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

Colored 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

Red 92%

Blue 68%

Green 78%

Aqua 78%

Yellow 92%

Brown 68%

Violet 78%

Orange 78%

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

Red 92%

Blue 68%

Green 78%

Aqua 78%

Yellow 92%

Brown 68%

Violet 78%

Orange 78%

Colored Bars with Text on it Color Progress Bar with Text HTML for Colored Progress Bars with Text
90% Complete (Sucess)
70% Complete (info)
60%Complete (warning)
50% Complete (danger)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
90% Complete (Sucess)
70% Complete (info)
60%Complete (warning)
50% Complete (danger)
Striped Bars Striped Progress Bar HTML for Striped Progress Bars
90% Complete (Sucess)
80% Complete (info)
60%Complete (warning)
50% Complete (danger)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
90% Complete (Sucess)
80% Complete (info)
60%Complete (warning)
50% Complete (danger)
Animated Bars Animated Progress Bars HTML for Animated Progress Bars
90% Complete (Sucess)
50% Complete (info)
80%Complete (warning)
70% Complete (danger)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
90% Complete (Sucess)
50% Complete (info)
80%Complete (warning)
70% Complete (danger)
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 0 Comments 0 Share Recommended Articles: 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. Name * Email * Website 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 FOLLOW US 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 Apps (20) Blogging (107) Bootstrap Tutorial (43) Browsers (54) iPhone (12) Mac (27) Make Money Online (77) SEO (130) Shortcuts (54) 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 Home Shop Blog Contact Privacy TOS BOOTSTRAP TEMPLATES 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