M3- Bootstrap Components Flashcards
What are Bootstrap components?
Bootstrap components are the ready-made UI elements included in Bootstrap, such as alert messages, navigation menus, cards, and badges. These components are styled and functional right out of the box, making it easier to build a website with a professional look and feel.
How do you ensure the layout looks good on both mobile and desktop devices?
Bootstrap’s grid system allows you to create responsive layouts easily. For example, using the col-12 class for full-width on mobile and col-lg-6 for half-width on larger screens ensures that cards stack on mobile devices but are placed side by side on desktops.
How do you create an alert to inform customers about the new dish?
Use a Bootstrap alert component to display a notification. You can create an alert using a < div> tag with alert and alert-info classes to style it. The role=”alert” attribute is added for accessibility.
What is a Card in Bootstrap?
A card in Bootstrap is a flexible and extensible content container that groups together various types of content into a single, cohesive block.
< div class=”card”>: This is the container that makes it a card.
Key Features of a Bootstrap Card:
- Containers: Cards can hold different kinds of content, such as images, text, and links.
- Structured Layout: Cards are typically structured with different sections like a header, body, and footer.
- Responsive Design: Cards can be easily made responsive, adapting to different screen sizes by stacking or aligning side-by-side.
CSS Card classes
- < div class=”card”>: This is the container that makes it a card.
- < img class=”card-img-top”>: The image at the top of the card, giving a visual representation of the content.
- < div class=”card-body”>: This section holds the main content like the title and text.
- < h5 class=”card-title”>: The title of the card content.
- < p class=”card-text”>: A brief description or text inside the card.
- < a class=”btn btn-primary”>: A button that could link to more information or an action like ordering.
What is a Badge in Bootstrap?
A badge in Bootstrap is a small, contextual piece of information that is typically used to highlight or label something on your website. Imagine it like a small sticker or tag that you can attach to content, such as a “New” label on a product, or a number representing unread notifications.
Key Features of a Bootstrap Badge:
- Small and Noticeable: Badges are small but designed to catch the user’s attention.
- Contextual Colors: Badges can be styled with different colors to convey meaning (e.g., red for alerts, green for success).
- Inline Element: Badges are usually used alongside text or icons to provide additional information.
