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

Soft Buttons

Use a classes .btn-soft-** to quickly create a soft background color buttons.

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

Soft Rounded Buttons

Use a classes .btn-soft-** .rounded-pill to quickly create a soft background color buttons with rounded.

                                                    
                                                        <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-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-sm btn-primary">Block Button</button>
                                                            <button type="button" class="btn btn-lg 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>
                                                    
                                                

Toggle Button

Add data-bs-toggle="button" to toggle a button�s active state. If you�re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

                                                            
                                                                <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
                                                                <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
                                                                <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
                                                            
                                                        

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link
                                                            
                                                                <a class="btn btn-primary" href="#" role="button">Link</a>
                                                                <button class="btn btn-primary" type="submit">Button</button>
                                                                <input class="btn btn-primary" type="button" value="Input">
                                                                <input class="btn btn-primary" type="submit" value="Submit">
                                                                <input class="btn btn-primary" type="reset" value="Reset">
                                                            
                                                        

Basic Button

Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.

                                                    <button type="button" class="btn">Base class</button><button type="button" class="btn">Base class</button>
                                                

Focus Ring Custom

Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.

                                                    
                                                        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
                                                            Custom focus ring
                                                        </a>

                                                        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-color: rgba(var(--ct-success-rgb), .25)">
                                                            Green focus ring
                                                        </a>

                                                        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-x: 10px; --ct-focus-ring-y: 10px; --ct-focus-ring-blur: 4px">
                                                            Blurry offset focus ring
                                                        </a>
                                                    
                                                

Focus Ring Utilities

In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

                                                    
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
                                                        <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
                                                        <p class="mb-0"><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
                                                    
                                                
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position