Buttons

Examples

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Buttons on Bootstrap

Default Buttons

                                        
                                            <button type="button" class="btn btn-default">Default</button>
                                            <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-purple">Purple</button>
                                            <button type="button" class="btn btn-light">Light</button>
                                            <button type="button" class="btn btn-dark">Dark</button>

Use any of the available <a> , <button> , or <input> classes .btn to quickly create a styled button.

Button Rounded

                                        
                                            <button type="button" class="btn btn-default rounded-pill">Default</button>
                                            <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-purple rounded-pill">Purple</button>
                                            <button type="button" class="btn btn-light rounded-pill">Light</button>
                                            <button type="button" class="btn btn-dark rounded-pill">Dark</button>

Use .rounded-pill with a default button to give it pill-shaped rounded corners.

Button Outline

                                        
                                            <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"> 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">Info</button>
                                            <button type="button" class="btn btn-outline-purple">Purple</button>
                                            <button type="button" class="btn btn-outline-light">Light</button>
                                            <button type="button" class="btn btn-outline-dark">Dark</button>

Use the .btn-outline-** classes to quickly create buttons with borders.

Button Outline Rounded

                                        
                                            <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">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">Info</button>
                                            <button type="button" class="btn btn-outline-purple rounded-pill">Purple</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>

Use .rounded-pill with an outline button to give it pill-shaped rounded corners.

Soft 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-purple">Purple</button>
                                            <button type="button" class="btn btn-soft-dark">Dark</button>

Use btn-soft-** class with the below-mentioned variation to create a button with the soft background.

Soft Rounded Buttons

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

Use the btn-soft-** class along with .rounded-pill to create a softly styled button with rounded corners.

Ghost Buttons

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

Use the btn-ghost-** class to create buttons with a transparent background that highlight with color on hover.

Ghost Rounded Buttons

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

Combine btn-ghost-** with .rounded-pill to create ghost-style buttons with rounded corners that highlight on hover.

Button 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-purple btn-sm">Small</button>

Want larger or smaller buttons? Use .btn-lg or .btn-sm to adjust the button size.

Disabled Buttons

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

Use the disabled attribute on a <button> to make it inactive and non-interactive.

Block Button

                                        
                                            <div class="d-grid gap-2">
                                                <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>

To create block-level buttons, add the .d-grid class to the parent <div> .

Toggle Button

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

Add data-bs-toggle="button" to toggle a button’s active state. For pre-toggled buttons, also add .active and aria-pressed="true" .

Button Tags

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

Use .btn classes with <button> , <a> , or <input> elements, though rendering may vary slightly across browsers.

Link

Icon Buttons

                                        
                                            <button type="button" class="btn btn-primary btn-icon">
                                                <i class="YOUR ICON fs-lg"></i>
                                            </button>
                                            
                                            <button type="button" class="btn btn-light">
                                                <i class="YOUR ICON me-1 fs-xl"></i> Stop
                                            </button>

                                            <button type="button" class="btn btn-dark">
                                                <i YOUR ICON" class="avatar-xxs me-1"></i> Boost
                                            </button>

                                            <button type="button" class="btn btn-outline-info">
                                                <i class="YOUR ICON me-1 fs-xl"></i> Payment
                                            </button>

                                            <!-- Large buttons -->
                                            <button class="btn btn-outline-secondary btn-icon btn-lg" type="button">
                                                <i class="YOUR ICON"></i>
                                            </button>

Icon only button. Use it when you want a button with just an icon and no text, ideal for compact UI elements or toolbars.

Button Group

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

                                            <button type="button" class="btn btn-light">1</button>
                                            <button type="button" class="btn btn-light">2</button>
                                            <button type="button" class="btn btn-light">3</button>
                                            <button type="button" class="btn btn-light">4</button>

                                            <button type="button" class="btn btn-light">5</button>
                                            <button type="button" class="btn btn-light">6</button>
                                            <button type="button" class="btn btn-light">7</button>

                                            <button type="button" class="btn btn-light">8</button>

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

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

Group multiple buttons together by wrapping them with the .btn class inside a .btn-group container. This helps align buttons side by side with consistent spacing and styling.