Basic Example

Progress bar


  Progress bar

With percentage

65% Progress bar


  65%
  Progress bar

Inner text

Progress bar


  Progress bar

Inner text with percentage

Progress bar 85%


  Progress bar 85%

Colors

.bg-white

.bg-light

.bg-dark

.bg-black

.bg-primary

.bg-info

.bg-success

.bg-warning

.bg-danger

Sizes

.h-xxs

.h-xs

.h-sm

default

.h-lg

.h-xl

.h-xxl

Basic example


  <input type="checkbox" checked>

Colors



  <input type="checkbox" checked>

Sizes


  <input type="checkbox" checked>
  



  <input type="checkbox" checked>
  



  <input type="checkbox" checked>
  



  <input type="checkbox" checked>
  



  <input type="checkbox" checked>
  



  <input type="checkbox" checked>
  



  <input type="checkbox" checked>

Basic

checkbox

radio option 1

radio option 2


  
    <input type="checkbox" value="" checked>
    
    checkbox
  



  
    <input type="radio" name="a" value="option1" checked>
    
    radio option 1
  


  
    <input type="radio" name="a" value="option2" checked>
    
    radio option 2

Colors



  
    <input type="checkbox" value="" checked>
    
    checkbox
  



  
    <input type="radio" value="" checked>
    
    radio

Sizes



  
    <input type="checkbox" value="" checked>
    
    i-check-xs
  



  
    <input type="radio" value="" checked>
    
    i-check-xs

Diabled

checkbox checked and disabled

checkbox disabled

radio checked and disabled

radio disabled


  
    <input type="checkbox" value="" checked disabled>
    
    checkbox checked and disabled
  



  
    <input type="checkbox" value="" disabled>
    
    checkbox disabled
  



  
    <input type="radio" value="" checked disabled>
    
    radio checked and disabled
  



  
    <input type="radio" value="" disabled>
    
    radio disabled

Draw your svg

Draw your svg using Illustrator. Export SVG for the web. Learn more from here

You know, it's really embarrassing to define fill="#hex" every time in svg code.

This time we use svg.separator.js

Set SVG

Add class="decor" in <svg> tag

Set HTML

...

Use action

section 1

section 2



  section 1




  
	
  




  section 2

previous and nextsection are must
Must add bg-color with sections
Now its automatically set your fill and backgrund color.

More separators

Some cool SVG separators

Components documentation

Progress bar

Basic Example

With percentage

Inner text

Inner text with percentage

Colors

Sizes

iSwitches

Basic example

Colors

Sizes

iCheck and radios

Basic

Colors

Sizes

Diabled

SVG Separators

Draw your svg

Set SVG

Set HTML

Use action

section 1

section 2

section 1

section 2

More separators