lECTURE nOTES oF Class 12:
Cards
Objective:
In this
class, we will learn how to use Bootstrap cards to create
reusable, flexible, and aesthetically pleasing components for displaying
content. We will design a product card with an image, title,
and description, and explore how to use card groups and card
decks for proper alignment and organization of card components.
What is a
Card?
A card
is a flexible and extensible content container. It is a part of Bootstrap's
built-in components that allow you to group content in a clean and structured
way. Cards can hold images, text, links, buttons, and much more, all within a
bordered, customizable box.
Cards are
typically used to display product information, user
profiles, blog post summaries, and other types of
content. Bootstrap's card component provides a variety of pre-built styling
options for easy implementation.
Card
Components for Displaying Content
In
Bootstrap, a card is created using a series of nested div elements. Each card
has the following basic structure:
1.
Card container (.card): The outermost wrapper
for a card.
2.
Card header (.card-header): Used for the
title or heading of the card.
3.
Card body (.card-body): Contains the
main content, such as text, images, or links.
4.
Card footer (.card-footer): Used for
additional content, like buttons, links, or other small items.
5.
Card image (.card-img-top, .card-img-bottom): Used to
display images at the top or bottom of the card.
Basic
Card Structure Example:
html<div class="card" style="width: 18rem;"> <img src="product-image.jpg" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Product Title</h5> <p class="card-text">A brief description of the product.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div></div>
Explanation:
1.
Card Image: The <img> element with class="card-img-top"
is used to display an image at the top of the card.
2.
Card Body: The <div class="card-body">
contains the main content of the card, such as the title, description, and
actions.
3.
Card Title: The <h5 class="card-title">
is used for the product title.
4.
Card Text: The <p class="card-text">
contains the product description.
5.
Card Button: The <a class="btn btn-primary">
creates a button-like link, which can be used to add interactive elements like
a "Buy Now" button.
Lab Task
1: Design a Product Card
Now,
let’s create a simple product card with an image, title, and
description using the card components in Bootstrap. You will need to structure
the HTML as follows:
Step-by-step
Instructions:
1.
Create the basic HTML structure.
2.
Add the card component to hold the
content.
3.
Use a product image at the top of
the card.
4.
Add the product title and a brief
description of the product inside the card body.
5.
Add a call-to-action button
at the bottom of the card (e.g., "Buy Now").
Code
Example for a Product Card:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Card</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Amazing Product</h5> <p class="card-text">This is a short description of the amazing product. It explains the features in brief.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation
of the Code:
- The
cardelement contains the main structure of the card. - The
card-img-topclass places the image at the top of the card. - The
card-bodyholds the main content: product title, description, and a button. - The
btn btn-primaryclass styles the button as a primary button.
Lab Task
2: Use Card Groups and Decks for Alignment
To ensure
that multiple cards are well-aligned and responsive, you can use Card
Groups and Card Decks.
1.
Card Group (.card-group): A card group
allows you to display a set of cards in a row. The cards will all have equal
widths and will adjust to the screen size.
2.
Card Deck (.card-deck): A card deck is
similar to a card group but it also ensures that all cards have equal height,
making them look consistent and aligned.
Code
Example with Card Group:
html<div class="container mt-5"> <div class="card-group"> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 1"> <div class="card-body"> <h5 class="card-title">Product 1</h5> <p class="card-text">Description of Product 1.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 2"> <div class="card-body"> <h5 class="card-title">Product 2</h5> <p class="card-text">Description of Product 2.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 3"> <div class="card-body"> <h5 class="card-title">Product 3</h5> <p class="card-text">Description of Product 3.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div></div>
Code
Example with Card Deck:
html<div class="container mt-5"> <div class="card-deck"> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 1"> <div class="card-body"> <h5 class="card-title">Product 1</h5> <p class="card-text">Description of Product 1.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 2"> <div class="card-body"> <h5 class="card-title">Product 2</h5> <p class="card-text">Description of Product 2.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 3"> <div class="card-body"> <h5 class="card-title">Product 3</h5> <p class="card-text">Description of Product 3.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div></div>
Summary
of Concepts:
1.
Card Components: Used to display
grouped content such as text, images, and buttons.
2.
Card Group: Ensures that the
cards are displayed in a row with equal width.
3.
Card Deck: Ensures that cards
are displayed with equal heights, ensuring alignment.
4.
Responsive Design: Bootstrap’s grid
system makes sure that cards adjust to different screen sizes.
Next
Steps:
- Experiment
with adding more content inside cards, such as lists, form elements, and
other media.
- Explore
different Bootstrap classes like
.card-header,.card-footer,.card-img-top,.card-img-bottom, and.card-linkto customize the card’s look.
This
concludes the lesson on cards!
You
said:
WRITE 10 ASSIGNMENTS
FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation
ChatGPT
said:
Assignments
on Bootstrap Cards
Here are
10 assignments based on the concept of Bootstrap cards, including step-by-step
solutions with proper explanations for each task:
Assignment
1: Basic Product Card Creation
Task:
Create a
basic product card that contains an image, title, description, and a "Buy
Now" button.
Solution:
1.
Create the basic HTML structure.
2.
Include Bootstrap CSS and JS files.
3.
Add a container and create a card
with a title, description, and button.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Card</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Amazing Product</h5> <p class="card-text">This is a brief description of an amazing product. It highlights its features.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
card is created inside a container.
- The
card contains an image, title, description, and a button (
btn btn-primary).
Assignment
2: Create a Card with Footer
Task:
Create a
card with a footer that contains links to more details about the product.
Solution:
1.
Add a footer to the card using <div class="card-footer">.
2.
Inside the footer, include links to
additional information.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Card with Footer</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Amazing Product</h5> <p class="card-text">This product is amazing because it solves many problems with its features.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> <div class="card-footer"> <a href="#" class="card-link">More Details</a> <a href="#" class="card-link">Reviews</a> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
footer is added using the
card-footerclass. - The
footer contains links with the
card-linkclass for styling.
Assignment
3: Create Multiple Cards in a Group
Task:
Display
multiple cards in a horizontal row with equal width.
Solution:
1.
Use the card-group
class to group cards together.
2.
Ensure the cards have equal width and
are aligned properly.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Group</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card-group"> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 1"> <div class="card-body"> <h5 class="card-title">Product 1</h5> <p class="card-text">This is a brief description of Product 1.</p> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 2"> <div class="card-body"> <h5 class="card-title">Product 2</h5> <p class="card-text">This is a brief description of Product 2.</p> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 3"> <div class="card-body"> <h5 class="card-title">Product 3</h5> <p class="card-text">This is a brief description of Product 3.</p> </div> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
card-groupclass makes sure that the cards are displayed in a horizontal row with equal width.
Assignment
4: Create a Card with an Image at the Bottom
Task:
Create a
card with an image at the bottom instead of the top.
Solution:
1.
Use the card-img-bottom
class to position the image at the bottom.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with Bottom Image</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Amazing Product</h5> <p class="card-text">This product has a unique feature that makes it stand out.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> <img src="https://via.placeholder.com/150" class="card-img-bottom" alt="Product Image"> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
card-img-bottomclass places the image at the bottom of the card.
Assignment
5: Create a Card Deck
Task:
Display
multiple cards in a grid layout with equal height.
Solution:
1.
Use the card-deck
class to create a deck of cards.
2.
The cards will automatically have equal
height and will be displayed in a responsive grid.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Deck</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card-deck"> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 1"> <div class="card-body"> <h5 class="card-title">Product 1</h5> <p class="card-text">This is a brief description of Product 1.</p> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 2"> <div class="card-body"> <h5 class="card-title">Product 2</h5> <p class="card-text">This is a brief description of Product 2.</p> </div> </div> <div class="card"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product 3"> <div class="card-body"> <h5 class="card-title">Product 3</h5> <p class="card-text">This is a brief description of Product 3.</p> </div> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
card-deckclass arranges cards into a grid layout that is responsive, with equal height for each card.
Assignment
6: Create a Card with an Image Overlay
Task:
Create a
card where the image has a text overlay.
Solution:
1.
Use the card-img-overlay
class to add a text overlay on the image.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with Image Overlay</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img" alt="Product Image"> <div class="card-img-overlay"> <h5 class="card-title text-white">Special Offer</h5> <p class="card-text text-white">Get 50% off on this amazing product!</p> </div> <div class="card-body"> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
card-img-overlayclass places text over the image inside the card. - The
text color is set to white using the
text-whiteclass for visibility.
Assignment
7: Card with List Group
Task:
Create a
card that displays a list of product features using the Bootstrap list group
component.
Solution:
1.
Use the list-group
and list-group-item
classes inside the card body to display a list of features.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with List Group</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Amazing Product</h5> <p class="card-text">Check out the features of this product below:</p> <ul class="list-group list-group-flush"> <li class="list-group-item">Feature 1</li> <li class="list-group-item">Feature 2</li> <li class="list-group-item">Feature 3</li> </ul> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
list-groupandlist-group-itemclasses are used to create a list of product features inside the card.
Assignment
8: Card with Progress Bar
Task:
Create a
card displaying the progress of a product's popularity using a Bootstrap
progress bar.
Solution:
1.
Use the progress
class to add a progress bar inside the card.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with Progress Bar</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Popular Product</h5> <p class="card-text">This product has gained popularity over time.</p> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
progressandprogress-barclasses are used to create a progress bar inside the card. - The
widthproperty in theprogress-barsets the progress to 75%.
Assignment
9: Create a Card with Badge
Task:
Create a
card with a badge displaying the status of a product (e.g., "New",
"On Sale").
Solution:
1.
Use the badge
class to create a badge for the product status.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with Badge</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Exclusive Product <span class="badge bg-success">New</span></h5> <p class="card-text">This product is newly launched and available for purchase now.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
badgeclass adds a small label on the card, which in this case shows the "New" status.
Assignment
10: Card with Collapse Feature
Task:
Create a
card with a collapsible section for additional information.
Solution:
1.
Use the collapse
class to create a collapsible section in the card.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card with Collapse</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/150" class="card-img-top" alt="Product Image"> <div class="card-body"> <h5 class="card-title">Product Details</h5> <p class="card-text">Click below to view more details about this product.</p> <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample">Show Details</button> <div class="collapse" id="collapseExample"> <div class="card card-body mt-3"> This is the additional information about the product. </div> </div> </div> </div> </div> <!-- Bootstrap JS & Popper --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script></body></html>
Explanation:
- The
collapseclass is used to hide and show additional content when the button is clicked. - The
data-bs-toggle="collapse"anddata-bs-target="#collapseExample"attributes enable the collapsible functionality.
You
said:
WRITE 50 no of MCQs
only FROM ABOVE CONCEPT with explanation
ChatGPT
said:
Here are
50 multiple-choice questions (MCQs) based on the concept of "Cards"
in Bootstrap, with explanations:
1.
What class is used to create a basic card in Bootstrap?
A) card-body
B) card
C) card-text
D) card-header
Answer: B) card
Explanation: The card
class is used to create the outer container for a card in Bootstrap.
2.
Which class is used to add a body section inside a Bootstrap card?
A) card-header
B) card-footer
C) card-body
D) card-text
Answer: C) card-body
Explanation: The card-body
class is used to define the main content area of the card.
3.
How do you add an image to a Bootstrap card?
A) card-img
B) card-img-top
C) img-card
D) card-image
Answer: B) card-img-top
Explanation: The card-img-top
class is used to add an image at the top of the card.
4.
What class is used to add a title to the card?
A) card-title
B) card-header
C) card-footer
D) card-content
Answer: A) card-title
Explanation: The card-title
class is used to set the title of the card.
5.
Which class is used to add a footer to a Bootstrap card?
A) card-footer
B) card-body
C) card-header
D) card-action
Answer: A) card-footer
Explanation: The card-footer
class is used to create a footer section inside a card.
6.
What is the purpose of the card-deck class in Bootstrap?
A) It
groups cards together into a grid.
B) It styles the header of cards.
C) It creates a collapsible section.
D) It is used for card animations.
Answer: A) It groups cards together into a
grid.
Explanation: The card-deck
class is used to group multiple cards together with equal height and responsive
layout.
7.
Which Bootstrap class is used to create a collapsible card section?
A) collapse
B) expand
C) card-collapse
D) card-toggle
Answer: A) collapse
Explanation: The collapse
class is used to hide or show elements, such as a collapsible card section.
8.
How do you add text overlay on an image in a Bootstrap card?
A) card-img-overlay
B) card-img-text
C) card-text-overlay
D) card-image-overlay
Answer: A) card-img-overlay
Explanation: The card-img-overlay
class is used to add a text overlay on top of an image within a card.
9.
What class is used to add a badge to a Bootstrap card?
A) badge
B) card-badge
C) card-label
D) badge-card
Answer: A) badge
Explanation: The badge
class is used to display small labels (like "New" or
"Sale") in cards or any other element.
10.
How do you add a list of items to a Bootstrap card?
A) card-list
B) list-group
C) card-items
D) list-group-flush
Answer: B) list-group
Explanation: The list-group
class is used to create a list within a card, which can be used for displaying
multiple items.
11.
Which class is used to remove the card’s border?
A) card-border-none
B) card-no-border
C) border-0
D) card-border
Answer: C) border-0
Explanation: The border-0
class removes the border from the card.
12.
How do you make a card responsive in Bootstrap?
A) Use card-responsive
B) Use card-deck
C) Use card-body
D) Use w-100 or col-* classes
Answer: D) Use w-100 or col-* classes
Explanation: You can make a card responsive by using
responsive width classes like w-100
or col-*
classes in a grid.
13.
What class is used to align text inside a card?
A) text-center
B) card-text-center
C) text-align
D) card-align
Answer: A) text-center
Explanation: The text-center
class is used to center align the text inside a card.
14.
What class is used to add a progress bar inside a Bootstrap card?
A) progress
B) progress-bar
C) card-progress
D) progress-container
Answer: A) progress
Explanation: The progress
class is used to create a progress bar inside a card.
15.
Which Bootstrap class is used to create a horizontal card layout?
A) card-horizontal
B) card-row
C) card-deck
D) d-flex
Answer: A) card-horizontal
Explanation: The card-horizontal
class is used to create a horizontal layout for cards by aligning the image and
content side by side.
16.
How do you add a button inside a card?
A) card-button
B) btn
C) card-action
D) card-btn
Answer: B) btn
Explanation: The btn
class is used to add a button inside any Bootstrap component, including cards.
17.
How do you create a card with a group of cards?
A) Use card-deck
B) Use card-group
C) Use card-grid
D) Use card-container
Answer: B) Use card-group
Explanation: The card-group
class is used to group multiple cards together in a row, and they will maintain
the same height.
18.
Which class is used to add a header to a Bootstrap card?
A) card-title
B) card-header
C) card-header-top
D) card-heading
Answer: B) card-header
Explanation: The card-header
class is used to add a header section at the top of a card.
19.
What does the list-group-item class do?
A) It
adds a badge inside a card.
B) It creates an item in a list inside a card.
C) It creates a button inside a card.
D) It styles the card header.
Answer: B) It creates an item in a list
inside a card.
Explanation: The list-group-item
class is used to define items inside a list created with the list-group class.
20.
How do you add a caption below an image inside a Bootstrap card?
A) card-caption
B) card-text
C) card-footer
D) card-body
Answer: B) card-text
Explanation: The card-text
class is used to add a description or caption below the image inside a card.
21.
How do you make a card clickable in Bootstrap?
A) Wrap
the card content in an anchor tag (<a>)
B) Use card-link
C) Add data-toggle="click"
D) Use the clickable-card
class
Answer: A) Wrap the card content in an
anchor tag (<a>)
Explanation: To make a card clickable, wrap the entire card
content in an anchor (<a>)
tag.
22.
What is the default width of a card in Bootstrap?
A) 100%
B) 18rem
C) 50%
D) 25rem
Answer: B) 18rem
Explanation: The default width of a card in Bootstrap is
18rem, though it can be adjusted with custom CSS.
23.
Which class is used to add a heading inside the card body?
A) card-heading
B) card-title
C) card-body-title
D) card-header-title
Answer: B) card-title
Explanation: The card-title
class is used to add a heading inside the card body.
24.
What class is used to create a card with a striped background?
A) card-striped
B) bg-striped
C) card-bg-stripe
D) bg-light
Answer: B) bg-striped
Explanation: The bg-striped
class can be used to create a striped background effect on a card.
25.
How do you create a card group where all cards have the same height?
A) Use card-group
B) Use card-deck
C) Use card-equal
D) Use card-align
Answer: A) Use card-group
Explanation: The card-group
class groups the cards, ensuring they have the same height.
26.
Which class is used to add padding inside a card?
A) card-padding
B) card-body
C) card-space
D) p-3
Answer: D) p-3
Explanation: The p-3
class (padding) can be used to add padding inside a card, making the content
inside it more spacious.
27.
Which class is used to add shadows to a card?
A) card-shadow
B) shadow
C) card-box-shadow
D) card-hover
Answer: B) shadow
Explanation: The shadow
class adds a simple shadow effect to cards in Bootstrap.
28.
How do you create a card with a background color?
A) Use bg-color
B) Use card-bg-color
C) Use bg-*
classes
D) Use card-color
Answer: C) Use bg-* classes
Explanation: The bg-*
classes are used to set different background colors for cards in Bootstrap.
29.
Which class is used to make a card image responsive?
A) img-fluid
B) card-img-responsive
C) card-img-fluid
D) card-image
Answer: A) img-fluid
Explanation: The img-fluid
class ensures that the image inside a card scales responsively.
30.
How do you create a collapsible card in Bootstrap?
A) Use card-collapse
B) Use collapse
with a button
C) Use card-toggle
D) Use card-collapsible
Answer: B) Use collapse with a button
Explanation: The collapse
class is used in combination with a button to create a collapsible section
inside a card.
31.
Which Bootstrap class is used to make a card’s text bold?
A) font-weight-bold
B) card-text-bold
C) text-bold
D) card-body-bold
Answer: A) font-weight-bold
Explanation: The font-weight-bold
class makes the text inside the card bold.
32.
What does the card-header class do in Bootstrap?
A) It
creates a header for the card.
B) It adds a title to the card.
C) It adds an image to the card.
D) It creates a footer for the card.
Answer: A) It creates a header for the
card.
Explanation: The card-header
class creates a header section for the card.
33.
How can you change the size of the image inside a card?
A) Use img-large
B) Use card-img-size
C) Use w-100 or h-auto
D) Use img-fluid
Answer: C) Use w-100 or h-auto
Explanation: The w-100
or h-auto
classes can be used to control the size of the image inside the card, making it
responsive.
34.
Which class is used to add extra space at the bottom of a card?
A) mb-3
B) p-3
C) card-padding
D) card-bottom-space
Answer: A) mb-3
Explanation: The mb-3
class is used to add margin at the bottom of the card.
35.
Which class is used to make a card appear in a circular shape?
A) card-circle
B) rounded-circle
C) card-rounded
D) circle-card
Answer: B) rounded-circle
Explanation: The rounded-circle
class is used to create a circular card shape.
36.
How do you add an overlay on a card image?
A) card-overlay
B) img-overlay
C) card-img-overlay
D) img-overlay-top
Answer: C) card-img-overlay
Explanation: The card-img-overlay
class adds an overlay to the image inside the card, useful for displaying text
or other elements.
37.
What class is used to add an outline to a card?
A) card-outline
B) border
C) card-border
D) outline-card
Answer: B) border
Explanation: The border
class adds a border around the card. You can also use border-* for specific
colors.
38.
How do you center a card within a container?
A) Use text-center
B) Use mx-auto
C) Use card-center
D) Use d-center
Answer: B) Use mx-auto
Explanation: The mx-auto
class is used to center an element horizontally within its container.
39.
What class is used to remove the shadow effect from a card?
A) shadow-none
B) no-shadow
C) shadow-remove
D) card-no-shadow
Answer: A) shadow-none
Explanation: The shadow-none
class removes the shadow effect from the card.
40.
What class is used to control the padding of a card?
A) card-padding
B) p-*
C) card-space
D) card-p
Answer: B) p-*
Explanation: Padding classes such as p-3, p-4, etc., are used to
control the padding inside a card.
41.
What class is used to set the background color of a card?
A) bg-card
B) card-bg
C) bg-*
D) card-bg-color
Answer: C) bg-*
Explanation: The bg-*
classes are used to change the background color of a card.
42.
How do you add a card inside another card?
A) Use card-inside
B) Use card-deck
C) Nest cards within card-body
D) Use card-nested
Answer: C) Nest cards within card-body
Explanation: Cards can be nested inside other cards by placing
one card inside the card-body
of another card.
43.
What class is used to make a card have rounded corners?
A) rounded
B) card-rounded
C) card-cornered
D) border-radius
Answer: A) rounded
Explanation: The rounded
class adds rounded corners to the card.
44.
What class is used to create a card with a full width?
A) card-fullwidth
B) w-100
C) card-fluid
D) card-full
Answer: B) w-100
Explanation: The w-100
class makes the card take up the full width of its container.
45.
What does the list-group-flush class do?
A) Adds a
border around the list items.
B) Removes padding from list items in a card.
C) Removes borders between list items.
D) Adds shadows around the list.
Answer: C) Removes borders between list
items.
Explanation: The list-group-flush
class removes the borders between list items within a list-group.
46.
What is used to make the card footer fixed at the bottom of the card?
A) card-footer-fixed
B) card-footer-bottom
C) position-absolute
D) position-fixed
Answer: C) position-absolute
Explanation: The position-absolute
class is used to position the card footer at the bottom inside the card.
47.
Which class is used to set the width of a card?
A) card-width
B) w-*
C) card-size
D) card-dimension
Answer: B) w-*
Explanation: The w-*
classes are used to set the width of a card.
48.
How do you add a loading spinner inside a card?
A) Use spinner class
B) Use card-loader
C) Use spinner-border
D) Use card-spinner
Answer: C) Use spinner-border
Explanation: The spinner-border
class can be used to add a loading spinner inside a card.
49.
Which class is used to make a card completely transparent?
A) card-transparent
B) opacity-0
C) bg-transparent
D) card-opacity
Answer: C) bg-transparent
Explanation: The bg-transparent
class makes the background of a card completely transparent.
50.
How do you add a clickable link inside a card?
A) Use card-link
B) Use link-card
C) Use card-button
D) Use card-anchor
Answer: A) Use card-link
Explanation: The card-link
class is used to add a clickable link inside the card.
No comments:
Post a Comment