Buttons

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

Add .rounded-pill to any button to make them more rounded.

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

Outline buttons

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

        
            <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-dark rounded-pill">Dark</button>
        
    

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

        
            <button type="button" class="btn btn-primary btn-lg rounded-pill">Large button</button>
            <button type="button" class="btn btn-secondary btn-lg rounded-pill">Large button</button>
        
    
        
            <button type="button" class="btn btn-primary btn-sm rounded-pill">Small button</button>
            <button type="button" class="btn btn-secondary btn-sm rounded-pill">Small button</button>
        
    

Bootstrap Documentation