0% found this document useful (0 votes)
78 views29 pages

Bootstrap MCQ

The document contains multiple-choice questions (MCQs) related to Bootstrap, covering its features, components, and usage, including specifics about container classes, grid systems, typography, and colors. Each question is followed by the correct answer, providing a comprehensive overview of Bootstrap's functionalities. It also highlights differences between Bootstrap versions and various utility classes for styling and layout.

Uploaded by

Sushmitha R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
78 views29 pages

Bootstrap MCQ

The document contains multiple-choice questions (MCQs) related to Bootstrap, covering its features, components, and usage, including specifics about container classes, grid systems, typography, and colors. Each question is followed by the correct answer, providing a comprehensive overview of Bootstrap's functionalities. It also highlights differences between Bootstrap versions and various utility classes for styling and layout.

Uploaded by

Sushmitha R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like