Layout

Choose your preferred layout

layoutlayoutlayout

Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brandbrand

Progress

Basic Progress

Basic progress in diffrent color backgrounds. Add .bg-*modifier class to change the color. Use Bootstrap width utilities for setting the width of a progress bar.

Rounded Progress

Create rounded progress using .progress .progress-bar-roundedclass.

Striped Progress

Add .progress-bar-stripedto any .progress-barto apply a stripe via CSS gradient over the progress bar’s background color. Add .progress-bar-animatedto .progress-barto animate the stripes right to left via CSS3 animations.

Progress sizes

Size whatever you want just add .progress-xs, sm, md, lg, xlor you can just add height utility classes.

Size extra small
Size small
Size medium
Size large
Size extra large
Progress with labels

Add labels on top of your progress bars by placing text within the .progress-labelinside .progress-lb-wrapand for label left add class .lb-side-leftwith .progress-wrap.

Labels on top
Labels on left
Labels inside

Add labels to your progress bars by placing text within the .progress-bar.

25%
50%
loading
photoshop
Multiple Bars

Include multiple progress bars in a progress component if you need.