BOOTSTRAP COMPONENTS
BUTTON
Bootstrap 5 provides several styles of buttons. Button classes can be used on elements:
BUTTON OUTLINE
Bootstrap 5 also provides eight buttons with borders. Move your mouse over them to see an additional “hover” effect.
BUTTON SIZE
Use the .btn-lg class for large buttons or the .btn-sm class for small buttons:
<button type=”button” class=”btn btn-primary btn-lg”>Large
<button type=”button” class=”btn btn-primary”>Default
<button type=”button” class=”btn btn-primary btn-sm”>Small
BLOCK LEVEL BUTTON
To create a block-level button that spans the full width of the parent element, use the .d-grid “helper” class on the parent element.
ACTIVE/DISABLED BUTTON
A button can be set to an active (appears pressed) or disabled (non-clickable) state: The .active class makes a pressed button appear and the disabled attribute makes a button non-clickable. Note that the elements do not support the disabled attribute and must therefore use the .disabled class to make it appear visually disabled.
BUTTON GROUP
Bootstrap 5 allows you to group a series of buttons (on a single line).
Tip: Instead of applying button sizes to each button in a group, use the .btn-group-lg class for a large button group or .btn-group-sm for a small button group:
VERTICAL BUTTON GROUP
Use the .btn-group-vertical class to create a vertical button group.
NIDIFICATION OF GROUPS OF BUTTONS AND DROP-DOWN MENUS
Nest button groups to create drop-down menus (you’ll find out more about drop-down menus in a later post).
JUMBOTRON
Jumbotron was introduced in Bootstrap 3 as a large padded box to call attention to some special content or information. Jumbotrons are no longer supported in Bootstrap 5. However, you can use a element and add special helper classes along with a color class to achieve the same effect.
Leave A Comment