Sharpen your understanding of Bootstrap button styles, size variations, and grouping techniques with this focused and practical quiz. Assess your expertise in customizing and arranging buttons for modern web interfaces using Bootstrap’s flexible options.
Which class applies the primary color styling to a button in Bootstrap, for example: u003Cbutton class='...'u003E?
Explanation: The correct class for the primary button style is 'btn-primary' as defined in Bootstrap's utility classes. Options like 'btn-blue' and 'button-primary' may seem logical because of their names but are not recognized Bootstrap classes. 'btn-main' is also incorrect as it is not part of the official set. Only 'btn-primary' will render the button with the intended primary color styling.
What Bootstrap class would you use to make a button larger, such as for a prominent 'Sign Up' action?
Explanation: 'btn-lg' is the official class for increasing the size of a Bootstrap button, making it more noticeable. 'btn-large', 'button-large', and 'btn-big' are plausible but incorrect, as Bootstrap does not support these classes. Only 'btn-lg' modifies the button size within the framework standards.
Which wrapper class correctly creates a horizontal group of buttons, such as when displaying multiple options side by side?
Explanation: The 'btn-group' class is used in Bootstrap to group a set of buttons on a single horizontal line, maintaining consistent styling and alignment. 'group-btns', 'buttons-line', and 'btn-stack' suggest groupings or stacks but are not valid Bootstrap wrapper classes. Only 'btn-group' achieves the desired grouping per the framework.
To make a button expand the full width of its parent container, which Bootstrap class should be added?
Explanation: Using 'btn-block' turns any Bootstrap button into a block-level element, letting it span the entire width of its parent. The options 'btn-wide', 'block-btn', and 'btn-full' are not recognized by Bootstrap, despite sounding appropriate. Only 'btn-block' produces the correct block-level behavior in the framework.
If you want a button with a colored border and transparent background, which class would create an outlined primary button?
Explanation: 'btn-outline-primary' is the correct class for Bootstrap’s outlined variant, giving a button a primary colored border with no background fill. 'btn-border-primary' and 'btn-primary-outline' are not valid class names within Bootstrap, while 'btn-outline-blue' could suggest a color but is not standard. Only 'btn-outline-primary' applies the outlined style as intended.