Bootstrap MCQ

 FROM GOOGLE GEMINI:

Bootstrap (CSS Framework) Multiple Choice Questions and Answers

Q1. What is Bootstrap primarily used for?

  • A) Back-end database management

  • B) Responsive, mobile-first front-end web development

  • C) Server-side scripting

  • D) Native mobile application compilation

Answer: B) Responsive, mobile-first front-end web development

Q2. Which company originally developed Bootstrap?

  • A) Google

  • B) Microsoft

  • C) Twitter

  • D) Meta

Answer: C) Twitter

Q3. How many columns make up the standard Bootstrap grid system?

  • A) 8

  • B) 10

  • C) 12

  • D) 16

Answer: C) 12

Q4. Which CSS preprocessor is used to build Bootstrap source code?

  • A) Less

  • B) Sass

  • C) Stylus

  • D) PostCSS

Answer: B) Sass

Q5. Which class is used to wrap page content with a responsive fixed-width container in Bootstrap?

  • A) .container-fixed

  • B) .container

  • C) .wrapper

  • D) .layout-box

Answer: B) .container

Q6. Which class allows a Bootstrap container to span the entire width of the viewport?

  • A) .container-full

  • B) .container-wide

  • C) .container-fluid

  • D) .container-screen

Answer: C) .container-fluid

Q7. In Bootstrap 5, which prefix is used for left/right directional utility classes (like margins and paddings) to support RTL layouts?

  • A) l and r (for left and right)

  • B) s and e (for start and end)

  • C) b and f (for beginning and finish)

  • D) fl and fr (for float-left and float-right)

Answer: B) s and e (for start and end)

Q8. Which class is used to make an image responsive so that it scales nicely to the parent element?

  • A) .img-responsive

  • B) .img-fluid

  • C) .image-scale

  • D) .img-scaled

Answer: B) .img-fluid

Q9. Which class combination creates a primary styled button in Bootstrap?

  • A) btn btn-primary

  • B) button primary

  • C) class-btn primary

  • D) bg-primary button

Answer: A) btn btn-primary

Q10. What is the standard breakpoint abbreviation for extra-large screens (min-width: 1200px) in Bootstrap 5?

  • A) sm

  • B) md

  • C) lg

  • D) xl

Answer: D) xl


SOME MORE:


Here is a comprehensive list of 100 multiple-choice questions (MCQs) on Bootstrap, organized by topic. Each question includes the correct answer and a brief explanation to help you master the framework.

📋 Section 1: Introduction, Setup & Basics (Questions 1–15)

1. What is Bootstrap?

  • A) A server-side JavaScript framework

  • B) A popular open-source front-end framework for responsive web development

  • C) A database management tool

  • D) An alternative to HTML

Answer: B

Explanation: Bootstrap is a powerful HTML, CSS, and JS framework used for developing responsive, mobile-first websites.

2. Who originally developed Bootstrap?

  • A) Google

  • B) Facebook

  • C) Twitter

  • D) Microsoft

Answer: C

Explanation: Bootstrap was created by Mark Otto and Jacob Thornton at Twitter, originally named Twitter Blueprint.

3. What design philosophy does Bootstrap heavily rely on?

  • A) Desktop-first

  • B) Mobile-first

  • C) Backend-first

  • D) Print-first

Answer: B

Explanation: Bootstrap is designed to be mobile-first, meaning styles are optimized for mobile devices first, then scaled up using CSS media queries.

4. Which of the following is required for Bootstrap to function properly?

  • A) An HTML5 doctype declaration

  • B) A Python backend

  • C) A C++ compiler

  • D) MySQL

Answer: A

Explanation: Bootstrap requires the use of the HTML5 doctype (<!DOCTYPE html>) to ensure proper rendering and component sizing.

5. What is the purpose of the <meta name="viewport" ...> tag when using Bootstrap?

  • A) To inject Google Analytics

  • B) To ensure proper rendering and touch zooming on mobile devices

  • C) To link external CSS files

  • D) To encrypt the page data

Answer: B

Explanation: The viewport meta tag controls layout width on mobile browsers and ensures the mobile-first nature of Bootstrap functions correctly.

6. Which class provides a full-width container that spans the entire width of the viewport?

  • A) .container

  • B) .container-fixed

  • C) .container-fluid

  • D) .container-full

Answer: C

