Examples Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

                            
                            <div class="alert alert-primary" role="alert">
                                A simple primary alert—check it out!
                            </div>
                            <div class="alert alert-secondary" role="alert">
                                A simple secondary alert—check it out!
                            </div>
                            <div class="alert alert-success" role="alert">
                                A simple success alert—check it out!
                            </div>
                            <div class="alert alert-danger" role="alert">
                                A simple danger alert—check it out!
                            </div>
                            <div class="alert alert-warning" role="alert">
                                A simple warning alert—check it out!
                            </div>
                            <div class="alert alert-info" role="alert">
                                A simple info alert—check it out!
                            </div>
                            <div class="alert alert-light" role="alert">
                                A simple light alert—check it out!
                            </div>
                            <div class="alert alert-dark" role="alert">
                                A simple dark alert—check it out!
                            </div>
                            
                        

Dismissing Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

• Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
• If you’re building our JavaScript from source, it requires util.js. The compiled version includes this.
• Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
• On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the button element with it for proper behavior across all devices.
• To animate alerts when dismissing them, be sure to add the .fade and .show classes.

Example Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

                            
                                <h1>Example heading <span class="badge badge-secondary">New</span></h1>
                                <h2>Example heading <span class="badge badge-secondary">New</span></h2>
                                <h3>Example heading <span class="badge badge-secondary">New</span></h3>
                                <h4>Example heading <span class="badge badge-secondary">New</span></h4>
                                <h5>Example heading <span class="badge badge-secondary">New</span></h5>
                                <h6>Example heading <span class="badge badge-secondary">New</span></h6>
                             
                        

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

                            
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                    <li class="breadcrumb-item active" aria-current="page">Home</li>
                                    </ol>
                                </nav>
                                
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Library</li>
                                    </ol>
                                </nav>
                                
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                                    <li class="breadcrumb-item"><a href="#">Library</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Data</li>
                                    </ol>
                                </nav>
                            
                        

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

Examples Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

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

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Basic example Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

                            
                                <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary">Left</button>
                                <button type="button" class="btn btn-secondary">Middle</button>
                                <button type="button" class="btn btn-secondary">Right</button>
                            
                        

Ensure correct role and provide a label In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".

In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.