Lecture Notes Of Class 14: Lists and Breadcrumbs
Objective:
By the
end of this class, students will be able to understand and implement list
groups and breadcrumbs using Bootstrap. They will
also learn how to use these components in practical scenarios, such as creating
a sidebar menu and implementing navigation breadcrumbs.
1. Introduction
to Lists and Breadcrumbs
1.1. List
Groups
A List
Group is a flexible and easy-to-style list component available in
Bootstrap. List groups are used to present a series of content in a list format,
with the ability to group items, highlight them, and even add additional
features like badges for notification counts.
Common
Uses of List Groups:
- Sidebar
menus
- Navigation
lists
- Grouped
content items
- Actionable
items in forms or reports
Key
Features:
- Interactive Lists:
Links within the list group can be styled to look like buttons or active
items.
- Badges:
Badges can be added to list group items for additional context or data,
such as the number of messages or notifications.
1.2. Breadcrumbs
Breadcrumbs
are a form of navigation that helps users understand and track their current
location within a website. Typically, breadcrumbs show the hierarchical
structure of pages starting from the home page.
Why
Use Breadcrumbs?
- They
help users understand the structure of a website.
- They
improve navigation by allowing users to jump to higher levels in the
hierarchy.
- They
reduce the number of clicks to go back to previous pages.
2. List
Groups in Detail
2.1. Basic
List Group Structure
In
Bootstrap, a basic list group is created using a <ul>
element with the .list-group
class. Each item in the list uses the .list-group-item
class.
Example:
html<ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li></ul>
- The
<ul>element is the parent container for the list. - Each
<li>represents an individual list item.
Result:
- The
list will be displayed with a default Bootstrap style, where each item is
separated with padding and borders.
2.2. Adding
Active and Disabled Items
To
highlight a specific item as active (selected), add the .active class to that list
item. Similarly, if you want to disable a list item, you can add the .disabled class.
Example:
html<ul class="list-group"> <li class="list-group-item active">Active Item</li> <li class="list-group-item">Item 2</li> <li class="list-group-item disabled">Disabled Item</li></ul>
Result:
- The
first item will have a distinct style indicating that it is active.
- The
third item will appear grayed out and unclickable due to the
.disabledclass.
2.3. Adding
Links to List Items
If you
want list items to act as links (e.g., for navigation), you can use the <a> tag inside each
list item and apply the .list-group-item
class to the <a>
tag.
Example:
html<ul class="list-group"> <li class="list-group-item"><a href="#home">Home</a></li> <li class="list-group-item"><a href="#about">About</a></li> <li class="list-group-item"><a href="#contact">Contact</a></li></ul>
Result:
- Each
item will now behave like a clickable link, making it suitable for use in
menus or navigation.
2.4. List
Group with Badges
You can
use badges to display additional information, such as the
number of notifications or messages. Badges are small, rounded indicators that
can be placed next to a list item.
Example:
html<ul class="list-group"> <li class="list-group-item">Item 1 <span class="badge bg-primary">New</span></li> <li class="list-group-item">Item 2 <span class="badge bg-success">5</span></li></ul>
Result:
- The
badges will appear next to the list items, providing additional context
(like the number of new items or notifications).
3. Breadcrumbs
in Detail
3.1. Basic
Breadcrumb Structure
Breadcrumbs
are created using a <nav>
element with the .breadcrumb
class. Each breadcrumb item is wrapped in an <li>
with the .breadcrumb-item
class. The current page is usually not linked and is represented by an anchor
tag (<a>)
or simply as text.
Example:
html<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol></nav>
Explanation:
- The
<ol>tag creates an ordered list for the breadcrumb items. - Each
breadcrumb item is marked with the
.breadcrumb-itemclass. - The
active breadcrumb (representing the current page) is marked with the
.activeclass.
3.2. Breadcrumbs
with Links
Breadcrumbs
are typically used with links to navigate back through different levels of a
website hierarchy.
Example:
html<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Shop</a></li> <li class="breadcrumb-item active" aria-current="page">Product</li> </ol></nav>
Result:
- "Home"
and "Shop" are clickable, and the current page
"Product" is not clickable.
4. Lab
Tasks
4.1. Task
1: Add a List Group for a Sidebar Menu
To create
a sidebar menu using a list group, follow these steps:
1.
Create a Sidebar Layout: Use a div
for the sidebar container and apply the .list-group
class to a <ul>
element.
2.
Add List Items for Each Menu Option: Use <li>
elements for each menu item. Optionally, use the .active
class to highlight the current page.
Example:
html<div class="col-md-3"> <ul class="list-group"> <li class="list-group-item active"><a href="#">Dashboard</a></li> <li class="list-group-item"><a href="#">Profile</a></li> <li class="list-group-item"><a href="#">Settings</a></li> <li class="list-group-item"><a href="#">Logout</a></li> </ul></div>
4.2. Task
2: Create Breadcrumbs for Navigation
To create
a breadcrumb trail, follow these steps:
1.
Add the Breadcrumb Structure: Use the <nav> tag with the .breadcrumb class and the <ol> tag for the
list.
2.
Add Links for Higher-Level Pages: Each <li>
inside the breadcrumb should have a link, except for the last item, which
should be marked as active.
Example:
html<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Shop</a></li> <li class="breadcrumb-item active" aria-current="page">Product</li> </ol></nav>
5. Conclusion
In this
class, you have learned how to:
- Implement
List Groups for creating sidebars and menus.
- Use
Badges to display additional information in list items.
- Create
Breadcrumbs for better navigation on websites.
These
components help in building more interactive and user-friendly interfaces,
improving both user experience and navigation.
You
said:
WRITE 10 ASSIGNMENTS
FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation
ChatGPT
said:
Here are 10
assignments based on the concepts of List Groups and Breadcrumbs
in Bootstrap, with step-by-step solutions and proper
explanations:
Assignment
1: Create a Basic List Group
Objective: Create a basic list group with
three items.
Steps:
1.
Create a new HTML file.
2.
Use the <ul>
element with the class .list-group to create
the container.
3.
Add three list items using the <li> element with the
class .list-group-item.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic List Group</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </body></html>
Explanation: This creates a simple list group
with three items using Bootstrap's built-in .list-group
and .list-group-item
classes.
Assignment
2: Add Active and Disabled List Items
Objective: Modify the list from Assignment 1
to include one active and one disabled item.
Steps:
1.
Add the .active
class to one of the list items to highlight it as active.
2.
Add the .disabled
class to another list item to make it appear grayed out.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List Group with Active and Disabled Items</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <ul class="list-group"> <li class="list-group-item active">Active Item</li> <li class="list-group-item">Item 2</li> <li class="list-group-item disabled">Disabled Item</li> </ul> </body></html>
Explanation: The .active
class highlights the first item, while the .disabled
class makes the third item unclickable and grayed out.
Assignment
3: Create a List Group with Links
Objective: Create a list group where each item
is a link that navigates to different pages.
Steps:
1.
Replace each list item's content with an
anchor <a> tag.
2.
Use the .list-group-item
class on the anchor tag.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List Group with Links</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <ul class="list-group"> <li class="list-group-item"><a href="#">Home</a></li> <li class="list-group-item"><a href="#">About</a></li> <li class="list-group-item"><a href="#">Contact</a></li> </ul> </body></html>
Explanation: Each list item is now a clickable
link, styled with Bootstrap's .list-group-item
class.
Assignment
4: Add Badges to List Items
Objective: Add badges to list items for
displaying additional data like notifications.
Steps:
1.
Add a <span>
inside a list item with the .badge
class.
2.
Apply a badge color using classes like .bg-primary, .bg-success, etc.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List Group with Badges</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <ul class="list-group"> <li class="list-group-item">Messages <span class="badge bg-primary">4</span></li> <li class="list-group-item">Notifications <span class="badge bg-success">12</span></li> <li class="list-group-item">Tasks <span class="badge bg-danger">5</span></li> </ul> </body></html>
Explanation: Each list item now includes a badge
that displays additional numbers, like unread messages or tasks.
Assignment
5: Create a Sidebar Menu with List Group
Objective: Create a sidebar menu using a list
group with links.
Steps:
1.
Create a sidebar container using <div> and apply .col-md-3 for layout.
2.
Inside the sidebar, use a list group
with links for different menu options.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidebar Menu</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body class="container"> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item active"><a href="#">Dashboard</a></li> <li class="list-group-item"><a href="#">Profile</a></li> <li class="list-group-item"><a href="#">Settings</a></li> <li class="list-group-item"><a href="#">Logout</a></li> </ul> </div> </body></html>
Explanation: The sidebar is created using the .list-group class, and
each list item acts as a menu link.
Assignment
6: Create Breadcrumbs for Page Navigation
Objective: Create a breadcrumb navigation for
a page showing a website hierarchy.
Steps:
1.
Use the <nav>
tag with .breadcrumb class for
breadcrumb navigation.
2.
Create list items inside an ordered list
<ol> for each
breadcrumb item.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Breadcrumbs</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Shop</a></li> <li class="breadcrumb-item active" aria-current="page">Product</li> </ol> </nav> </body></html>
Explanation: Breadcrumbs show the hierarchy,
with "Home" and "Shop" as clickable links, and
"Product" as the current page.
Assignment
7: Highlight Active Breadcrumb Item
Objective: Modify the breadcrumb from
Assignment 6 to highlight the active breadcrumb item.
Steps:
1.
Add .active
class to the last item in the breadcrumb list.
2.
The active item will not be a link, just
plain text.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Breadcrumb Item</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Category</a></li> <li class="breadcrumb-item active" aria-current="page">Product Details</li> </ol> </nav> </body></html>
Explanation: The last breadcrumb "Product
Details" is highlighted as active, indicating the user's current page.
Assignment
8: Create a Multi-Level Breadcrumb Navigation
Objective: Create a breadcrumb navigation that
supports multiple levels (nested items).
Steps:
1.
Create multiple breadcrumb items,
including sub-level breadcrumbs.
2.
Apply the .breadcrumb
and .breadcrumb-item
classes accordingly.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-Level Breadcrumbs</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Shop</a></li> <li class="breadcrumb-item"><a href="#">Electronics</a></li> <li class="breadcrumb-item active" aria-current="page">Smartphones</li> </ol> </nav> </body></html>
Explanation: The breadcrumb shows a hierarchy of
categories, with a final active item "Smartphones".
Assignment
9: Style Breadcrumbs with Custom Colors
Objective: Customize the breadcrumb colors
using Bootstrap’s contextual classes.
Steps:
1.
Apply classes like .bg-primary, .text-white, or .bg-secondary to change the
background color.
2.
Use the .breadcrumb-item
class for styling the list items.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Breadcrumb Colors</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item bg-primary text-white"><a href="#">Home</a></li> <li class="breadcrumb-item bg-secondary text-white"><a href="#">Shop</a></li> <li class="breadcrumb-item active bg-success text-white" aria-current="page">Smartphones</li> </ol> </nav> </body></html>
Explanation: Custom background colors are
applied to breadcrumb items using Bootstrap classes.
Assignment
10: Create a Responsive Breadcrumb Navigation
Objective: Make the breadcrumb responsive so
that it adjusts well on different screen sizes.
Steps:
1.
Use the same breadcrumb structure.
2.
Use responsive classes like .d-flex and .justify-content-start to
ensure good alignment.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Breadcrumbs</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <nav aria-label="breadcrumb"> <ol class="breadcrumb d-flex justify-content-start"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Shop</a></li> <li class="breadcrumb-item active" aria-current="page">Smartphones</li> </ol> </nav> </body></html>
Explanation: The breadcrumb is styled
responsively to align neatly on any screen size.
These
assignments cover various fundamental aspects of using List Groups
and Breadcrumbs with step-by-step solutions to help learners
understand how to use them effectively.
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 List Groups
and Breadcrumbs concepts using Bootstrap 5:
List
Group Questions
1.
Which Bootstrap class is used to create a basic list group?
o a)
.list-group
o b)
.list-items
o c)
.list-group-item
o d)
.list-group-container
Answer:
a) .list-group
Explanation: The .list-group
class is used to create a container for list group items in Bootstrap.
2.
What is the correct way to add a clickable item to a list
group in Bootstrap?
o a)
<li
class="list-group-item"><a
href="#">Item</a></li>
o b)
<a
class="list-group-item" href="#">Item</a>
o c)
<div
class="list-group-item"><a
href="#">Item</a></div>
o d)
<a href="#"
class="list-group">Item</a>
Answer:
b) <a
class="list-group-item" href="#">Item</a>
Explanation: To make a list item clickable, you apply the .list-group-item class to
the anchor (<a>)
tag.
3.
Which class is used to style a list group item as active in
Bootstrap?
o a)
.active-item
o b)
.active
o c)
.list-group-active
o d)
.active-group
Answer:
b) .active
Explanation: The .active
class is used to highlight the active item in a list group.
4.
How can you make a list group item disabled in Bootstrap?
o a)
.disabled
o b)
.list-group-item-disabled
o c)
.disabled-item
o d)
.list-group-item-disabled
Answer:
a) .disabled
Explanation: You can add the .disabled
class to a list group item to make it non-interactive.
5.
Which Bootstrap class is used to create a list group with
custom styles?
o a)
.list-group-custom
o b)
.list-group
o c)
.list-group-styled
o d)
.list-group-item-custom
Answer:
b) .list-group
Explanation: The .list-group
class is the base class used to create list groups in Bootstrap. Custom styles
can be added with additional classes.
6.
To make the list items inside a list group have different
colors, you can use which class?
o a)
.list-group-item-primary
o b)
.list-group-item-success
o c)
.list-group-item-warning
o d)
All of the above
Answer:
d) All of the above
Explanation: Bootstrap offers classes like .list-group-item-primary, .list-group-item-success,
and .list-group-item-warning
to style items with different background colors.
7.
What does the .list-group-flush class do in Bootstrap?
o a)
Adds spacing between list items
o b)
Removes borders and padding from the list group
o c)
Changes list items to buttons
o d)
None of the above
Answer:
b) Removes borders and padding from the list group
Explanation: The .list-group-flush
class removes the borders and padding between list group items for a cleaner
look.
8.
Which class is used to create a horizontal list group?
o a)
.list-group-horizontal
o b)
.list-group-item-horizontal
o c)
.horizontal-list-group
o d)
.list-group-inline
Answer:
a) .list-group-horizontal
Explanation: The .list-group-horizontal
class is used to make a list group horizontal.
9.
Which of the following is NOT a valid way to use list groups
with Bootstrap?
o a)
Vertical list group
o b)
Horizontal list group
o c)
Inline list group
o d)
None of the above
Answer:
c) Inline list group
Explanation: There is no specific class for "inline"
list groups in Bootstrap; you would use .list-group-horizontal
for horizontal display.
10.
Which of the following classes is used to add badges to list
group items?
o a)
.badge
o b)
.badge-item
o c)
.badge-list
o d)
.badge-group
Answer:
a) .badge
Explanation: You can add badges to list group items using the .badge class.
Breadcrumbs
Questions
11.
Which Bootstrap class is used to create breadcrumbs?
o a)
.breadcrumb
o b)
.breadcrumb-nav
o c)
.nav-breadcrumb
o d)
.nav-pills
Answer:
a) .breadcrumb
Explanation: The .breadcrumb
class is used to create breadcrumb navigation in Bootstrap.
12.
What tag is used to wrap the breadcrumb items in Bootstrap?
o a)
<ul>
o b)
<div>
o c)
<ol>
o d)
<nav>
Answer:
c) <ol>
Explanation: Breadcrumbs are wrapped in an ordered list (<ol>) to indicate
the order of items.
13.
How do you indicate the current (active) page in a breadcrumb
in Bootstrap?
o a)
.active
o b)
.current
o c)
.breadcrumb-active
o d)
.item-active
Answer:
a) .active
Explanation: The .active
class is used to indicate the current or active page in the breadcrumb.
14.
What attribute is used for accessibility to describe the
breadcrumb navigation in Bootstrap?
o a)
role="navigation"
o b)
aria-role="breadcrumb"
o c)
aria-label="breadcrumb"
o d)
alt="breadcrumb"
Answer:
c) aria-label="breadcrumb"
Explanation: The aria-label="breadcrumb"
attribute is used to provide an accessible label for screen readers.
15.
Which of the following is the correct way to create a
breadcrumb navigation for "Home > Products > Electronics"?
o a)
<nav><ul><li>Home</li><li>Products</li><li>Electronics</li></ul></nav>
o b)
<nav><ol><li>Home</li><li>Products</li><li>Electronics</li></ol></nav>
o c)
<ol><li>Home</li><li>Products</li><li>Electronics</li></ol>
o d)
<ol><li>Home</li><li>Products</li><li
class="active">Electronics</li></ol>
Answer:
b) <nav><ol><li>Home</li><li>Products</li><li>Electronics</li></ol></nav>
Explanation: Breadcrumbs in Bootstrap are usually wrapped
inside a <nav>
element, with an ordered list (<ol>).
16.
How do you add custom styling to breadcrumb items in
Bootstrap?
o a)
By using .breadcrumb-item
o b)
By using .breadcrumb-link
o c)
By using .breadcrumb-custom
o d)
By using .breadcrumb-style
Answer:
a) By using .breadcrumb-item
Explanation: You can customize individual breadcrumb items
using the .breadcrumb-item
class.
17.
Which Bootstrap class can be added to a breadcrumb item to
create a clickable link?
o a)
.breadcrumb-link
o b)
.breadcrumb-item
o c)
.breadcrumb
o d)
.active
Answer:
b) .breadcrumb-item
Explanation: The .breadcrumb-item
class is used to create each item in the breadcrumb, and it can be wrapped with
a <a>
tag to make it clickable.
18.
What is the purpose of the .breadcrumb-item.active class in breadcrumbs?
o a)
It makes the item a link.
o b)
It marks the current page in the breadcrumb.
o c)
It adds custom styling to the item.
o d)
None of the above.
Answer: b)
It marks the current page in the breadcrumb.
Explanation: The .breadcrumb-item.active
class is used to indicate the current page in a breadcrumb trail.
19.
Which Bootstrap class can be used to make the breadcrumb
links more colorful?
o a)
.breadcrumb-color
o b)
.breadcrumb-item-primary
o c)
.text-primary
o d)
.badge-primary
Answer:
c) .text-primary
Explanation: The .text-primary
class can be used to change the color of breadcrumb links to the primary color
defined in Bootstrap.
20.
How would you hide the breadcrumb on smaller screens in
Bootstrap?
o a)
.d-none .d-md-block
o b)
.breadcrumb-hidden
o c)
.d-hidden
o d)
.breadcrumb-hide
Answer:
a) .d-none .d-md-block
Explanation: The .d-none
class hides the breadcrumb, and .d-md-block
ensures that it appears on medium screens and larger.
General
List Group and Breadcrumbs Questions
21.
Which of the following is a valid list group item with a
badge in Bootstrap?
o a)
<li
class="list-group-item">Item <span class="badge
bg-primary">New</span></li>
o b)
<div
class="list-group-item">Item <span class="badge
bg-primary">New</span></div>
o c)
<ul><li
class="list-group-item">Item <span class="badge
bg-primary">New</span></li></ul>
o d)
All of the above
Answer:
d) All of the above
Explanation: All of these options are valid ways to create
list group items with badges.
22.
How can you create a breadcrumb with a separator other than
the default / in Bootstrap?
o a)
By modifying the separator property in
CSS
o b)
Using .breadcrumb-separator
o c)
By changing the HTML structure
o d)
It's not possible in Bootstrap
Answer:
a) By modifying the separator
property in CSS
Explanation: You can change the separator for breadcrumbs
using CSS.
23.
Which of the following classes are used to customize list
group items in Bootstrap?
o a)
.list-group-item-primary
o b)
.list-group-item-success
o c)
.list-group-item-danger
o d)
All of the above
Answer:
d) All of the above
Explanation: Bootstrap provides several contextual classes
like .list-group-item-primary,
.list-group-item-success,
and .list-group-item-danger
to customize list group items.
24.
Which element in a breadcrumb trail is usually marked as
active?
o a)
First item
o b)
Middle item
o c)
Last item
o d)
All items
Answer:
c) Last item
Explanation: The last item in a breadcrumb trail is usually
marked as active, indicating the current page.
Continue
with more questions if required.
You
said:
more 26 from same
concept above
ChatGPT
said:
Here are
26 more MCQs based on the List Groups and Breadcrumbs
concepts from Bootstrap 5:
List
Group Questions
25.
Which of the following classes is used to create a list group
with items stacked vertically?
- a)
.list-group-item - b)
.list-group-vertical - c)
.list-group-inline - d)
.list-group
Answer: d) .list-group
Explanation: The .list-group
class is used to create a vertical stack of list items by default.
26.
Which class can be added to a list group item to indicate a
successful action?
- a)
.list-group-item-success - b)
.list-group-item-danger - c)
.list-group-item-warning - d)
.list-group-item-primary
Answer: a) .list-group-item-success
Explanation: The .list-group-item-success
class is used to style list group items with a success (green) color.
27.
Which of the following is the correct HTML structure for a
horizontal list group in Bootstrap?
- a)
<ul class="list-group list-group-horizontal">...</ul> - b)
<div class="list-group list-group-horizontal">...</div> - c)
<ol class="list-group-horizontal">...</ol> - d)
<ol class="list-group">...</ol>
Answer: a) <ul
class="list-group list-group-horizontal">...</ul>
Explanation: To create a horizontal list group, the .list-group-horizontal
class is added to the .list-group.
28.
How can you create a list group with items having different
background colors?
- a)
Add
.bg-primary,.bg-success, etc., to.list-group-item - b)
Add
.list-group-item-active - c)
Add
.list-group-item-hover - d)
Add
.list-group-bg-color
Answer: a) Add .bg-primary, .bg-success, etc., to .list-group-item
Explanation: Bootstrap allows different background colors for
list items using the .bg-*
classes such as .bg-primary,
.bg-success,
etc.
29.
Which class in Bootstrap is used to make a list group item
appear as a pill-shaped button?
- a)
.list-group-item-pill - b)
.btn-pill - c)
.list-group-item-rounded - d)
.list-group-item-pill
Answer: d) .list-group-item-pill
Explanation: The .list-group-item-pill
class gives a pill shape to a list group item.
30.
What is the correct HTML code to create a list group with a
custom class for styling?
- a)
<ul class="list-group list-group-custom">...</ul> - b)
<ol class="list-group list-group-styled">...</ol> - c)
<ul class="list-group list-group-item-custom">...</ul> - d)
<ul class="list-group">...</ul>
Answer: a) <ul
class="list-group list-group-custom">...</ul>
Explanation: You can apply custom styling by adding additional
custom classes alongside .list-group.
31.
Which class would you use to create a bordered list group?
- a)
.list-group-bordered - b)
.list-group-item-border - c)
.bordered - d)
.list-group-item
Answer: a) .list-group-bordered
Explanation: The .list-group-bordered
class is used to add borders to the list group.
32.
Which class would you add to a list item to make it clickable
as a link?
- a)
.list-group-item-link - b)
.list-group-item-clickable - c)
.list-group-item - d)
.list-group-item-action
Answer: d) .list-group-item-action
Explanation: The .list-group-item-action
class makes a list group item clickable, typically for links.
33.
Which class is used to add a list group item with a badge to
indicate new items?
- a)
.badge-list-item - b)
.list-group-item-new - c)
.badge - d)
.list-group-item-primary
Answer: c) .badge
Explanation: You can add a .badge
class inside a list group item to show a label indicating new or important
items.
34.
How do you align the list group horizontally within its
parent container?
- a)
Use
.d-inline - b)
Use
.list-group-inline - c)
Use
.list-group-horizontal - d)
Use
.d-flex
Answer: b) Use .list-group-inline
Explanation: The .list-group-inline
class can be used to align list group items horizontally.
35.
Which class is used to indicate a danger or error state in a
list group item?
- a)
.list-group-item-danger - b)
.list-group-item-warning - c)
.list-group-item-error - d)
.list-group-item-danger-bg
Answer: a) .list-group-item-danger
Explanation: The .list-group-item-danger
class is used to indicate an error or danger state in a list item.
Breadcrumbs
Questions
36.
What HTML element is used to represent individual breadcrumb
items in Bootstrap?
- a)
<div> - b)
<span> - c)
<li> - d)
<a>
Answer: c) <li>
Explanation: Each breadcrumb item is represented by a <li> (list item)
element in the breadcrumb list.
37.
How would you link the breadcrumb "Home > About
Us" using Bootstrap?
- a)
<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li></ol> - b)
<nav class="breadcrumb"><a href="#">Home</a> > <a href="#">About Us</a></nav> - c)
<ol class="breadcrumb"><li>Home</li><li>About Us</li></ol> - d)
<nav class="breadcrumb"><span>Home > About Us</span></nav>
Answer: a) <ol
class="breadcrumb"><li><a
href="#">Home</a></li><li><a
href="#">About Us</a></li></ol>
Explanation: The breadcrumb navigation in Bootstrap uses <ol> and <li> tags, with
links represented by <a>
tags.
38.
How do you mark the current breadcrumb item as active?
- a)
Add
.activeclass to the<li> - b)
Add
.currentclass to the<a> - c)
Add
.breadcrumb-item-activeclass to the<nav> - d)
Add
.active-itemclass to the<span>
Answer: a) Add .active class to the <li>
Explanation: The .active
class is added to the last breadcrumb item to mark it as the current page.
39.
Which of the following is the correct way to add a custom
separator between breadcrumb items in Bootstrap?
- a)
Modify the
separatorproperty in CSS - b)
Use
.breadcrumb-separator - c)
Use
.breadcrumb-item-divider - d)
It is not possible to change the separator
Answer: a) Modify the separator property in CSS
Explanation: The breadcrumb separator can be customized by
modifying the separator
property using CSS.
40.
How do you add a link to the first item in a breadcrumb
trail?
- a)
<li><a href="#">First</a></li> - b)
<ol><li><a href="#">First</a></li></ol> - c)
<nav><ol><li><a href="#">First</a></li></ol></nav> - d)
All of the above
Answer: d) All of the above
Explanation: You can add a link to the first breadcrumb item
using an anchor (<a>)
tag in any of these ways.
41.
What class is used to apply a primary color to breadcrumb
items?
- a)
.breadcrumb-primary - b)
.text-primary - c)
.breadcrumb-item-primary - d)
.breadcrumb-active
Answer: b) .text-primary
Explanation: The .text-primary
class is used to apply the primary color to breadcrumb text.
42.
Which Bootstrap component can be used alongside breadcrumbs
to improve accessibility for screen readers?
- a)
aria-label="breadcrumb" - b)
role="navigation" - c)
Both a and b
- d)
None of the above
Answer: c) Both a and b
Explanation: Adding aria-label="breadcrumb"
and role="navigation"
improves accessibility for breadcrumb navigation.
43.
Which of the following is NOT a valid way to create
breadcrumbs in Bootstrap?
- a)
Using
<ol class="breadcrumb"> - b)
Using
<nav class="breadcrumb"> - c)
Using
<ul class="breadcrumb"> - d)
Using
<div class="breadcrumb">
Answer: c) Using <ul class="breadcrumb">
Explanation: Breadcrumbs in Bootstrap are created using <ol class="breadcrumb">,
not <ul>.
44.
What is the purpose of a breadcrumb in web design?
- a)
To provide navigation to users
- b)
To separate page content
- c)
To create a list of items
- d)
To display images
Answer: a) To provide navigation to users
Explanation: Breadcrumbs are a form of secondary navigation
that show the user's location in a website hierarchy.
45.
Which class is used to create a breadcrumb container in
Bootstrap?
- a)
.breadcrumb-container - b)
.breadcrumb - c)
.breadcrumb-nav - d)
.nav-breadcrumb
Answer: b) .breadcrumb
Explanation: The .breadcrumb
class is used to create the breadcrumb container in Bootstrap.
46.
How do you add a breadcrumb separator between items?
- a)
Modify
separatorproperty in CSS - b)
Use
.breadcrumb-separatorclass - c)
Use
::beforeor::afterpseudo-elements in CSS - d)
It’s not customizable
Answer: c) Use ::before or ::after pseudo-elements in
CSS
Explanation: Custom separators can be applied using the ::before or ::after pseudo-elements in
CSS.
47.
Which of the following is correct to add a breadcrumb to a
page?
- a)
<ol class="breadcrumb"><li>Home</li></ol> - b)
<nav class="breadcrumb"><span>Home</span></nav> - c)
<nav><ol class="breadcrumb"><li><a href="#">Home</a></li></ol></nav> - d)
<ul class="breadcrumb"><a href="#">Home</a></ul>
Answer: c) <nav><ol
class="breadcrumb"><li><a
href="#">Home</a></li></ol></nav>
Explanation: A breadcrumb in Bootstrap is typically created
inside a <nav>
element with an ordered list (<ol>)
of breadcrumb items.
48.
What Bootstrap class would you use to create a breadcrumb
without active items?
- a)
.breadcrumb - b)
.breadcrumb-item - c)
.breadcrumb-link - d)
.breadcrumb-no-active
Answer: a) .breadcrumb
Explanation: The .breadcrumb
class can be used for creating breadcrumb navigation without marking any item
as active.
49.
What is the default separator for breadcrumbs in Bootstrap?
- a)
| - b)
> - c)
/ - d)
>
Answer: c) /
Explanation: The default separator for breadcrumbs in
Bootstrap is the /
symbol.
50.
Which attribute should be added to a breadcrumb item to make
it accessible for screen readers?
- a)
aria-hidden="true" - b)
aria-labelledby="breadcrumb" - c)
aria-current="page" - d)
aria-role="breadcrumb"
Answer: c) aria-current="page"
Explanation: Adding aria-current="page"
helps screen readers understand which breadcrumb item corresponds to the
current page.
No comments:
Post a Comment