Explanation: .container-fluid creates a 100% wide container at all breakpoints, whereas .container has fixed max-widths depending on the screen size.

7. How many default grid tiers (breakpoints) are available in Bootstrap 5?

  • A) 3

  • B) 4

  • C) 5

  • D) 6

Answer: D

Explanation: Bootstrap 5 features six grid tiers: Extra small (xs), Small (sm), Medium (md), Large (lg), Extra large (xl), and Extra extra large (xxl).

8. Which version of Bootstrap officially dropped its dependency on jQuery?

  • A) Bootstrap 3

  • B) Bootstrap 4

  • C) Bootstrap 5

  • D) Bootstrap 6

Answer: C

Explanation: Bootstrap 5 completely removed the jQuery dependency, opting for pure vanilla JavaScript instead.

9. Which tool can be used to compile Bootstrap's source code if you want to customize it?

  • A) Sass

  • B) Java

  • C) PHP

  • D) SQL

Answer: A

Explanation: Bootstrap is written in Sass (Syntactically Awesome Style Sheets), allowing developers to utilize variables, mixins, and functions for custom builds.

10. What is the default font stack used by Bootstrap?

  • A) Times New Roman

  • B) A native system font stack (e.g., Segoe UI, Roboto, Helvetica Neue)

  • C) Courier New

  • D) Comic Sans

Answer: B

Explanation: Bootstrap utilizes a native system font stack for optimal text rendering on every device and OS without downloading web fonts.

11. Which HTML tag is generally used to wrap Bootstrap navigation links inside a header?

  • A) <nav>

  • B) <section>

  • C) <div>

  • D) <aside>

Answer: A

Explanation: Semantic HTML recommends the <nav> tag for major navigation block containers.

12. Where should the Bootstrap JavaScript bundle (bootstrap.bundle.min.js) be ideally placed?

  • A) Inside the <head> section

  • B) At the very end of the <body> section

  • C) In a separate .css file

  • D) Inside an <img> tag

Answer: B

Explanation: Placing JavaScript execution scripts right before the closing </body> tag prevents them from blocking HTML parsing.

13. What is included in the Bootstrap JavaScript "Bundle" file that isn't in the standard JS file?

  • A) jQuery

  • B) Popper.js

  • C) React

  • D) FontAwesome

Answer: B

Explanation: The Bootstrap Bundle includes Popper.js, which is strictly required for tooltips, popovers, and dropdown positioning mechanics.

14. In Bootstrap, components like borders, display states, and spacing are handled by:

  • A) Heavy JavaScript scripts

  • B) Utility classes

  • C) Grid column spans

  • D) Media queries alone

Answer: B

Explanation: Utility classes provide single-purpose styling shortcuts (e.g., .d-none, .border, .p-3) to minimize custom CSS writing.

15. What does the class .container do?

  • A) Centers content horizontally with a responsive fixed width

  • B) Automatically hides content on mobile devices

  • C) Changes the color of the text to blue

  • D) Forces the page to refresh

Answer: A

Explanation: .container sets a max-width at each responsive breakpoint and centers the layout block horizontally.

📐 Section 2: The Grid System (Questions 16–35)

16. The Bootstrap grid system is based on how many columns?

  • A) 6

  • B) 10

  • C) 12

  • D) 16

Answer: C

Explanation: The default grid layout features 12 columns, allowing flexible distribution patterns (e.g., halves, thirds, quarters).

17. Which underlying CSS technology powers the Bootstrap grid system?

  • A) CSS Grid exclusively

  • B) Floats and Clears

  • C) Flexbox

  • D) Inline-blocks

Answer: C

Explanation: Bootstrap's primary grid system is built entirely on CSS Flexbox configurations.

18. What is the correct structural hierarchy for Bootstrap grid layouts?

  • A) Row -> Container -> Column

  • B) Container -> Row -> Column

  • C) Column -> Row -> Container

  • D) Row -> Column -> Container

Answer: B

Explanation: Columns (.col-*) must be direct children of rows (.row), which in turn must be housed within a container (.container or .container-fluid).

19. Which class is used to create a grid row wrapper?

  • A) .grid-row

  • B) .row

  • C) .line

  • D) .layout-row

Answer: B

Explanation: .row acts as a flexbox container wrapper that properly lines up columns and manages negative margins.

