14 Sep 100 Bootstrap MCQ (Multiple Choice Questions) with Answers
1) What is Bootstrap?
Show Answer
Answer: b
Explanation
Bootstrap is a free, open-source front-end framework that provides pre-built HTML, CSS and JavaScript components for creating responsive, mobile-first websites and web apps.
2) Which HTML5 doctype is required for Bootstrap to work properly?
Show Answer
Answer: b
Explanation
Bootstrap requires the standard HTML5 doctype, written as <!DOCTYPE html>, at the very top of the page. Without it, browsers fall into quirks mode and many Bootstrap styles break.
3) Which meta tag is necessary to ensure proper rendering and touch zooming on mobile devices?
Show Answer
Answer: b
Explanation
The viewport meta tag tells the browser to match the page width to the device width and set the initial zoom level, which is essential for responsive, mobile-first rendering.
4) How many columns are in the default Bootstrap grid system?
Show Answer
Answer: c
Explanation
The Bootstrap grid is built on a 12-column layout, so column classes across a single row should add up to 12.
5) Which class provides a full-width container that spans the entire width of the viewport?
Show Answer
Answer: c
Explanation
.container-fluid is a full-width container that always spans 100% of the viewport width, whereas .container has a fixed max-width at each breakpoint.
6) Which grid breakpoint class prefix targets medium-sized screens (≥768px in standard Bootstrap)?
Show Answer
Answer: b
Explanation
The .col-md-* classes apply from the medium breakpoint upward (≥768px). sm is ≥576px, lg is ≥992px and xl is ≥1200px.
7) Which class is used to create a flexbox layout row in the Bootstrap grid?
Show Answer
Answer: b
Explanation
.row is the flexbox-based wrapper for grid columns. It applies display: flex, negative gutters and flex-wrap so columns can wrap and align.
8) Which class creates a responsive, full-width button block in Bootstrap 5 using flexbox utilities?
Show Answer
Answer: b
Explanation
Bootstrap 5 dropped .btn-block. Instead you wrap the button in a grid container: <div class=”d-grid”><button class=”btn btn-primary”>…</button></div>. The .d-grid-gap utility can add spacing.
9) Which class is used to contextualize a button with a primary action color?
Show Answer
Answer: b
Explanation
.btn-primary applies the theme’s primary colour (blue by default) to a button, indicating the main or most important action.
10) How do you create an outlined button in Bootstrap?
Show Answer
Answer: b
Explanation
.btn-outline-primary renders a button with a coloured border and text on a transparent background; the colours invert on hover.
11) Which class adds alternating grey background colors to table rows?
Show Answer
Answer: a
Explanation
.table-striped applies zebra striping to alternate rows (odd rows by default) for easier horizontal reading. .table-hover only highlights a row on hover.
12) Which wrapper class makes a table scroll horizontally on small screens?
Show Answer
Answer: b
Explanation
Wrapping a table in <div class=”table-responsive”> makes it scroll horizontally when it is too wide for the screen. Variants such as .table-responsive-md target specific breakpoints.
13) Which Bootstrap class is used to make an image scale responsively with its parent element?
Show Answer
Answer: b
Explanation
.img-fluid applies max-width: 100% and height: auto so the image never overflows its parent. (.img-responsive was the Bootstrap 3 name.)
14) Which class rounds an image into a circle?
Show Answer
Answer: b
Explanation
.rounded-circle applies border-radius: 50%, turning a square image into a circle. It replaced the older .img-circle class from Bootstrap 3.
15) Which class adds a thin 1px border with rounded corners around an image thumbnail?
Show Answer
Answer: a
Explanation
.img-thumbnail gives an image a 1px border, rounded corners and a little padding, producing a classic thumbnail look.
16) Which element/class wrapper is used to group form controls together with labels?
Show Answer
Answer: a
Explanation
Bootstrap 4 used .form-group to wrap a label and control. Bootstrap 5 removed it and instead relies on spacing utilities such as .mb-3 for the same visual grouping.
17) Which class is applied to <input>, <textarea>, and <select> elements for default Bootstrap styling?
Show Answer
Answer: a
Explanation
.form-control gives text inputs, textareas and selects full width, consistent padding, border radius and focus styling.
18) Which class is used for checkboxes and radio buttons in Bootstrap 5?
Show Answer
Answer: a
Explanation
In Bootstrap 5 the input itself uses .form-check-input, wrapped in a .form-check container alongside a .form-check-label.
19) Which utility class sets top padding to 3 units in Bootstrap?
Show Answer
Answer: a
Explanation
.pt-3 means padding-top with size 3 (1rem by default). The “p” prefix is padding and the second letter gives the side: t, b, s, e, x, y or nothing for all sides.
20) Which utility class sets all-around margin to 4 units?
Show Answer
Answer: a
Explanation
.m-4 applies margin: 1.5rem on all four sides. Margin utilities use the “m” prefix followed by an optional side letter and a size from 0 to 5 (plus auto).
21) Which utility class sets bottom margin to 0?
Show Answer
Answer: a
Explanation
.mb-0 sets margin-bottom: 0. Note that .pb-0 would remove bottom padding instead of bottom margin.
22) How do you horizontally center a block-level element with a specified width in Bootstrap?
Show Answer
Answer: b
Explanation
.mx-auto sets margin-left and margin-right to auto, centering a block element that has a defined width. .text-center only centers inline text.
23) Which class is used to display text in a lighter, muted color?
Show Answer
Answer: b
Explanation
.text-muted de-emphasises text. In Bootstrap 5 it maps to a grey colour, and .text-secondary or opacity utilities such as .text-opacity-75 can achieve a similar effect.
24) Which class transforms text to uppercase?
Show Answer
Answer: a
Explanation
.text-uppercase applies text-transform: uppercase. Related utilities are .text-lowercase and .text-capitalize.
25) Which class makes text bold in Bootstrap 5?
Show Answer
Answer: b
Explanation
Explanation
Bootstrap 5 renamed the font-weight utilities to the .fw-* form, so bold text uses .fw-bold (or .fw-semibold, .fw-normal, .fw-light).
26) Which class sets text alignment to right (end) in Bootstrap 5?
Show Answer
Answer: b
Explanation
Bootstrap 5 switched to logical direction names, so right alignment is .text-end (and left is .text-start). This works correctly in RTL languages too.
27) Which component displays contextual feedback messages for typical user actions?
Show Answer
Answer: a
Explanation
The .alert component shows contextual feedback messages such as success, warning, danger or info, and comes in coloured variants like .alert-success.
28) Which class is added to an alert to allow users to close/dismiss it?
Show Answer
Answer: a
Explanation
.alert-dismissible adds extra padding to make room for a close button, which itself uses the classes .btn-close and data-bs-dismiss=”alert”.
29) Which class creates a flexible and extensible content container that includes options for headers, footers, and content?
Show Answer
Answer: c
Explanation
.card is Bootstrap’s flexible content container. It replaced the old .panel (Bootstrap 3) and .well components and supports headers, bodies, footers and images.
30) Inside a .card component, where does the main text content reside?
Show Answer
Answer: b
Explanation
The .card-body holds the card’s main content and applies the standard internal padding. Other parts include .card-header, .card-footer and .card-img-top.
31) Which class creates a collapsible navigation bar header?
Show Answer
Answer: a
Explanation
.navbar is the wrapper class for Bootstrap’s responsive navigation header, usually combined with .navbar-expand-* and a colour scheme such as .navbar-dark .bg-dark.
32) Which class expands a navbar on large screens while collapsing it on smaller ones?
Show Answer
Answer: a
Explanation
.navbar-expand-lg keeps the navbar horizontal from the large breakpoint (≥992px) upward and collapses it behind a toggler below that width.
33) What class is used for the brand/logo area inside a navbar?
Show Answer
Answer: b
Explanation
.navbar-brand styles the company, product or project name (or logo) at the start of the navbar and adjusts its size and spacing.
34) What class triggers the mobile menu toggle button for a navbar?
Show Answer
Answer: a
Explanation
.navbar-toggler is the hamburger button shown on small screens. It uses data-bs-toggle=”collapse” and data-bs-target to show or hide the menu.
35) Which component is used to highlight new or unread items via a small count indicator?
Show Answer
Answer: b
Explanation
.badge renders a small count or status indicator, commonly placed inside buttons, links or list items. It replaced the Bootstrap 3 .label class.
36) Which class turns a list of links into a pagination menu?
Show Answer
Answer: b
Explanation
.pagination is applied to a <ul> (or <nav> containing one) to produce a paginated set of page links.
37) Which class is applied to individual <li> items inside a .pagination container?
Show Answer
Answer: a
Explanation
Each list item gets .page-item, and the anchor inside it gets .page-link. The .active and .disabled classes can be added to the .page-item to mark state.
38) Which component is used to show progress status for a process?
Show Answer
Answer: a
Explanation
A .progress container holds one or more .progress-bar children. The bar’s width (set with an inline style) represents the completed percentage.
39) Which class adds animated stripes to a progress bar?
Show Answer
Answer: a
Explanation
.progress-bar-animated makes the stripes created by .progress-bar-striped scroll from right to left using a CSS animation.
40) Which Bootstrap component renders a dialog box/popup window overlay?
Show Answer
Answer: b
Explanation
The .modal component displays a dialog overlay on top of the page. It is built with .modal, .modal-dialog and .modal-content elements and driven by the modal JavaScript plugin.
41) What data attribute is used to open a modal dialog on a button click in Bootstrap 5?
Show Answer
Answer: b
Explanation
Bootstrap 5 namespaces all data attributes with “bs”, so data-bs-toggle=”modal” replaces the old data-toggle=”modal” from Bootstrap 4.
42) What attribute points to the specific ID of the modal to open in Bootstrap 5?
Show Answer
Answer: a
Explanation
data-bs-target=”#myModal” tells the trigger which modal element to open. In Bootstrap 4 the same attribute was simply data-target.
43) Which component creates a slideshow for cycling through elements like images?
Show Answer
Answer: b
Explanation
The .carousel component cycles through slides (images, text or custom markup) with optional controls and indicators, powered by the carousel JavaScript plugin.
44) Which class marks an item as the starting visible slide in a carousel?
Show Answer
Answer: c
Explanation
Exactly one .carousel-item should carry the .active class so it is displayed first; the plugin then moves .active between items as it cycles.
45) Which component creates accordion-style expanding/collapsing sections?
Show Answer
Answer: a
Explanation
The .accordion component groups collapsible items so only one panel is shown at a time. It uses .accordion-item, .accordion-header, .accordion-button and .accordion-collapse.
46) Which utility class sets display to flex?
Show Answer
Answer: a
Explanation
.d-flex applies display: flex. Responsive variants such as .d-md-flex change the display value only from a given breakpoint upward.
47) Which utility hides an element on all screen sizes?
Show Answer
Answer: b
Explanation
.d-none sets display: none at every breakpoint. Bootstrap 5 no longer uses the old .hidden or .hidden-* helper classes.
48) How do you show an element only on medium screens and larger in Bootstrap 5?
Show Answer
Answer: a
Explanation
Combine .d-none (hidden by default) with .d-md-block (displayed as a block from the md breakpoint up). This is the standard Bootstrap 5 responsive visibility pattern.
49) Which class adds a subtle drop shadow to an element in Bootstrap?
Show Answer
Answer: a
Explanation
.shadow-sm applies a small, subtle box-shadow. The other options in the set are .shadow (default), .shadow-lg and .shadow-none.
50) Which utility class sets background color to warning (yellow)?
Show Answer
Answer: b
Explanation
.bg-warning applies the theme’s warning colour (yellow by default). Bootstrap background utilities follow the pattern .bg-{contextual-name}.
51) Which class sets text color to white?
Show Answer
Answer: a
Explanation
.text-white sets color: #fff. It is often paired with .bg-dark or .bg-primary to keep contrast high.
52) Which utility adds rounded corners to all sides of an element?
Show Answer
Answer: b
Explanation
.rounded applies a medium border radius to every corner. Size variants include .rounded-0 through .rounded-5, plus .rounded-circle and .rounded-pill.
53) How do you completely remove rounded corners from an element?
Show Answer
Answer: a
Explanation
.rounded-0 sets border-radius: 0 on all corners. Side-specific versions exist too, such as .rounded-top-0 or .rounded-end-0.
54) Which class positions an element as fixed at the top of the viewport?
Show Answer
Answer: b
Explanation
.fixed-top uses position: fixed to pin an element to the top of the viewport, where it stays while the page scrolls. Content underneath may need extra padding.
55) What is the difference between .fixed-top and .sticky-top?
Show Answer
Answer: a
Explanation
.fixed-top removes the element from the document flow and pins it to the viewport permanently. .sticky-top uses position: sticky, so the element scrolls normally until it reaches the top, then sticks.
56) Which class floats an element to the start (left in LTR) in Bootstrap 5?
Show Answer
Answer: b
Explanation
Bootstrap 5 renamed float utilities to logical directions: .float-start (left in LTR) and .float-end (right in LTR). The old .pull-left was a Bootstrap 3 class.
57) Which class floats an element to the end (right in LTR) in Bootstrap 5?
Show Answer
Answer: b
Explanation
.float-end replaces .float-right from Bootstrap 4 and floats the element to the right in left-to-right layouts.
58) Which class creates a pill-shaped badge?
Show Answer
Answer: a
Explanation
In Bootstrap 4 a pill badge used .badge-pill. Bootstrap 5 removed that class in favour of the general utility .rounded-pill.
59) Which component creates collapsible sidebar drawers (sliding off-canvas navigation) in Bootstrap 5?
Show Answer
Answer: a
Explanation
The .offcanvas component builds a hidden sidebar that slides in from the start, end, top or bottom of the viewport. It is a native Bootstrap 5 component.
60) Which class renders spinning loading indicators?
Show Answer
Answer: a
Explanation
.spinner-border creates a rotating ring, while .spinner-grow creates a pulsing, growing dot. Both are CSS-only and come in colour and size variants.
61) Which JavaScript framework dependency was completely removed in Bootstrap 5?
Show Answer
Answer: c
Explanation
Bootstrap 5 dropped the jQuery dependency entirely and rewrote all plugins in vanilla JavaScript. Popper.js is still required for dropdowns, tooltips and popovers.
62) Which third-party positioning engine does Bootstrap rely on for dropdowns, popovers, and tooltips?
Show Answer
Answer: b
Explanation
Popper.js handles the smart positioning of dropdown menus, tooltips and popovers. Bootstrap 5 bundles @popperjs/core with its own JS file.
63) How do you initialize tooltips or popovers in Bootstrap 5?
Show Answer
Answer: b
Explanation
For performance and accessibility reasons, tooltips and popovers must be explicitly initialised in JavaScript, for example with new bootstrap.Tooltip(element).
64) Which class creates breadcrumb navigation?
Show Answer
Answer: a
Explanation
.breadcrumb is applied to an ordered or unordered list to render a breadcrumb trail showing the current page’s position in the site hierarchy.
65) What is the class for a container item within a breadcrumb?
Show Answer
Answer: a
Explanation
Each <li> inside a .breadcrumb uses .breadcrumb-item, which automatically inserts the separator between items. Add .active to the current page item.
66) Which class adds a drop-down menu overlay when triggered?
Show Answer
Answer: a
Explanation
.dropdown-menu marks the hidden overlay list of .dropdown-item links that is revealed when the toggle is activated.
67) Which class is placed on the parent wrapper of a dropdown button and menu?
Show Answer
Answer: a
Explanation
The .dropdown wrapper (or .dropup, .dropstart, .dropend) positions the menu relative to the toggle button and is required for the plugin to work correctly.
68) Which class creates a divider line inside a dropdown menu?
Show Answer
Answer: a
Explanation
.dropdown-divider draws a thin horizontal separator between groups of dropdown items.
69) Which class groups a series of buttons together on a single line?
Show Answer
Answer: a
Explanation
.btn-group places related buttons side by side, merging adjacent borders and rounding only the outer corners. Add .btn-group-vertical to stack them.
70) Which class combines multiple button groups into a toolbar layout?
Show Answer
Answer: a
Explanation
.btn-toolbar wraps several .btn-group elements and adds flexbox spacing so the groups sit in a row like an application toolbar.
71) Which component displays floating temporary push notifications?
Show Answer
Answer: a
Explanation
The .toast component shows lightweight, temporary notifications. Toasts are opt-in and must be initialised and shown with JavaScript, often inside a toast container.
72) What class is used to make a modal fill the full screen size?
Show Answer
Answer: a
Explanation
Add .modal-fullscreen to .modal-dialog for an edge-to-edge modal. Responsive variants such as .modal-fullscreen-md-down target specific breakpoints.
73) Which class centers a modal vertically in the viewport?
Show Answer
Answer: a
Explanation
Adding .modal-dialog-centered to the .modal-dialog element vertically centres the dialog in the viewport using flexbox alignment.
74) Which class enables smooth scrolling transitions for accordion items?
Show Answer
Answer: a
Explanation
The smooth open/close animation comes from the .collapse class and the collapse JavaScript plugin, which animates height. .accordion-flush is a separate modifier that removes the outer borders.
75) Which helper class ratio container creates responsive aspect ratio embeds (e.g., video embeds)?
Show Answer
Answer: a
Explanation
Wrap the embed in <div class=”ratio ratio-16×9″>. Bootstrap 5 uses the .ratio helper with variants such as .ratio-1×1, .ratio-4×3 and .ratio-21×9, replacing Bootstrap 4’s .embed-responsive.
76) Which utility class sets element opacity?
Show Answer
Answer: a
Explanation
.opacity-75 applies opacity: 0.75. Bootstrap 5 offers .opacity-0, .opacity-25, .opacity-50, .opacity-75 and .opacity-100. (.text-opacity-* affects only text colour opacity.)
77) How do you set a full 100% height on an element relative to its parent in Bootstrap?
Show Answer
Answer: a
Explanation
.h-100 sets height: 100%, which is relative to the parent’s height. For percentage heights to work, ancestor elements usually need a defined height as well.
78) Which class sets height equal to 100% of the view height (viewport)?
Show Answer
Answer: a
Explanation
.vh-100 sets height: 100vh, sizing the element relative to the viewport height rather than its parent. Bootstrap 5 also provides .min-vh-100 and .vw-100.
79) Which utility class sets width to 100%?
Show Answer
Answer: a
Explanation
.w-100 applies width: 100%. Width utilities follow the .w-{25|50|75|100|auto} pattern, while .vw-100 refers to viewport width instead.
80) Which Flexbox utility aligns flex items along the main axis to the center?
Show Answer
Answer: a
Explanation
.justify-content-center maps to justify-content: center, which centres items along the main axis (horizontally in a default row).
81) Which Flexbox utility aligns flex items along the cross axis to the center?
Show Answer
Answer: a
Explanation
.align-items-center applies align-items: center on the flex container, centring all children along the cross axis (vertically in a default row).
82) Which class distributes space evenly between flex items along the main axis?
Show Answer
Answer: a
Explanation
.justify-content-between places the first item at the start and the last at the end, distributing the remaining space equally between the items. .justify-content-around and .justify-content-evenly also add space before and after the outer items.
83) Which utility class orders flex items to appear first?
Show Answer
Answer: a
Explanation
Explanation
.order-first sets order: -1, pushing the item to the front of the flex container. It is the counterpart of .order-last (order: 6).
84) What is the smallest default grid breakpoint size defined in Bootstrap 5?
Show Answer
Answer: a
Explanation
Bootstrap 5 defines six breakpoints: xs (<576px, no infix), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px) and xxl (≥1400px).
85) What is the breakpoint pixel threshold for .col-lg- in Bootstrap 5?
Show Answer
Answer: a
Explanation
The lg breakpoint starts at 992px. For reference: sm is 576px, md is 768px, xl is 1200px and xxl is 1400px.
86) What new breakpoint was introduced in Bootstrap 5 for extra-extra-large displays?
Show Answer
Answer: a
Explanation
Bootstrap 5 added the xxl breakpoint at 1400px, giving columns such as .col-xxl-6 for very wide screens.
87) What CSS extension preprocessor language is Bootstrap natively built with?
Show Answer
Answer: a
Explanation
Bootstrap’s source is written in Sass (.scss files) and compiled to CSS. Bootstrap 4 dropped the earlier Less support in favour of Sass.
88) Which Bootstrap 5 component adds floating label animations to inputs?
Show Answer
Answer: a
Explanation
.form-floating wraps a .form-control and a label so the label starts inside the field and floats up when the field is focused or filled. The input must come before the label in the markup.
89) Which class makes a heading look large and styled as a display title?
Show Answer
Answer: a
Explanation
The .display-1 through .display-6 classes create large, lighter-weight heading styles ideal for hero sections and landing pages.
90) Which tag/class combination styles block quotes elegantly in Bootstrap?
Show Answer
Answer: a
Explanation
Bootstrap styles block quotes with <blockquote class=”blockquote”>, usually paired with a <footer class=”blockquote-footer”> to credit the source.
91) Which class creates a lead paragraph with slightly larger, lighter text?
Show Answer
Answer: a
Explanation
.lead makes a paragraph stand out with a larger font size and lighter weight — commonly used for an introductory summary under a heading.
92) How do you disable an HTML input button using Bootstrap styling classes and attributes?
Show Answer
Answer: a
Explanation
For <button> and <input> elements use the native disabled attribute. For <a> elements, which cannot be disabled natively, add the .disabled class and remove the href or set aria-disabled=”true”.
93) Which utility sets a 1px border around an element?
Show Answer
Answer: a
Explanation
Explanation
.border adds a 1px solid border on all sides in the current border colour. Combine it with .border-primary and similar classes to set the colour, or .border-2 to change the width.
94) Which utility class removes the top border of an element?
Show Answer
Answer: a
Explanation
.border-top-0 sets border-top: 0. Side-specific removal utilities exist for every side: .border-end-0, .border-bottom-0 and .border-start-0.
95) Which class sets the border color to contextual success (green)?
Show Answer
Answer: a
Explanation
.border-success applies the theme’s success colour to an existing border. It must be used together with a border width utility such as .border.
96) Which class makes a table striping dark-themed?
Show Answer
Answer: a
Explanation
.table-dark gives a table dark backgrounds with light text; combined with .table-striped it produces dark zebra striping. The old .table-inverse name from Bootstrap 4 alpha was renamed.
97) Which HTML element is typically used to hold accordion content items?
Show Answer
Answer: a
Explanation
Each panel in a Bootstrap 5 accordion is a <div class=”accordion-item”>, containing an .accordion-header with an .accordion-button and a collapsible .accordion-collapse body.
98) How do you create an inline form where items sit side-by-side in flex layouts?
Show Answer
Answer: a
Explanation
Bootstrap 5 removed .form-inline. Instead, place .col-auto columns inside a .row (optionally with .g-3 for gutters) or apply flex utilities such as .d-flex and .align-items-center directly.
99) Which utility class stops text wrapping and adds an ellipsis on overflow?
Show Answer
Answer: a
Explanation
.text-truncate applies overflow: hidden, white-space: nowrap and text-overflow: ellipsis. It works on block or inline-block elements, and on table cells it requires .table with table-layout: fixed.
100) Which utility class forces text wrapping across lines?
Show Answer
Answer: a
Explanation
.text-wrap applies white-space: normal, allowing text to wrap naturally. Its counterpart .text-nowrap prevents wrapping, while .text-break wraps long words and breaks URLs.
No Comments