Bootstrap MCQ’S
Here are MCQs based on your notes on Bootstrap, including features, components,
versions, and usage:
Bootstrap MCQs
1. What is Bootstrap primarily used for?
a) Backend development
b) Operating system installation
c) Faster and easier front-end web development
d) Database optimization
Answer: c) Faster and easier front-end web development
2. What does Bootstrap NOT include?
a) CSS templates
b) JavaScript plugins
c) Database connectors
d) Navigation components
Answer: c) Database connectors
3. In Bootstrap, what is a "modal"?
a) A CSS color class
b) A JavaScript function
c) A dialog box/popup window
d) A Bootstrap container
Answer: c) A dialog box/popup window
4. What does the Bootstrap typography utility help with?
a) Database schemas
b) Font styles and casing (uppercase/lowercase)
c) Adding images
d) Button animation
Answer: b) Font styles and casing (uppercase/lowercase)
5. What technology was removed in Bootstrap 5 that was used in Bootstrap 3 and 4?
a) Angular
b) React
c) jQuery
d) Node.js
Answer: c) jQuery
6. Which of the following is NOT an advantage of using Bootstrap?
a) Easy to use
b) Responsive features
c) Requires heavy server resources
d) Mobile-first approach
Answer: c) Requires heavy server resources
7. What does "mobile-first approach" in Bootstrap mean?
a) Sites are only compatible with mobiles
b) Mobile development is secondary
c) Pages are designed for mobile first, then adapted for larger screens
d) It disables desktop view
Answer: c) Pages are designed for mobile first, then adapted for larger screens
8. Which of the following is TRUE about Bootstrap’s browser support?
a) Works only in Chrome
b) Supports all major modern browsers
c) Doesn’t support mobile browsers
d) Only works in Internet Explorer
Answer: b) Supports all major modern browsers
9. What is CDN in the context of Bootstrap?
a) Central Deployment Node
b) Content Download Network
c) Content Delivery Network
d) Custom Design Navigation
Answer: c) Content Delivery Network
10. Why do we use Bootstrap via CDN?
a) For offline use
b) To use it without downloading the files
c) To reduce HTML size
d) To compress CSS
Answer: b) To use it without downloading the files
11. What is the main requirement to use Bootstrap via CDN?
a) PHP installed
b) Java SDK
c) Internet connection
d) MySQL database
Answer: c) Internet connection
12. If a developer wants to use Bootstrap offline, what must they do?
a) Use a VPN
b) Download the Bootstrap files
c) Open Chrome
d) Install Bootstrap via Node.js
Answer: b) Download the Bootstrap files
.container and .container-fluid
Here are MCQs specifically on container and container-fluid classes in Bootstrap:
Bootstrap Container Classes MCQs
1. What is the main difference between .container and .container-fluid in
Bootstrap?
a) .container is for fixed-width layout, .container-fluid is full-width
b) Both are exactly the same
c) .container makes elements scrollable
d) .container-fluid applies border-radius
Answer: a) .container is for fixed-width layout, .container-fluid is full-width
2. Which class should you use for a layout that should span the entire width of the
screen regardless of device size?
a) .container-fixed
b) .container
c) .container-fluid
d) .container-full
Answer: c) .container-fluid
3. Which container class adjusts its width based on screen size breakpoints (like
sm, md, lg, xl)?
a) .container
b) .container-fluid
c) .container-responsive
d) .container-adaptive
Answer: a) .container
4. When using .container, what happens on small devices like mobile phones?
a) It always fills 100% of the screen
b) It remains fixed at 1200px
c) It adapts its width to device breakpoints
d) It becomes .container-fluid automatically
Answer: c) It adapts its width to device breakpoints
5. Which of the following is TRUE about .container-fluid?
a) It centers the layout
b) It has fixed max-width
c) It spans full width of the viewport
d) It does not work on mobile
Answer: c) It spans full width of the viewport
6. What is the use of container classes in Bootstrap?
a) To center-align text
b) To add responsive margins and paddings
c) To wrap and align content inside a responsive layout
d) To add animations
Answer: c) To wrap and align content inside a responsive layout
7. Which Bootstrap class would you use for a centered layout that adapts to screen
size with max-width?
a) .container-center
b) .container-fluid
c) .container
d) .layout-center
Answer: c) .container
8. Which container class is more suitable for dashboards or full-screen apps?
a) .container
b) .container-fluid
c) .container-sm
d) .container-wide
Answer: b) .container-fluid
Grid Systems
Here are comprehensive MCQs on the Bootstrap Grid System – including rows,
columns, breakpoints, classes, and behavior:
MCQs on Bootstrap Grid System
1. What is the maximum number of columns allowed in a single Bootstrap grid row?
a) 10
b) 12
c) 16
d) Unlimited
Answer: b) 12
2. Which class defines a column that takes 6 out of 12 columns in medium devices?
a) .col-6
b) .col-sm-6
c) .col-md-6
d) .col-xl-6
Answer: c) .col-md-6
3. What is the purpose of .row class in the Bootstrap grid system?
a) It applies a background
b) It removes margin
c) It creates a horizontal group of columns
d) It defines a container
Answer: c) It creates a horizontal group of columns
4. In Bootstrap, which class makes a column take the full width of its container
regardless of screen size?
a) .col-md-12
b) .col
c) .col-12
d) Both b and c
Answer: d) Both b and c
5. What is the gutter space in Bootstrap Grid used for?
a) Adding padding between columns
b) Removing margins
c) Creating animations
d) Adjusting z-index
Answer: a) Adding padding between columns
6. What does the .col class do if no number is specified (like .col-md-6)?
a) Makes column invisible
b) Disables responsiveness
c) Automatically distributes column width evenly
d) Fixes column size to 100px
Answer: c) Automatically distributes column width evenly
7. Which class combination creates two equal-width columns on large screens and
stacks them on smaller screens?
a) .col-6
b) .col-lg-6 col-sm-12
c) .col-md-6
d) .col-12 col-12
Answer: b) .col-lg-6 col-sm-12
8. How many total units can you use in a single row of Bootstrap’s grid system?
a) 6
b) 9
c) 10
d) 12
Answer: d) 12
9. What is the role of the .container or .container-fluid when using Bootstrap grids?
a) They make text uppercase
b) They provide padding and alignment for .row
c) They create shadow around rows
d) They apply dark mode
Answer: b) They provide padding and alignment for .row
10. Which class would you use to define a column that takes 4 parts on large
screens?
a) .col-lg-4
b) .col-sm-4
c) .col-xl-4
d) .col-4
Answer: a) .col-lg-4
11. In Bootstrap 5, how do you remove gutter spacing between columns in a row?
a) .row-no-gap
b) .gutter-0
c) .no-gutters
d) .gx-0
Answer: d) .gx-0 (new Bootstrap 5 class)
12. What is the smallest screen breakpoint in Bootstrap 5 grid system?
a) xs
b) sm
c) md
d) xxs
Answer: a) xs (used implicitly when no breakpoint is specified)
13. What happens if you exceed 12 columns in one row?
a) It overflows
b) It wraps to a new line
c) It removes the first column
d) It shows an error
Answer: b) It wraps to a new line
14. Which class adds space between rows vertically?
a) .gy-*
b) .gx-*
c) .gap-*
d) .spacing-*
Answer: a) .gy-*
15. Which is the correct class to align columns horizontally centered inside a row?
a) .text-center
b) .row-center
c) .justify-content-center
d) .align-items-center
Answer: c) .justify-content-center
Typography
Here are comprehensive MCQs on Typography in Bootstrap – including headings,
display, text alignment, font utilities, and more:
Bootstrap Typography – MCQs
1. Which class in Bootstrap is used to style headings?
a) .heading
b) .h1 to .h6
c) .head
d) .title
Answer: b) .h1 to .h6
2. Which Bootstrap class will transform text to uppercase?
a) .text-up
b) .text-upper
c) .text-uppercase
d) .uppercase
Answer: c) .text-uppercase
3. What does the .lead class in Bootstrap do?
a) Makes text bold
b) Increases font size and adds emphasis
c) Adds a link
d) Makes text italic
Answer: b) Increases font size and adds emphasis
4. Which class is used to align text to the right?
a) .text-end
b) .text-right
c) .align-end
d) .text-align-right
Answer: a) .text-end
5. What is the Bootstrap class for muted text (light gray color)?
a) .text-light
b) .text-muted
c) .text-gray
d) .text-white-50
Answer: b) .text-muted
6. To truncate long text with an ellipsis, which class do you use?
a) .text-truncate
b) .truncate-text
c) .ellipsis
d) .text-hide
Answer: a) .text-truncate
7. Which class in Bootstrap is used to change font weight to bold?
a) .fw-bold
b) .text-bold
c) .font-bold
d) .bold-text
Answer: a) .fw-bold
8. What is the Bootstrap class for italic text?
a) .text-italic
b) .fst-italic
c) .font-style-italic
d) .italic
Answer: b) .fst-italic
9. What is the purpose of the .display-1 to .display-6 classes?
a) For alert boxes
b) For emphasized blockquotes
c) For extra-large headings
d) For code snippets
Answer: c) For extra-large headings
10. Which class in Bootstrap can reset text alignment to default (left)?
a) .text-left
b) .text-default
c) .text-start
d) .text-reset
Answer: c) .text-start
11. What does the .text-decoration-none class do?
a) Removes bold styling
b) Removes background
c) Removes underline from text
d) Hides the text
Answer: c) Removes underline from text
12. What is the Bootstrap class for centered text?
a) .text-center
b) .center-text
c) .align-center
d) .center
Answer: a) .text-center
13. Which Bootstrap class is used to make text appear lighter (less bold)?
a) .fw-light
b) .text-light
c) .font-thin
d) .text-fade
Answer: a) .fw-light
14. The .small class in Bootstrap does what?
a) Reduces text size and applies lighter color
b) Reduces the font size only
c) Applies a background
d) Makes the text bold
Answer: b) Reduces the font size only
15. Which class is used to justify text alignment in Bootstrap?
a) .text-center
b) .text-end
c) .text-justify
d) .text-wrap
Answer: c) .text-justify
Colors
Here are comprehensive MCQs on Colors in Bootstrap — covering text colors,
background colors, contextual classes, and utility classes.
Bootstrap Colors – MCQs
1. Which class is used to change text color to primary color in Bootstrap?
a) .color-primary
b) .text-primary
c) .bg-primary
d) .text-color-primary
Answer: b) .text-primary
2. What does the .bg-success class do in Bootstrap?
a) Adds a green background
b) Adds a green text
c) Adds a border
d) Adds a green outline
Answer: a) Adds a green background
3. Which class adds white text color?
a) .text-white
b) .color-white
c) .bg-white
d) .text-light
Answer: a) .text-white
4. Which class applies a red text color in Bootstrap?
a) .text-danger
b) .text-red
c) .bg-danger
d) .danger-text
Answer: a) .text-danger
5. What is the class for light gray text in Bootstrap?
a) .text-lightgray
b) .text-muted
c) .text-fade
d) .text-soft
Answer: b) .text-muted
6. Which class is used to set the background color to dark gray or black in
Bootstrap?
a) .bg-gray
b) .bg-dark
c) .bg-muted
d) .bg-black
Answer: b) .bg-dark
7. To make text yellow, which Bootstrap class is used?
a) .text-warning
b) .bg-warning
c) .text-yellow
d) .alert-warning
Answer: a) .text-warning
8. Which class provides a light blue background in Bootstrap?
a) .bg-blue-light
b) .bg-info
c) .text-info
d) .bg-primary-light
Answer: b) .bg-info
9. What does the class .bg-transparent do?
a) Hides the background
b) Removes all colors
c) Makes the background fully transparent
d) Makes the background black
Answer: c) Makes the background fully transparent
10. Which class should be used to apply a green color to text?
a) .text-green
b) .text-success
c) .success-text
d) .bg-success
Answer: b) .text-success
11. What is the result of combining .text-white with .bg-dark?
a) White background with white text
b) White text on dark background
c) White text with white background
d) Text becomes invisible
Answer: b) White text on dark background
12. Which class will change the background color to red?
a) .bg-danger
b) .bg-error
c) .text-danger
d) .bg-red
Answer: a) .bg-danger
13. Which class can be used to reset text color back to default?
a) .text-reset
b) .text-default
c) .text-clear
d) .text-primary
Answer: a) .text-reset
14. The class .text-bg-primary in Bootstrap 5 does what?
a) Applies both text and background in primary theme
b) Adds background only
c) Adds text only
d) Adds padding with background
Answer: a) Applies both text and background in primary theme
15. To make background white and text black, which classes can be used?
a) .bg-white .text-black
b) .bg-light .text-dark
c) .bg-white .text-dark
d) .bg-white .text-primary
Answer: c) .bg-white .text-dark
margin, padding, border, width, height
Actually, the correct class for setting padding on the left side in Bootstrap is .pl-3.
The class .ps-3 is used in Bootstrap 5 for "padding start" (the left side for left-to-right
languages and the right side for right-to-left languages).
So:
• .pl-3 is used to apply padding to the left side in all situations (standard left
padding).
• .ps-3 is more flexible and is used to apply padding based on the writing
direction of the content.
If you are working with Bootstrap 5 and want to support both LTR and RTL languages,
.ps-3 is a more suitable choice, but for simple left padding, .pl-3 would work fine.
Would you like more clarification or examples on these?
Buttons, tables , forms
Here are some MCQ examples based on Tables, Buttons, and Forms in Bootstrap:
Tables in Bootstrap:
1. Which class is used to add striped rows to a table in Bootstrap?
a) .table-striped
b) .table-bordered
c) .table-hover
d) .table-condensed
Answer: a) .table-striped
2. What class would you use to make a table responsive in Bootstrap?
a) .table-responsive
b) .table-fluid
c) .table-scroll
d) .table-fixed
Answer: a) .table-responsive
3. Which class is used to add borders to a table in Bootstrap?
a) .table-bordered
b) .table-striped
c) .table-hover
d) .table-condensed
Answer: a) .table-bordered
4. How can you add hover effects to table rows in Bootstrap?
a) .table-hover
b) .table-stripe
c) .table-focus
d) .table-row-hover
Answer: a) .table-hover
5. Which class is used to make a table with condensed padding?
a) .table-condensed
b) .table-sm
c) .table-small
d) .table-tiny
Answer: a) .table-condensed
Buttons in Bootstrap:
1. Which class is used to create a primary button in Bootstrap?
a) .btn-primary
b) .btn-success
c) .btn-info
d) .btn-warning
Answer: a) .btn-primary
2. What class is used to create a rounded button in Bootstrap?
a) .btn-rounded
b) .btn-pill
c) .btn-lg
d) .btn-circle
Answer: b) .btn-pill
3. Which class is used to make a button large in size in Bootstrap?
a) .btn-lg
b) .btn-large
c) .btn-big
d) .btn-xxl
Answer: a) .btn-lg
4. What class is used to create a button group in Bootstrap?
a) .btn-group
b) .btn-set
c) .btn-stack
d) .btn-cluster
Answer: a) .btn-group
5. Which class would you use to make a button look like a link in Bootstrap?
a) .btn-link
b) .btn-default
c) .btn-plain
d) .btn-text
Answer: a) .btn-link
Forms in Bootstrap:
1. Which class is used to create a basic form group in Bootstrap?
a) .form-group
b) .form-input
c) .form-field
d) .form-container
Answer: a) .form-group
2. Which class is used to create a form control (input field) in Bootstrap?
a) .form-control
b) .input-field
c) .text-box
d) .input-form
Answer: a) .form-control
3. Which class is used to center a form element vertically and horizontally in
Bootstrap?
a) .d-flex .justify-content-center .align-items-center
b) .form-center
c) .center-form
d) .form-align
Answer: a) .d-flex .justify-content-center .align-items-center
4. Which class is used to add horizontal spacing between form elements?
a) .ml-3
b) .mr-3
c) .mb-3
d) .mr-2
Answer: c) .mb-3
5. Which class in Bootstrap is used to create a floating label inside a form
input?
a) .form-floating
b) .input-floating
c) .form-label
d) .floating-input
Answer: a) .form-floating
images , lists , navigation bar(nav, navbar, navpills, nav brand like questions) ,
cards, toast, panels , carousels, breadcrumbs, float , spacing , provide like 50 to 60
questions on these topics
Here are 50-60 MCQs based on various Bootstrap topics like Images, Lists,
Navigation Bar, Cards, Toasts, Panels, Carousels, Breadcrumbs, Float, and Spacing:
Images in Bootstrap:
1. Which class is used to make an image responsive in Bootstrap?
a) .img-fluid
b) .img-responsive
c) .image-responsive
d) .image-fluid
Answer: a) .img-fluid
2. Which class is used to create a rounded image in Bootstrap?
a) .img-rounded
b) .img-circle
c) .img-border
d) .rounded-image
Answer: a) .img-rounded
3. What class is used to create a circular image in Bootstrap?
a) .img-circle
b) .rounded-circle
c) .circle-img
d) .img-rounded
Answer: b) .rounded-circle
4. Which class is used to add a border to an image in Bootstrap?
a) .img-bordered
b) .bordered-img
c) .img-thumbnail
d) .img-border
Answer: c) .img-thumbnail
5. How can you add a responsive image that scales with the size of the
container?
a) .img-fluid
b) .img-responsive
c) .img-scale
d) .responsive-img
Answer: a) .img-fluid
Lists in Bootstrap:
6. Which class is used to create a bulleted list in Bootstrap?
a) .list-style
b) .list-unstyled
c) .unstyled-list
d) .list-none
Answer: b) .list-unstyled
7. Which class is used to create a numbered list in Bootstrap?
a) .list-numbered
b) .list-ordered
c) .list-unstyled
d) .list-group
Answer: b) .list-ordered
8. Which class in Bootstrap is used to create a list group?
a) .list-group
b) .group-list
c) .list-container
d) .list-style
Answer: a) .list-group
9. Which class is used to add list items in a list group in Bootstrap?
a) .list-group-item
b) .list-item
c) .group-item
d) .list-element
Answer: a) .list-group-item
10. Which class is used to make a list group item active?
a) .active
b) .list-active
c) .list-group-active
d) .active-item
Answer: a) .active
Navigation Bar (Nav, Navbar, NavPills, NavBrand) in Bootstrap:
11. Which class is used to create a basic navigation bar in Bootstrap?
a) .navbar
b) .nav-bar
c) .nav
d) .navgroup
Answer: a) .navbar
12. Which class is used to add a navbar brand to the left of the navigation bar?
a) .navbar-brand
b) .navbar-left
c) .nav-brand
d) .brand-navbar
Answer: a) .navbar-brand
13. Which class is used to create the collapsible part of the navigation bar in
Bootstrap?
a) .navbar-collapse
b) .collapse-navbar
c) .nav-collapse
d) .collapse
Answer: a) .navbar-collapse
14. What class is used to change the color of a navigation bar?
a) .navbar-dark
b) .navbar-light
c) .navbar-color
d) .navbar-theme
Answer: a) .navbar-dark
15. Which class is used to create a nav-pills in Bootstrap?
a) .nav-pills
b) .nav-tabs
c) .nav-items
d) .nav-link
Answer: a) .nav-pills
16. Which class is used to create a link inside a navigation item?
a) .nav-link
b) .nav-item
c) .link-nav
d) .navbar-item
Answer: a) .nav-link
Cards in Bootstrap:
17. Which class is used to create a basic card in Bootstrap?
a) .card
b) .card-item
c) .card-body
d) .card-container
Answer: a) .card
18. Which class is used to create a card header in Bootstrap?
a) .card-header
b) .header-card
c) .card-top
d) .card-title
Answer: a) .card-header
19. Which class is used to create a card footer in Bootstrap?
a) .card-footer
b) .footer-card
c) .card-end
d) .footer-container
Answer: a) .card-footer
20. Which class is used to create a card body in Bootstrap?
a) .card-body
b) .body-card
c) .card-content
d) .content-card
Answer: a) .card-body
21. Which class is used to create an image inside a card?
a) .card-img
b) .card-image
c) .card-img-top
d) .image-card
Answer: c) .card-img-top
Toasts in Bootstrap:
22. Which class is used to create a toast in Bootstrap?
a) .toast
b) .toast-notification
c) .toast-alert
d) .toast-message
Answer: a) .toast
23. Which class is used to hide a toast initially in Bootstrap?
a) .d-none
b) .hide-toast
c) .hidden
d) .toast-hide
Answer: a) .d-none
24. Which class is used to make the toast show at the top-right of the screen in
Bootstrap?
a) .toast-top-right
b) .toast-right
c) .toast-position-top-right
d) .toast-align-right
Answer: a) .toast-top-right
Panels in Bootstrap:
25. Which class is used to create a panel in Bootstrap?
a) .panel
b) .panel-default
c) .panel-group
d) .panel-content
Answer: a) .panel
26. Which class is used to add a heading to a panel in Bootstrap?
a) .panel-heading
b) .panel-title
c) .panel-header
d) .panel-title-text
Answer: a) .panel-heading
Carousels in Bootstrap:
27. Which class is used to create a basic carousel in Bootstrap?
a) .carousel
b) .carousel-container
c) .carousel-slider
d) .slider-carousel
Answer: a) .carousel
28. Which class is used to define each individual carousel item?
a) .carousel-item
b) .carousel-slide
c) .item
d) .carousel-slide-item
Answer: a) .carousel-item
29. Which class is used to add indicators to a carousel in Bootstrap?
a) .carousel-indicators
b) .carousel-dots
c) .carousel-nav
d) .carousel-pagination
Answer: a) .carousel-indicators
Breadcrumbs in Bootstrap:
30. Which class is used to create a breadcrumb in Bootstrap?
a) .breadcrumb
b) .breadcrumb-item
c) .breadcrumb-nav
d) .breadcrumb-container
Answer: a) .breadcrumb
31. Which class is used to define each individual item in a breadcrumb in
Bootstrap?
a) .breadcrumb-item
b) .breadcrumb-link
c) .breadcrumb-element
d) .item-breadcrumb
Answer: a) .breadcrumb-item
Float in Bootstrap:
Here’s the continuation of the questions covering Float, Spacing, and more:
Float in Bootstrap (Continued):
33. Which class is used to float an element to the right in Bootstrap?
a) .float-right
b) .float-end
c) .float-left
d) .float-start
Answer: a) .float-right
34. Which class is used to clear a floated element in Bootstrap?
a) .clearfix
b) .clear-float
c) .clear
d) .clearfix-float
Answer: a) .clearfix
35. Which class is used to float an element to the start (left in LTR layout) in
Bootstrap 5?
a) .float-start
b) .float-left
c) .float-start-left
d) .start-float
Answer: a) .float-start
36. Which class is used to float an element to the end (right in LTR layout) in
Bootstrap 5?
a) .float-end
b) .float-right
c) .float-end-right
d) .end-float
Answer: a) .float-end
Spacing in Bootstrap:
37. Which class is used to add margin to all sides of an element in Bootstrap?
a) .m-3
b) .margin-3
c) .spacing-3
d) .margin-all-3
Answer: a) .m-3
38. Which class is used to add padding to all sides of an element in Bootstrap?
a) .p-3
b) .padding-3
c) .spacing-3
d) .pad-all-3
Answer: a) .p-3
39. Which class is used to add margin to the top of an element in Bootstrap?
a) .mt-3
b) .margin-top-3
c) .top-margin-3
d) .m-top-3
Answer: a) .mt-3
40. Which class is used to add padding to the bottom of an element in
Bootstrap?
a) .pb-3
b) .padding-bottom-3
c) .bottom-padding-3
d) .p-bottom-3
Answer: a) .pb-3
41. Which class is used to remove all margins in Bootstrap?
a) .m-0
b) .no-margin
c) .margin-none
d) .margin-0
Answer: a) .m-0
42. Which class is used to remove all padding in Bootstrap?
a) .p-0
b) .no-padding
c) .padding-none
d) .pad-0
Answer: a) .p-0
43. Which class is used to add margin to the right side of an element in
Bootstrap?
a) .mr-3
b) .margin-right-3
c) .m-right-3
d) .right-margin-3
Answer: a) .mr-3
44. Which class is used to add padding to the left side of an element in
Bootstrap?
a) .pl-3
b) .padding-left-3
c) .p-left-3
d) .left-padding-3
Answer: a) .pl-3
45. Which class is used to add both padding and margin in Bootstrap?
a) .p-3 and .m-3
b) .padding-margin-3
c) .padding-margin
d) .space-3
Answer: a) .p-3 and .m-3
46. Which class is used to set specific margin on the top-right side of an
element in Bootstrap?
a) .mt-3 and .mr-3
b) .m-tr-3
c) .m-top-right-3
d) .margin-tr-3
Answer: a) .mt-3 and .mr-3
Navigation Bar (Navbar) - Additional MCQs:
47. Which class is used to make the navbar sticky at the top of the page?
a) .navbar-sticky-top
b) .navbar-fixed-top
c) .navbar-fixed
d) .sticky-top
Answer: a) .navbar-sticky-top
48. What is the default breakpoint at which a navbar collapses into a hamburger
menu in Bootstrap?
a) 992px
b) 768px
c) 1200px
d) 576px
Answer: b) 768px
49. Which class is used to align the navbar items to the center in Bootstrap?
a) .navbar-center
b) .justify-content-center
c) .navbar-align-center
d) .nav-center
Answer: b) .justify-content-center
50. Which class is used to align the navbar items to the right in Bootstrap?
a) .navbar-right
b) .ml-auto
c) .justify-content-end
d) .nav-right
Answer: c) .justify-content-end
Breadcrumbs in Bootstrap - Additional MCQs:
51. Which class is used to separate each breadcrumb item with a slash (/) in
Bootstrap?
a) .breadcrumb-separator
b) .breadcrumb-item-divider
c) .breadcrumb-item
d) .breadcrumb-item-active
Answer: c) .breadcrumb-item
52. Which class is used to make the breadcrumb item active in Bootstrap?
a) .active
b) .breadcrumb-active
c) .breadcrumb-item-active
d) .breadcrumb-current
Answer: a) .active
Cards in Bootstrap - Additional MCQs:
53. Which class is used to add a shadow to a card in Bootstrap?
a) .card-shadow
b) .shadow
c) .card-shadow-sm
d) .card-shadow-lg
Answer: b) .shadow
54. Which class is used to add a border to a card in Bootstrap?
a) .card-border
b) .border-card
c) .card-bordered
d) .border
Answer: d) .border
Panels in Bootstrap - Additional MCQs:
55. Which class is used to create a panel with a primary color in Bootstrap?
a) .panel-primary
b) .panel-success
c) .panel-default
d) .panel-info
Answer: a) .panel-primary
56. Which class is used to create a panel with a success color in Bootstrap?
a) .panel-success
b) .panel-primary
c) .panel-default
d) .panel-info
Answer: a) .panel-success
Toasts in Bootstrap - Additional MCQs:
57. Which class is used to position a toast at the bottom-left of the screen in
Bootstrap?
a) .toast-bottom-left
b) .toast-bottom
c) .toast-left
d) .toast-position-bottom-left
Answer: a) .toast-bottom-left
58. Which class is used to close the toast in Bootstrap?
a) .toast-close
b) .close-toast
c) .toast-dismiss
d) .close
Answer: d) .close
Carousels in Bootstrap - Additional MCQs:
59. Which class is used to specify the next item in a carousel in Bootstrap?
a) .carousel-next
b) .carousel-item-next
c) .next-item
d) .carousel-next-item
Answer: b) .carousel-item-next
60. Which class is used to specify the previous item in a carousel in Bootstrap?
a) .carousel-prev
b) .carousel-item-prev
c) .prev-item
d) .carousel-prev-item
Answer: b) .carousel-item-prev