20. If a row contains columns that total more than 12 in value, what happens?

  • A) The layout breaks and overlaps

  • B) The extra columns wrap onto a new line

  • C) The browser throws an error

  • D) Columns scale down automatically to fit the row width

Answer: B

Explanation: Because rows are configured as flex containers with wrapping enabled, column spans exceeding 12 wrap to the next row block.

21. Which class should you use for a column that should span 4 grid columns on medium devices and larger?

  • A) .col-m-4

  • B) .col-md-4

  • C) .col-4-md

  • D) .medium-col-4

Answer: B

Explanation: The syntax structure follows .col-[breakpoint]-[size]. Hence, .col-md-4 handles medium screen rules.

22. What happens when you apply just .col to multiple column elements inside a .row?

  • A) They stack vertically

  • B) They split the available row space equally

  • C) They default to 100% viewport width

  • D) They throw validation warnings

Answer: B

Explanation: Applying .col utilizes flex-grow properties to divide row space equally among all sibling columns.

23. Which class prefix targets extra-large screens (1200px and up)?

  • A) .col-lg-

  • B) .col-xl-

  • C) .col-xxl-

  • D) .col-max-

Answer: B

Explanation: The .col-xl- prefix specifically applies styles at breakpoints equal to or greater than 1200px.

24. How do you remove the gutters (padding/margins) from a row and its columns?

  • A) .no-gutters

  • B) .g-0

  • C) .gutter-none

  • D) .row-flat

Answer: B

Explanation: In Bootstrap 5, gutter utility variables are controlled using the g-* utility prefix. .g-0 sets gutters to 0.

25. Which class sets a gutter size explicitly along the horizontal x-axis?

  • A) .gx-*

  • B) .gy-*

  • C) .g-width-*

  • D) .gh-*

Answer: A

Explanation: .gx-* modifies horizontal column paddings, whereas .gy-* modifies vertical row margins.

26. How can you shift or push a column to the right using margins?

  • A) .push-*

  • B) .offset-*

  • C) .pull-*

  • D) .move-*

Answer: B

Explanation: Offset utility classes (e.g., .offset-md-4) increase the left margin of a column to shift it horizontally.

27. Which class forces columns to stack vertically on extra-small screens but become a 6-column grid layout on small screens (576px and up)?

  • A) .col-6

  • B) .col-sm-6

  • C) .col-xs-6

  • D) .col-md-6

Answer: B

Explanation: Because Bootstrap is mobile-first, it stacks columns vertically by default unless a breakpoint rule like .col-sm-6 overrides it.

28. Can grid columns be nested within other grid columns?

  • A) No, nesting breaks layouts

  • B) Yes, by adding a new .row inside an existing .col-*

  • C) Yes, by nesting containers directly

  • D) Only up to 2 levels deep

Answer: B

Explanation: To nest columns safely, insert a new .row wrapper inside the current column container, which yields a fresh set of 12 internal slots.

29. Which class dynamically changes the visual rendering order of a column?

  • A) .sort-*

  • B) .order-*

  • C) .z-index-*

  • D) .arrange-*

Answer: B

Explanation: The .order-* utilities leverage flexbox ordering rules to rearrange grid layout placements independently from the DOM structure.

30. What is the value of the breakpoint for large devices (lg) in Bootstrap 5?

  • A) 768px

  • B) 992px

  • C) 1200px

  • D) 1400px

Answer: B

Explanation: Large devices (lg) apply rules to screen configurations starting at 992px and extending up to the next breakpoint.

31. What is the screen size threshold for the Extra Extra Large (xxl) breakpoint introduced in Bootstrap 5?

  • A) 1200px

  • B) 1400px

  • C) 1600px

  • D) 2000px

Answer: B

Explanation: The xxl tier triggers styles on wide desktop environments measuring 1400px or higher.

32. Which class creates a variable-width column that sizes itself based on its natural content width?

  • A) .col-content

  • B) .col-auto

  • C) .col-fit

  • D) .col-size-zero

Answer: B

Explanation: .col-auto structures a column box that shrinks or expands to perfectly match its internal content dimensions.

33. To align grid columns vertically along the bottom of a row container, which class should be added to the .row?

  • A) .align-items-start

  • B) .align-items-end

  • C) .align-content-bottom

  • D) .justify-content-end

Answer: B

Explanation: .align-items-end applies the flexbox alignment rule to anchor child elements to the bottom edge of the row container.

