Module Themes
Menu Options
Menu Styles
Headers
Layouts
Footers
Breadcrumbs
Granular Styling
Accessibility
Google Translator
RTL
Fast-Track design & development with enterprise functionality in just a few clicks
Customize the font, size, foreground and background colors of each individual component including header, menu (root items, sub menus, active menus, headings, mobile menu, vertical menu, mega menu), body, headings, paragraphs, and links (visited, hover, active)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> </div> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
1 2 3 4 5
<div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Complete (success)</span> </div> </div>
<div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"> <span class="sr-only">45% Complete</span> </div> </div>
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
<div class="row"> <div class="col-md-4"> <h6>No Border Radius</h6> <div class="progress progress-no-border-radius"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> <div class="col-md-4"> <h6>Border Radius</h6> <div class="progress progress-border-radius"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> <div class="col-md-4"> <h6>Default</h6> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> </div>
<div class="row"> <div class="col-md-4"> <h6>Small</h6> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> <div class="col-md-4"> <h6>Default</h6> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> <div class="col-md-4"> <h6>Large</h6> <div class="progress progress-lg"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> </div> </div>
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
<div class="progress-bars"> <div class="progress-label"> <span>HTML/CSS</span> </div> <div class="progress"> <div class="progress-bar progress-bar-primary" data-appear-progress-animation="100%"> <span class="progress-bar-tooltip">100%</span> </div> </div> <div class="progress-label"> <span>Design</span> </div> <div class="progress"> <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="300"> <span class="progress-bar-tooltip">85%</span> </div> </div> <div class="progress-label"> <span>WordPress</span> </div> <div class="progress"> <div class="progress-bar progress-bar-primary" data-appear-progress-animation="75%" data-appear-animation-delay="600"> <span class="progress-bar-tooltip">75%</span> </div> </div> <div class="progress-label"> <span>Photoshop</span> </div> <div class="progress"> <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="900"> <span class="progress-bar-tooltip">85%</span> </div> </div> </div>
<div class="progress-bars"> <div class="progress-label"> <span>Primary</span> </div> <div class="progress"> <div class="progress-bar progress-bar-primary" data-appear-progress-animation="50%"> <span class="progress-bar-tooltip">50%</span> </div> </div> <div class="progress-label"> <span>Secondary</span> </div> <div class="progress"> <div class="progress-bar progress-bar-secondary" data-appear-progress-animation="70%" data-appear-animation-delay="300"> <span class="progress-bar-tooltip">70%</span> </div> </div> <div class="progress-label"> <span>Tertiary</span> </div> <div class="progress"> <div class="progress-bar progress-bar-tertiary" data-appear-progress-animation="75%" data-appear-animation-delay="600"> <span class="progress-bar-tooltip">75%</span> </div> </div> <div class="progress-label"> <span>Quaternary</span> </div> <div class="progress"> <div class="progress-bar progress-bar-quaternary" data-appear-progress-animation="40%" data-appear-animation-delay="900"> <span class="progress-bar-tooltip">40%</span> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<div class="row"> <div class="col-md-4"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar only-icon"> <div class="circular-bar-chart" data-percent="55" data-plugin-options="{'barColor': '#0088CC'}"> <em class="fas fa-star"></em> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar single-line"> <div class="circular-bar-chart" data-percent="58" data-plugin-options="{'barColor': '#333'}"> <strong>HTML/CSS</strong> </div> </div> </div> </div>
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
<div class="row"> <div class="col-md-4"> <div class="circular-bar circular-bar-sm"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 85, 'lineWidth': 3, 'barColor': '#0088CC'}"> <label>75%</label> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar circular-bar-lg"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 250, 'barColor': '#0088CC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> </div>
<div class="row"> <div class="col-md-4"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 3, 'barColor': '#0088CC', 'trackColor': '#CCC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 10, 'lineCap': 'square','barColor': '#0088CC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> <div class="col-md-4"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 15, 'lineCap': 'square', 'scaleColor': '#999', 'barColor': '#0088CC'}"> <strong>HTML/CSS</strong> <label>75%</label> </div> </div> </div> </div>