The ___ class in Bootstrap is used to hide elements on specific screen sizes.
- Visible
- Invisible
- Hidden
- Screen-hidden
Bootstrap's '.d-none' class is used to hide elements. The correct option is 'Hidden,' and it is part of Bootstrap's utility classes for responsive design, helping control element visibility.
How do Bootstrap's utility classes aid in creating responsive layouts?
- Provide predefined styles for common components
- Facilitate quick styling without custom CSS
- Offer responsive spacing and margin classes
- All of the above
Bootstrap's utility classes, including those for spacing and margin, play a key role in responsive design by offering quick and consistent styling options without the need for custom CSS.
In Bootstrap, which component is used for creating dropdown menus?
- Dropdown
- List Group
- Tab
- Carousel
The Dropdown component in Bootstrap is employed for creating dropdown menus. It allows users to choose from a list of options, providing a clean and organized interface.
How does Bootstrap's custom form controls differ from native browser controls?
- They have additional styling and can be more easily customized.
- They provide enhanced functionality beyond standard browser controls.
- They follow a different HTML structure, enhancing accessibility.
- They use JavaScript to override default browser behavior.
Bootstrap's custom form controls offer additional styling options, making customization easier. They don't necessarily provide enhanced functionality but focus on appearance.
How do you customize the offset that ScrollSpy uses to change the active item?
- data-offset
- data-custom
- data-change
- data-adjust
To customize the offset that ScrollSpy uses to change the active item, you use the data-offset attribute. This allows you to set a specific offset value to trigger the change in the active navigation item based on the scroll position.
To apply a custom font family, the SASS variable '___' must be set.
- $font-family
- $custom-font
- $type-font
- $font-style
The correct SASS variable is '$custom-font'. Setting this variable allows you to specify a custom font family for your Bootstrap theme, providing flexibility in design.
Explain how Bootstrap's typography and button sizes are optimized for mobile-first design.
- Typography and button sizes are fixed in pixels for consistency.
- Typography is responsive, and button sizes adjust based on the screen width.
- Typography uses a combination of pixels and em units; buttons have fixed sizes.
- Typography and button sizes are defined using fluid percentage-based units.
Bootstrap's mobile-first design optimizes typography by using responsive units, and button sizes adjust based on the screen width, providing a consistent and adaptable user experience.
How does Bootstrap handle different screen sizes in its responsive design framework?
- Media queries
- Grid system
- Flexbox
- Responsive classes
Bootstrap's responsive design utilizes a grid system that allows the layout to adapt to various screen sizes. The grid system consists of rows and columns, providing a flexible structure for responsive designs.
To control column width across different devices, Bootstrap uses 'col-*-___' classes.
- xs
- md
- lg
- xl
Bootstrap's grid system allows you to control column widths based on different devices. The 'col-md-*' class is used for medium-sized devices, ensuring proper responsiveness.
The ___ attribute in Bootstrap is used to hide elements visually but keep them accessible to screen readers.
- aria-hidden="true"
- class="visually-hidden"
- hidden="true"
- role="presentation"
In Bootstrap, the class="visually-hidden" is used to hide elements visually while keeping them accessible to screen readers. It's a CSS utility class that ensures content is available to assistive technologies but not visible on the screen.