34. To space columns out evenly along the horizontal axis with equal gaps between them, which class is added to the row?

  • A) .justify-content-center

  • B) .justify-content-between

  • C) .justify-content-around

  • D) .align-items-center

Answer: C

Explanation: .justify-content-around distributes columns along the main row horizontal axis with equal structural clearance rooms around each element block.

35. What class sets a column width to exactly 50% across all devices?

  • A) .col-half

  • B) .col-md-6

  • C) .col-6

  • D) .col-xs-6

Answer: C

Explanation: Because 6 is half of the 12-column grid, .col-6 applies a 50% width rule starting at the smallest breakpoint.

🔤 Section 3: Typography, Tables, & Images (Questions 36–50)

36. Which class gives standard body paragraphs standout emphasis (larger font size and lighter weight)?

  • A) .important

  • B) .lead

  • C) .highlight

  • D) .text-large

Answer: B

Explanation: The .lead typography utility makes text stand out by slightly increasing its size and weight.

37. How do you format text to look like a heading element when semantic header tags cannot be used (e.g., an inline span)?

  • A) Add classes .h1 through .h6

  • B) Add classes .head-1 through .head-6

  • C) Add class .heading

  • D) This cannot be done without custom CSS style rules

Answer: A

Explanation: Bootstrap provides classes like .h1 through .h6 to style generic inline text elements like native structural heading tags.

38. Which utility class converts text to uppercase characters?

  • A) .upper

  • B) .text-upper

  • C) .text-uppercase

  • D) .capitalize

Answer: C

Explanation: .text-uppercase transforms text characters to uppercase using CSS text-transform utilities.

39. How do you align text to the right side of its container in Bootstrap?

  • A) .text-right

  • B) .text-end

  • C) .align-right

  • D) .float-right

Answer: B

Explanation: Bootstrap 5 updated directional alignment terms to match modern standard CSS logical properties: .text-start (left) and .text-end (right).

40. Which class creates a responsive, bordered table with alternating row background colors?

  • A) .table .table-striped

  • B) .table .table-alternate

  • C) .table-zebra

  • D) .table-rows

Answer: A

Explanation: .table-striped applies light gray zebra-striping to alternating table rows inside an active base .table class declaration.

41. How do you make a table responsive so it scrolls horizontally on smaller viewports?

  • A) Add .table-responsive directly to the <table> element

  • B) Wrap the <table> element inside a <div> containing the .table-responsive class

  • C) Add .table-scroll to the container body

  • D) Tables are automatically responsive by default in Bootstrap

Answer: B

Explanation: Tables require a parent element wrapper with .table-responsive to establish horizontal scroll behaviors on smaller screens.

42. Which class makes an image responsive, scaling it to fit its container width smoothly?

  • A) .img-responsive

  • B) .img-fluid

  • C) .responsive-image

  • D) .img-fit

Answer: B

Explanation: In Bootstrap 5, .img-fluid applies max-width: 100%; and height: auto; to make an image scale responsively.

43. How do you give an image a subtle rounded frame border style?

  • A) .img-frame

  • B) .img-thumbnail

  • C) .image-border

  • D) .img-rounded

Answer: B

Explanation: .img-thumbnail adds a light 1px border outline with padding and slightly rounded corners to an image.

44. Which class centers an inline block image element horizontally?

  • A) .img-center

  • B) .mx-auto .d-block

  • C) .align-center

  • D) .text-center applied directly to the image

Answer: B

Explanation: Images are inline elements by default. To center them, change their display to block with .d-block and apply auto margins with .mx-auto.

45. Which class formats code blocks or inline code elements safely?

  • A) Just use standard HTML <code> tags which Bootstrap automatically styles

  • B) .code-box

  • C) .bootstrap-code

  • D) .text-monospace

Answer: A

Explanation: Bootstrap applies global reboot style rules that automatically enhance native code tags like <code> and <pre> without additional helper classes.

46. Which text alignment class targets only medium devices and larger?

  • A) .text-md-center

  • B) .center-md-text

  • C) .text-center-md

  • D) .medium-text-center

Answer: A

Explanation: Responsive text alignment utilities follow the standard format .text-[breakpoint]-[alignment].

47. Which class strips out default bullet points and left paddings from list elements (<ul> or <ol>)?

  • A) .list-clean

  • B) .list-unstyled

  • C) .no-bullets

  • D) .list-inline

