The utility class 'text-___-center' in Bootstrap is used for centering text on specific screen sizes.
- justify
- align
- xs
- sm
In Bootstrap, the class 'text-{sm or xs}-center' is used to center text on specific screen sizes. The 'sm' and 'xs' refer to small and extra-small screen sizes, respectively.
What Bootstrap class is used to group form controls and labels for inline forms?
- 'form-horizontal'
- 'form-inline'
- 'form-group'
- 'inline-group'
The 'form-inline' class is used in Bootstrap to create inline forms, grouping form controls and labels horizontally. 'form-group' is used for vertical grouping in regular forms.
For responsive font sizes, Bootstrap uses the class 'fs-___'.
- lg
- responsive
- auto
- 5
In Bootstrap, the class 'fs-lg' is used for responsive font sizes. The 'lg' represents large, and it adjusts the font size based on the screen size.
How do you apply zebra-striping to a table in Bootstrap?
- .table-striped
- .table-zebra
- .table-stripe
- .table-hover
Zebra-striping is applied using the .table-striped class in Bootstrap. This class adds a light background color to odd rows, providing a striped appearance to the table. It enhances readability and visual appeal.
Describe the steps to create a custom loading animation in Bootstrap that activates while data is fetched from a server.
- loader, loading-animation, custom-loader, loader-animate
- loader, spinner, loading, spinner-animate
- custom-loader, loader-spin, spin, loader-animate
- spinner, loader, loading, loader-spin
To create a custom loading animation in Bootstrap for server data fetching, apply the 'spinner' class. This class, combined with 'loader' and 'loading,' ensures a visually appealing spinner animation during the data retrieval process.
What is the role of the 'data-toggle' attribute in Bootstrap's JavaScript components?
- It specifies the target element for a JavaScript event.
- It activates the Bootstrap carousel component.
- It toggles the visibility of a Bootstrap element.
- It triggers the Bootstrap navigation collapse.
The correct answer is 'It toggles the visibility of a Bootstrap element.' The 'data-toggle' attribute is used in Bootstrap to toggle the visibility of a specified element. It is commonly used with components like collapse, dropdown, modal, etc. When 'data-toggle' is set to a specific value (e.g., 'collapse' or 'modal'), it triggers the corresponding Bootstrap functionality, making the element visible or hidden.
What are the differences between spacing utilities like 'm-2' and 'mx-2' in Bootstrap?
- 'm-2' adds margin to all sides, 'mx-2' adds horizontal margin
- 'm-2' adds margin to the top only, 'mx-2' adds margin to both top and bottom
- 'm-2' adds margin to the left and right only, 'mx-2' adds margin to all sides
- 'm-2' adds margin evenly to all sides, 'mx-2' adds margin to the left and right
The 'm-2' class in Bootstrap adds margin evenly to the left and right sides of an element, while 'mx-2' adds margin specifically to the left and right sides. Understanding these spacing utilities is crucial for precise layout control in Bootstrap.
The ___ file is crucial for managing third-party JS library dependencies in a Bootstrap project.
- package.json
- bootstrap.js
- dependencies.json
- yarn.lock
The package.json file is crucial for managing third-party JavaScript library dependencies in a Bootstrap project. It contains information about the project and its dependencies, allowing for easy version control and package installation.
To optimize performance, Bootstrap's event delegation for dynamic content uses '___'.
- document.querySelectorAll
- event.preventDefault
- event delegation
- data-toggle
Bootstrap optimizes performance by utilizing event delegation for dynamic content, which is achieved through 'event delegation.' This minimizes the number of event listeners, enhancing efficiency.
In a Vue.js project, Bootstrap's classes can be overridden in the component's ___ section.
- style
- template
- script
- custom
In a Vue.js project, Bootstrap's classes can be overridden in the component's style section. This allows customization of Bootstrap styles within the Vue component, providing flexibility in the appearance of the UI.