Bootstrap 4 Button Groups

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

Bootstrap 4 Button Groups

❮ Previous
Next ❯

Button Groups

Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group:

Example

Try it Yourself »

Tip: Instead of applying button sizes to every button in a
group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group:

Large Buttons:

Default Buttons:

Small Buttons:

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>

Try it Yourself »

Vertical Button Groups

Bootstrap 4 also supports vertical button groups:

Use the class .btn-group-vertical 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>

Try it Yourself »

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus (you will learn more about
dropdowns in a later chapter):

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>

Try it Yourself »

Split Button Dropdowns

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>

Try it Yourself »

Vertical Button Group w/ Dropdown

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>

Try it Yourself »

Button Groups Side by Side

Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:

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>

Try it Yourself »

❮ Previous
Next ❯

搜尋此網誌

wefcdr