Answer: B

Explanation: .list-unstyled removes list styling markers and resets default list margins/paddings.

48. To line up list items horizontally on a single row, which class pair is applied?

  • A) .list-inline on the list parent and .list-inline-item on child items

  • B) .list-horizontal on the items

  • C) .row-list on the container

  • D) .list-flex across elements

Answer: A

Explanation: .list-inline combined with .list-inline-item displays block items inline to build clean text lists.

49. Which class highlights a text snippet by rendering it with a yellow background?

  • A) .text-highlight

  • B) .bg-warning or wrapping in native <mark> tags

  • C) .alert-text

  • D) .paint-yellow

Answer: B

Explanation: Bootstrap automatically customizes the default styles for the HTML5 <mark> tag, which applies a light yellow background color.

50. Which color utility class indicates danger or an error text message?

  • A) .text-danger

  • B) .text-error

  • C) .text-warning

  • D) .text-critical

Answer: A

Explanation: .text-danger colors the text red to indicate errors or dangerous actions, following standard Bootstrap color nomenclature.

🧱 Section 4: Components - Buttons, Forms & Navbars (Questions 51–75)

51. What is the base class required for any button styling in Bootstrap?

  • A) .button

  • B) .btn

  • C) .bootstrap-btn

  • D) .btn-base

Answer: B

Explanation: Every button requires the core .btn class to establish padding, borders, and transitions before applying color variations.

52. Which class generates a primary blue action button?

  • A) .btn-blue

  • B) .btn-primary

  • C) .btn-action

  • D) .btn-main

Answer: B

Explanation: .btn-primary applies the theme's primary accent color (default blue) to structural button elements.

53. How do you create an outline button style that has a transparent background and fills in only on hover?

  • A) .btn-outline-primary

  • B) .btn-transparent

  • C) .btn-hollow

  • D) .btn-border-primary

Answer: A

Explanation: The .btn-outline-* class format strips out solid background fills in favor of thin color borders until interaction occurs.

54. Which class combination creates a large, full-width block-level button in Bootstrap 5?

  • A) .btn-block

  • B) Wrapping the button in a layout div with .d-grid and using standard button classes

  • C) .btn-large-block

  • D) .btn-fw

Answer: B

Explanation: Bootstrap 5 dropped .btn-block. Full-width buttons are now created by wrapping them in layout elements using utilities like .d-grid.

55. Which form class is applied to input elements like text inputs and textareas for full width and styling?

  • A) .form-input

  • B) .form-control

  • C) .input-field

  • D) .form-style

Answer: B

Explanation: The .form-control class styles form text elements, handling focus states, border curves, and sizing.

56. What class is applied to checkbox and radio inputs in Bootstrap 5?

  • A) .form-check-input

  • B) .form-control

  • C) .input-check

  • D) .form-radio

Answer: A

Explanation: Checkboxes and radio buttons require .form-check-input to align correctly with Bootstrap's custom form layouts.

57. Which component provides contextual feedback messages for typical user actions (e.g., success warnings)?

  • A) Badge

  • B) Alert

  • C) Toast

  • D) Card

Answer: B

Explanation: Alerts (.alert) provide flexible wrapper blocks for displaying validation notices or callout messages.

58. How do you make an alert dismissible by adding a close button?

  • A) Add the .alert-dismissible class and a close button with data-bs-dismiss="alert"

  • B) Add .alert-close to the text

  • C) Use JavaScript exclusively to remove the element from the DOM

  • D) Add dismiss="true" as an HTML attribute

Answer: A

Explanation: The .alert-dismissible class adds padding near the edge of the alert, while the data-bs-dismiss="alert" attribute hooks into the JavaScript to handle the closing functionality.

59. Which class is the structural container container used to construct cards?

  • A) .card

  • B) .panel

  • C) .box

  • D) .card-wrapper

Answer: A

Explanation: The .card component replaced older panels, wells, and thumbnails to provide an all-in-one content container.

60. Inside a card component, where should the primary descriptive textual contents be housed?

  • A) .card-head

  • B) .card-body

  • C) .card-content

  • D) .card-inner

Answer: B

Explanation: .card-body provides a padded canvas section inside a card to house text, titles, and links.

