Holla Tech - Learn[Su_heading] Bootstrap 3: Button Groups [/su_heading] 

Bootstrap provides an easy way to create groups of buttons.

To create a basic Bootstrap button group, simply enclose all <button> elements inside a <div> element with btn-group class.

Use btn-group-vertical class to create a vertical button group.

Sizes of buttons can be managed by using these classes:
btn-group-xs eXtra small buttons.
btn-group-sm Small buttons.
btn-group-lg Large buttons.

For Example: 

<div class=“container”>
  <div class=“btn-group btn-group-xs”>
    <button class=“btn btn-success”>h1</button>
    <button class=“btn btn-warning”>h2</button>
    <button class=“btn btn-danger”>h3</button>
  </div><br><br>
  <div class=“btn-group-vertical”>
    <button class=“btn btn-success”>v1</button>
    <button class=“btn btn-warning”>v2</button>
    <button class=“btn btn-danger”>v3</button>
  </div>
</div>

 

Use btn-group-justified class to make a button group span the entire width of the screen.

TASK:
Paste the line of codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT