Bootstrap4 Button group

Bootstrap 4 Allows us to put buttons on the same line .

Can be in <div> Add... To the element .btn-group Class to create a button group .

example

< div class = " btn-group " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < button type = " button " class = " btn btn-primary " > Sony </ button > </ div >

Give it a try »

Tips : We can use .btn-group-lg|sm Class to set the size of the button group .

example

< div class = " btn-group btn-group-lg " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < button type = " button " class = " btn btn-primary " > Sony </ button > </ div >

Give it a try »

Vertical button group

You can use .btn-group-vertical Class to create a vertical button group :

example

< div class = " btn-group-vertical " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < button type = " button " class = " btn btn-primary " > Sony </ button > </ div >

Give it a try »

Embedded button group and drop-down menu

We can set the drop-down menu in the button group :

example

< div class = " btn-group " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < div class = " btn-group " > < button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " > Sony </ button > < div class = " dropdown-menu " > < a class = " dropdown-item " href = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ a > </ div > </ div > </ div >

Give it a try »

Split Button drop-down menu

example

< div class = " btn-group " > < button type = " button " class = " btn btn-primary " > Sony </ button > < button type = " button " class = " btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle = " dropdown " > < span class = " caret " > </ span > </ button > < div class = " dropdown-menu " > < a class = " dropdown-item " href = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ a > </ div > </ div >

Give it a try »

Vertical button group and drop-down menu

example

< div class = " btn-group-vertical " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < div class = " btn-group " > < button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " > Sony </ button > < div class = " dropdown-menu " > < a class = " dropdown-item " href = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ a > </ div > </ div > </ div >

Give it a try »

Multiple button groups

Button groups can be displayed side by side on the same line :

example

< div class = " btn-group " > < button type = " button " class = " btn btn-primary " > Apple </ button > < button type = " button " class = " btn btn-primary " > Samsung </ button > < button type = " button " class = " btn btn-primary " > Sony </ button > </ div > < div class = " btn-group " > < button type = " button " class = " btn btn-primary " > BMW </ button > < button type = " button " class = " btn btn-primary " > Mercedes </ button > < button type = " button " class = " btn btn-primary " > Volvo </ button > </ div >

Give it a try »