Helper Icon Image
Unlimited Access

Upgrade to plan to get access to unlimited reports

Upgrade

Buttons

Default Buttons

Use the button classes on an <a>, <button>, or <input> element.

                                                    
                                                        <button type="button" class="btn btn-primary">Primary</button>
                                                        <button type="button" class="btn btn-secondary">Secondary</button>
                                                        <button type="button" class="btn btn-success">Success</button>
                                                        <button type="button" class="btn btn-danger">Danger</button>
                                                        <button type="button" class="btn btn-warning">Warning</button>
                                                        <button type="button" class="btn btn-info">Info</button>
                                                        <button type="button" class="btn btn-light">Light</button>
                                                        <button type="button" class="btn btn-dark">Dark</button>
                                                        <button type="button" class="btn btn-link">Link</button>
                                                    
                                                

Button Outline

Use a classes .btn-outline-** to quickly create a bordered buttons.

                                                    
                                                        <button type="button" class="btn btn-outline-primary">Primary</button>
                                                        <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                        <button type="button" class="btn btn-outline-success"><i class="uil-cloud-computing"></i> Success</button>
                                                        <button type="button" class="btn btn-outline-danger">Danger</button>
                                                        <button type="button" class="btn btn-outline-warning">Warning</button>
                                                        <button type="button" class="btn btn-outline-info"><i class="uil-circuit"></i> Info</button>
                                                        <button type="button" class="btn btn-outline-light">Light</button>
                                                        <button type="button" class="btn btn-outline-dark">Dark</button>
                                                    
                                                

Button-Rounded

Add .rounded-pill to default button to get rounded corners.

                                                    
                                                        <button type="button" class="btn btn-primary rounded-pill">Primary</button>
                                                        <button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
                                                        <button type="button" class="btn btn-success rounded-pill">Success</button>
                                                        <button type="button" class="btn btn-danger rounded-pill">Danger</button>
                                                        <button type="button" class="btn btn-warning rounded-pill">Warning</button>
                                                        <button type="button" class="btn btn-info rounded-pill">Info</button>
                                                        <button type="button" class="btn btn-light rounded-pill">Light</button>
                                                        <button type="button" class="btn btn-dark rounded-pill">Dark</button>
                                                        <button type="button" class="btn btn-link rounded-pill">Link</button>
                                                    
                                                

Button Outline Rounded

Use a classes .btn-outline-** to quickly create a bordered buttons.

                                                    
                                                        <button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
                                                        <button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
                                                        <button type="button" class="btn btn-outline-success rounded-pill"><i class="uil-cloud-computing"></i> Success</button>
                                                        <button type="button" class="btn btn-outline-danger rounded-pill">Danger</button>
                                                        <button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
                                                        <button type="button" class="btn btn-outline-info rounded-pill"><i class="uil-circuit"></i> Info</button>
                                                        <button type="button" class="btn btn-outline-light rounded-pill">Light</button>
                                                        <button type="button" class="btn btn-outline-dark rounded-pill">Dark</button>
                                                    
                                                

Button-Sizes

Add .btn-lg, .btn-sm for additional sizes.

                                                    
                                                        <button type="button" class="btn btn-primary btn-lg">Large</button>
                                                        <button type="button" class="btn btn-info">Normal</button>
                                                        <button type="button" class="btn btn-success btn-sm">Small</button>
                                                    
                                                

Button-Disabled

Add the disabled attribute to <button> buttons.

                                                    
                                                        <button type="button" class="btn btn-info" disabled>Info</button>
                                                        <button type="button" class="btn btn-success" disabled>Success</button>
                                                        <button type="button" class="btn btn-danger" disabled>Danger</button>
                                                        <button type="button" class="btn btn-dark" disabled>Dark</button>
                                                    
                                                

Icon Buttons

Icon only button.



                                                    
                                                        <button type="button" class="btn btn-light"><i class="mdi mdi-heart-outline"></i> </button>
                                                        <button type="button" class="btn btn-danger"><i class="mdi mdi-window-close"></i> </button>
                                                        <button type="button" class="btn btn-dark"><i class="mdi mdi-music"></i> </button>
                                                        <button type="button" class="btn btn-primary"><i class="mdi mdi-star"></i> </button>
                                                        <button type="button" class="btn btn-success"><i class="mdi mdi-thumb-up-outline"></i> </button>
                                                        <button type="button" class="btn btn-info"><i class="mdi mdi-keyboard"></i> </button>
                                                        <button type="button" class="btn btn-warning"><i class="mdi mdi-wrench"></i> </button>
                                                        
                                                        <button type="button" class="btn btn-light"><i class="mdi mdi-heart me-1"></i> <span>Like</span> </button>
                                                        <button type="button" class="btn btn-warning"><i class="mdi mdi-rocket me-1"></i> <span>Launch</span> </button>
                                                        <button type="button" class="btn btn-info"><i class="mdi mdi-cloud me-1"></i> <span>Cloud Hosting</span> </button>
                                                        
                                                        <button type="button" class="btn btn-outline-success"><i class="uil-money-withdrawal"></i> Money</button>
                                                        <button type="button" class="btn btn-outline-primary"><i class="uil-paypal"></i> PayPal</button>
                                                        <button type="button" class="btn btn-outline-danger"><i class="uil-cog"></i> Settings</button>
                                                    
                                                

Block Button

Create block level buttons by adding class .d-grid to parent div.

                                                    
                                                        <div class="d-grid">
                                                            <button type="button" class="btn btn-primary">Block Button</button>
                                                            <button type="button" class="btn btn-sm btn-info">Block Button</button>
                                                            <button type="button" class="btn btn-xs btn-success">Block Button</button>
                                                        </div>
                                                        <!-- end d-grid -->  
                                                    
                                                

Button Group

Wrap a series of buttons with .btn in .btn-group.



                                                    
                                                        <!-- Button Group -->
                                                        <div class="btn-group mb-2">
                                                            <button type="button" class="btn btn-light">Left</button>
                                                            <button type="button" class="btn btn-light">Middle</button>
                                                            <button type="button" class="btn btn-light">Right</button>
                                                        </div>
                                                        
                                                        <!-- Button Group with Dropdowns-->
                                                        <div class="btn-group mb-2">
                                                            <button type="button" class="btn btn-light">1</button>
                                                            <button type="button" class="btn btn-primary">2</button>
                                                            <button type="button" class="btn btn-light">3</button>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
                                                                <div class="dropdown-menu">
                                                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <!-- Button Group Vertical-->
                                                        <div class="btn-group-vertical mb-2">
                                                            <button type="button" class="btn btn-light">Top</button>
                                                            <button type="button" class="btn btn-light">Middle</button>
                                                            <button type="button" class="btn btn-light">Bottom</button>
                                                        </div>
                                                        
                                                        <!-- Button Group Vertical with Dropdowns-->
                                                        <div class="btn-group-vertical mb-2">
                                                            <button type="button" class="btn btn-light">Button 1</button>
                                                            <button type="button" class="btn btn-light">Button 2</button>
                                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                            </div>
                                                        </div>
                                                    
                                                
Settings
Color Scheme

Left Sidebar

Purchase Now