61. What component represents a flexible navigation header bar?

  • A) .navigation

  • B) .navbar

  • C) .nav-menu

  • D) .menu-bar

Answer: B

Explanation: The .navbar component functions as a responsive navigation wrapper, handling brand links, collapse triggers, and layout alignments.

62. Which class determines the responsive breakpoint at which a navbar uncollapses into a full horizontal menu?

  • A) .navbar-expand-lg

  • B) .navbar-toggle-lg

  • C) .navbar-responsive

  • D) .navbar-desktop

Answer: A

Explanation: .navbar-expand-[breakpoint] dictates exactly when a navigation structure shifts from a mobile hamburger layout to a wide horizontal layout.

63. How do you create a navigation bar with a dark theme background color?

  • A) .navbar-dark .bg-dark

  • B) .navbar-black

  • C) .navbar .bg-dark

  • D) .navbar-theme-dark

Answer: A

Explanation: Combining .navbar-dark (which optimizes link colors for dark backgrounds) with a background utility like .bg-dark creates a clean dark navbar layout.

64. Which class is used to style the logo or brand text inside a navbar?

  • A) .navbar-logo

  • B) .navbar-brand

  • C) .navbar-title

  • D) .brand-link

Answer: B

Explanation: .navbar-brand applies appropriate padding, font size, and layout properties for brand names or logos inside navbars.

65. What component is used to show a hierarchical trail of links indicating the user's current location within a site?

  • A) Pagination

  • B) Breadcrumb

  • C) Nav-tree

  • D) Progress indicator

Answer: B

Explanation: The .breadcrumb component styles lists to show location trails, automatically inserting dividers via CSS.

66. Which class group implements paginated page step indexes at the bottom of listings?

  • A) .pagination on the parent and .page-item with .page-link on child elements

  • B) .pager and .page-number

  • C) .list-pages

  • D) .page-control

Answer: A

Explanation: Structuring an unordered list with .pagination, .page-item, and .page-link builds a standard, clickable pagination component.

67. Which component displays small count indicators or labels inside buttons or headers?

  • A) Alert

  • B) Badge

  • C) Toast

  • D) Tooltip

Answer: B

Explanation: The .badge component styles inline text elements to create small labels or count indicators.

68. What component is used to display loading states or computational processing loops?

  • A) Progress

  • B) Spinner

  • C) Toast

  • D) Placeholder

Answer: B

Explanation: .spinner-border or .spinner-grow builds CSS-animated loading states without requiring external assets.

69. Which button size modifier makes buttons compact and small?

  • A) .btn-s

  • B) .btn-sm

  • C) .btn-mini

  • D) .btn-small

Answer: B

Explanation: Button size modifiers include .btn-sm (small) and .btn-lg (large).

70. How do you align an individual item inside a navbar to the right side?

  • A) Apply the .ms-auto (margin-start: auto) utility to it or its parent group

  • B) Apply .float-right

  • C) Apply .navbar-right

  • D) Apply .align-right

Answer: A

Explanation: Because navbars use flexbox layouts, applying .ms-auto pushes the element and all subsequent items to the right side of the container.

71. Which component shows a sliding photo carousel cycle?

  • A) .slider

  • B) .carousel

  • C) .gallery

  • D) .slideshow

Answer: B

Explanation: The .carousel component provides a slideable slideshow framework for cycling through images or custom content blocks.

72. Which component features multi-layered collapse accordions that expand individually?

  • A) .accordion

  • B) .collapse-group

  • C) .list-group

  • D) .tab-content

Answer: A

Explanation: The .accordion component relies on the collapse plugin to build vertically stacking, expandable content panels.

73. Which Bootstrap 5 utility class provides subtle border-radius rounding updates to elements?

  • A) .rounded

  • B) .border-round

  • C) .circle-box

  • D) .radius-4

Answer: A

Explanation: .rounded applies standard border-radius curves. Variations include .rounded-circle, .rounded-pill, or directional updates like .rounded-top.

74. Which component handles small temporary toast notification bubbles that slide up out of view edges?

  • A) Alert

  • B) Popover

  • C) Toast

  • D) Banner

Answer: C

Explanation: .toast provides lightweight, push-style notifications designed to mimic mobile operating system notification panels.

75. What class creates a styled vertical or horizontal list of item groups?

  • A) .list-group

  • B) .item-list

  • C) .group-list

  • D) .nav-list

Answer: A

Explanation: .list-group is a flexible component for displaying a series of content items, which can be extended with custom HTML or interactive links.

⚡ Section 5: Advanced JavaScript Components & Interactivity (Questions 76–90)

76. Which data attribute binds a click trigger to open a Bootstrap modal dialog window?

  • A) data-bs-toggle="modal"

  • B) data-bs-target="modal"

  • C) data-toggle="popup"

  • D) href="#modal"

Answer: A

Explanation: In Bootstrap 5, data-bs-toggle="modal" identifies the button as a modal controller, while data-bs-target points to the specific modal's ID.

77. What attribute specifies the target element ID that a transition component affects?

  • A) data-bs-toggle

  • B) data-bs-target

  • C) data-bs-id

  • D) data-bs-href

Answer: B

Explanation: data-bs-target uses a CSS selector string (like #myModalID) to target the target container to animate or toggle.

78. Which component displays a dim background layer behind an open modal?

  • A) Backdrop

  • B) Overlay

  • C) Curtain

  • D) Shadow

Answer: A

Explanation: The modal backdrop automatically darkens the page content when a modal is active to focus user attention on the dialog.

79. How do you center a modal vertically on the screen?

  • A) Add .modal-center to the core wrapper

  • B) Add .modal-dialog-centered to the .modal-dialog element

  • C) Apply margin auto tools

  • D) Modals are centered vertically by default

Answer: B

Explanation: Adding .modal-dialog-centered to the inner .modal-dialog container aligns the modal vertically on the screen.

80. Are tooltips enabled by default when you load Bootstrap's JavaScript bundle?

  • A) Yes, they initialize automatically

  • B) No, they must be manually initialized via JavaScript due to performance reasons

  • C) Only when using specific theme setups

  • D) Only on desktop computers

Answer: B

Explanation: Tooltips and Popovers are opt-in plugins, meaning you must write a short snippet of custom JavaScript to initialize them on the page.

81. Which component provides a small pop-up box containing text when an element is clicked, but contains more content than a tooltip?

  • A) Alert

  • B) Toast

  • C) Popover

  • D) Dropdown

Answer: C

Explanation: Popovers resemble tooltips but include an optional header section and can store larger bodies of HTML or descriptive text.

82. Which JS plugin tracks page scroll positions to automatically highlight the corresponding links in a navigation menu?

  • A) Scrollspy

  • B) Scrolltracker

  • C) Navspy

  • D) AutoScroll

Answer: A

Explanation: Scrollspy automatically updates navigation active states based on the user's current scroll position relative to content sections.

83. Which class hides content accessibly from screen readers but displays it visually on screens?

  • A) .invisible

  • B) There is no class for this, only the reverse via .visually-hidden

  • C) .sr-only

  • D) .d-none

Answer: B

Explanation: .visually-hidden hides an element visually while keeping it readable by screen readers. There is no utility class that does the reverse.

84. Which attribute allows a modal to be closed when the "Escape" key is pressed?

  • A) data-bs-keyboard="true"

  • B) data-bs-escape="close"

  • C) keyboard="active"

  • D) It is handled automatically unless data-bs-keyboard="false" is applied

Answer: D

Explanation: Bootstrap modals respond to the Escape key by default unless explicitly configured otherwise via JavaScript settings or data attributes.

85. How do you programmatically toggle a modal named myModal using JavaScript in Bootstrap 5?

  • A) $('#myModal').modal('toggle');

  • B) var modal = new bootstrap.Modal(document.getElementById('myModal')); modal.toggle();

  • C) myModal.bootstrap('show');

  • D) bootstrap.toggle('#myModal');

Answer: B

Explanation: Bootstrap 5 relies on vanilla JavaScript API declarations rather than jQuery method chains.

86. Which class makes a component fade in smoothly when triggered?

  • A) .fade

  • B) .animate-fade

  • C) .transition-in

  • D) .opaque

Answer: A

Explanation: Adding the .fade utility class to components like modals or alerts applies a smooth CSS transition effect when they are toggled.

87. What component provides hidden slide-out sidebar panels, often used for mobile menus or shopping carts?

  • A) Modal

  • B) Offcanvas

  • C) Drawer

  • D) Accordion

Answer: B

Explanation: The .offcanvas component builds sidebar containers that slide in from the top, bottom, left, or right edges of the viewport.

