Bootstrap Button Group Related Classes

Notes:

Bootstrap - Button Group Related Classes:

btn-group:
- removes space between the elements,
- removes top right and bottom right rounded corners from all the buttons except from the last button in the group,
- removes top left and bottom left rounded corners from all the buttons except from the first button in the group,
- keeps the buttons horizontally in the group etc.

<div class="btn-group" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>

btn-group-vertical:
- removes space between the elements,
- removes bottom left and bottom right rounded corners from all the buttons except from the last button in the group,
- removes top left and top right rounded corners from all the buttons except from the first button in the group,
- keeps the buttons vertically in the group etc.

<div class="btn-group-vertical" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>

btn-group-lg:
- displays buttons little bit larger than the normal size

<div class=" btn-group btn-group-lg" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>

btn-group-sm:
- displays buttons little bit smaller than the normal size

<div class=" btn-group btn-group-sm" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>

btn-toolbar :
- is used to group two or more button groups
- removes the space between button groups

<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>
<div class="btn-group" role="group">
<input type="submit" class="btn btn-primary"/>
<input type="submit" class="btn btn-secondary"/>
<input type="submit" class="btn btn-success"/>
</div>
</div>

Interview Questions: