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: