Bootstrap Buttons

Different classes are available in Bootstrap for styling the buttons

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

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

<button type="button" class="btn btn-link">Link</button>

Bootstrap Outline Buttons

You can also create outline buttons by replacing the button modifier classes, like this:

Ex.

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

<button type="button" class="btn btn-outline-light">Light</button>

 

Creating Button Groups 

To create a button groups just wrap a series of buttons with .btn class in a <div> element and apply the class .btn-group on it.

Use this code inside the div tag:

Ex.

<div class="btn-group">

<button type="button" class="btn btn-primary">Home</button>

<button type="button" class="btn btn-primary">About</button>

<button type="button" class="btn btn-primary">Services</button>

</div>

 

Button Toolbar

To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it.

 

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="btn-group mr-2">

        <button type="button" class="btn btn-primary">

            <i class="fa fa-font"></i>

        </button>

        <button type="button" class="btn btn-primary">

            <i class="fa fa-bold"></i>

        </button>

        <button type="button" class="btn btn-primary">

            <i class="fa fa-italic"></i>

        </button>

    </div>

    <div class="btn-group mr-2">

        <button type="button" class="btn btn-primary">

            <i class="fa fa-align-left"></i>

        </button>

        <button type="button" class="btn btn-primary">

            <i class="fa fa-align-center"></i>

        </button>

        <button type="button" class="btn btn-primary">

            <i class="fa fa-align-right"></i>

        </button>

        <button type="button" class="btn btn-primary">

            <i class="fa fa-align-justify"></i>

        </button>

    </div>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">

            <i class="fa fa-undo"></i>

        </button>

    </div>

</div>

</body>

Height Sizing of Button Groups

Ex.

...

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="btn-group mb-2 btn-group-lg">

        <button type="button" class="btn btn-primary">Home</button>

        <button type="button" class="btn btn-primary">About</button>

        <button type="button" class="btn btn-primary">Services</button>

    </div>

</div>

</body>

Use another group classes like this:

<div class="btn-group btn-group-sm">

<div class="btn-group mb-2">

 

Nesting Button Groups

Creating button inside button in drop-down

Place a .btn-group within another .btn-group to create dropdown menus inside button groups.

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="btn-group">

        <a href="#" class="btn btn-primary">Home</a>

        <a href="#" class="btn btn-primary">About</a>

        <div class="btn-group">

            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>

            <div class="dropdown-menu">

                <a class="dropdown-item" href="#">Web Design</a>

                <a class="dropdown-item" href="#">Web Development</a>

            </div>

        </div>

    </div>

</div>

</body

 

Vertically Stacked Button Groups

Replace the class .btn-group with the .btn-group-vertical

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="btn-group-vertical">

        <a href="#" class="btn btn-primary">Home</a>

        <a href="#" class="btn btn-primary">About</a>

        <div class="btn-group">

            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>

            <div class="dropdown-menu">

                <a class="dropdown-item" href="#">Web Design</a>

                <a class="dropdown-item" href="#">Web Development</a>

            </div>

        </div>

    </div>

</div>

</body>

Creating Justified Button Groups

Fill all the available width by applying the flex utility class .d-flex to the .btn-group element. Every button has equal width in this case.

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="btn-group d-flex">

        <button type="button" class="btn btn-primary">Home</button>

        <button type="button" class="btn btn-primary">About</button>

        <button type="button" class="btn btn-primary">Services</button>

    </div>

</div>

</body>

Powered  by Codersarts