Explore fundamental Bootstrap concepts, including grid systems, components, and essential utility classes to enhance your frontend development skills.
Bootstrap was originally developed by which company to streamline web development?
Explanation: Twitter developed Bootstrap to standardize internal tools and workflows, making frontend development more consistent. Facebook and Apple are not associated with Bootstrap's creation; they have their own frameworks and tools.
What is the default number of columns used in Bootstrap's grid system?
Explanation: Bootstrap's grid is based on 12 columns to allow flexible and responsive layouts. 10 and 16 are incorrect; these numbers represent different grid approaches in other frameworks or contexts.
Which Bootstrap class is used to make text bold within a component?
Explanation: The 'fw-bold' class applies a bold font weight in Bootstrap. 'bold-text' and 'text-strong' are not valid Bootstrap classes and will not consistently produce the desired styling effect.
If you want to horizontally center an element in Bootstrap, which class should you typically use?
Explanation: 'mx-auto' applies automatic left and right margins, effectively centering block-level elements. 'center-block' was used in older versions of Bootstrap, and 'align-center' is not a recognized Bootstrap class for this purpose.
Which class is applied to create a responsive navigation bar in Bootstrap?
Explanation: 'navbar' is the designated class for Bootstrap's responsive navigation bar component. 'nav-panel' and 'navigation-bar' are not valid Bootstrap classes and won't yield the correct styles or behaviors.
What Bootstrap component is used to display brief messages or alerts for users?
Explanation: Bootstrap's 'Alert' component clearly presents important messages or notices. 'Notify' and 'Popup' are not Bootstrap components and refer to unrelated or non-existent features.
Which class should you use to apply rounded corners to an element in Bootstrap?
Explanation: 'rounded' adds border-radius and visually softens edges in Bootstrap. The terms 'radius' and 'soft-corner' aren't valid Bootstrap classes and do not achieve this effect.
Which Bootstrap class hides an element on small screens but may reveal it on larger ones?
Explanation: 'd-none' is used to hide elements from the DOM, and its responsive variants target specific screen sizes. 'hide-xs' and 'invisible' either don't exist or don't fully hide elements in all required scenarios.
What utility category in Bootstrap allows you to quickly adjust margins and padding of elements?
Explanation: Bootstrap's Spacing utilities (like m-2, p-3) provide easy margin and padding control. 'Box-Model' and 'Distance' are not recognized Bootstrap utility names.
Which class ensures an image scales responsively to fit its parent container in Bootstrap?
Explanation: 'img-fluid' makes images responsive by applying max-width: 100% and height: auto. 'image-responsive' and 'fit-parent' are not valid Bootstrap classes and won't provide the intended effect.