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 .btn-rounded to default button to get rounded corners.

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

Button Outline Rounded

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

                                                    
                                                        <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
                                                        <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
                                                        <button type="button" class="btn btn-outline-success btn-rounded"><i class="uil-cloud-computing"></i> Success</button>
                                                        <button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
                                                        <button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
                                                        <button type="button" class="btn btn-outline-info btn-rounded"><i class="uil-circuit"></i> Info</button>
                                                        <button type="button" class="btn btn-outline-light btn-rounded">Light</button>
                                                        <button type="button" class="btn btn-outline-dark btn-rounded">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 mr-1"></i> <span>Like</span> </button>
                                                        <button type="button" class="btn btn-warning"><i class="mdi mdi-rocket mr-1"></i> <span>Launch</span> </button>
                                                        <button type="button" class="btn btn-info"><i class="mdi mdi-cloud mr-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,with by adding add .btn-block.

                                                    
                                                        <button type="button" class="btn btn-block btn-primary">Block Button</button>
                                                        <button type="button" class="btn btn-block btn-sm btn-info">Block Button</button>
                                                        <button type="button" class="btn btn-block btn-xs btn-success">Block Button</button>
                                                    
                                                

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-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-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

Width

Left Sidebar

Purchase Now