88. Which class creates a dropdown menu container?

  • A) .dropdown-menu

  • B) .dropdown-list

  • C) .menu-content

  • D) .popup-menu

Answer: A

Explanation: The toggleable list of links inside a dropdown component must be wrapped in an element containing the .dropdown-menu class.

89. Which attribute overrides default placement options for tooltips (e.g., forcing a tooltip to appear to the right)?

  • A) data-bs-placement="right"

  • B) data-bs-direction="right"

  • C) data-bs-position="end"

  • D) tooltip-align="right"

Answer: A

Explanation: data-bs-placement accepts top, bottom, left, or right parameters to control tooltip orientation.

90. Which class creates a subtle text shimmer animation used to indicate content loading templates?

  • A) .spinner-grow

  • B) .placeholder or .placeholder-glow

  • C) .loading-shimmer

  • D) .fade-loop

Answer: B

Explanation: Bootstrap 5's placeholder components use layout structures and animations (like .placeholder-glow) to build mock loading interfaces.

🛠️ Section 6: Spacing & Color Utilities (Questions 91–100)

91. In Bootstrap's spacing notation (m-3, p-2), what does the first letter stand for?

  • A) Measurement

  • B) Mode

  • C) Margin or Padding

  • D) Maximum limit

Answer: C

Explanation: The first letter specifies the spacing type: m for margin utilities and p for padding utilities.

92. What does the class .py-4 apply?

  • A) Padding on both the top and bottom (y-axis)

  • B) Padding on both the left and right (x-axis)

  • C) Yearly layout margins

  • D) A 4px padding around all sides

Answer: A

Explanation: The y directional indicator targets the vertical axis, applying spacing modifications to both the top and bottom edges.

93. Which class applies a margin to the right side of an element on medium screens and larger in Bootstrap 5?

  • A) .mr-md-*

  • B) .me-md-*

  • C) .margin-right-md-*

  • D) .ms-md-*

Answer: B

Explanation: In Bootstrap 5, directional utilities use s (start/left) and e (end/right). Therefore, .me-md-* applies a margin-end on medium devices and up.

94. What is the default background utility class for a green success color?

  • A) .bg-green

  • B) .bg-success

  • C) .bg-positive

  • D) .bg-safe

Answer: B

Explanation: .bg-success maps to the theme's default green success color keyword block.

95. What does the class .mx-auto do?

  • A) Automatically sets width dimensions

  • B) Centers a block element horizontally by setting left and right margins to auto

  • C) Clears all floating elements along the axis

  • D) Scales text sizes dynamically

Answer: B

Explanation: .mx-auto sets horizontal margins (margin-left and margin-right) to auto, centering block-level elements within their parents.

96. Which opacity class makes an element semi-transparent?

  • A) .opacity-50

  • B) .opacity-half

  • C) .alpha-5

  • D) .translucent

Answer: A

Explanation: Bootstrap includes built-in opacity utilities like .opacity-25, .opacity-50, .opacity-75, and .opacity-100.

97. Which display utility hides an element on mobile devices but displays it as a block on medium screens and larger?

  • A) .d-none .d-md-block

  • B) .d-md-block

  • C) .hidden .visible-md

  • D) .d-mobile-none

Answer: A

Explanation: .d-none hides the element by default (mobile-first), and .d-md-block overrides that rule to display it starting at the medium breakpoint.

98. Which color context represents an accent color intended for informational callouts (default cyan/light blue)?

  • A) Primary

  • B) Secondary

  • C) Info

  • D) Light

Answer: C

Explanation: .text-info, .bg-info, and .btn-info utilize the information theme color (typically cyan).

99. Which spacing utility class completely strips all margins from an element?

  • A) .m-none

  • B) .m-0

  • C) .margin-clear

  • D) .p-0

Answer: B

Explanation: Setting the spacing numeric index to 0 (e.g., .m-0, .p-0) removes all margins or paddings.

100. How can you add a subtle shadow effect to an element container using Bootstrap utility classes?

  • A) .shadow

  • B) .box-shadow

  • C) .element-shadow

  • D) .shadow-true

Answer: A

Explanation: The .shadow utility class applies a default box-shadow to elements. Variations include .shadow-sm (small shadow) and .shadow-lg (large shadow).

No comments:

Post a Comment

Subscribe to: Posts (Atom)