Q1

Which framework is Bootstrap built on?

Q2
What type of design approach does Bootstrap emphasize?
A) Content-first
B) Mobile-first
C) Graphics-first
D) None of the above

Q3
Bootstrap is mainly used for:
A) Server-side operations
B) Network security
C) Front-end development
D) Data analysis

Q4
Which company originally developed Bootstrap?
A) Google
B) Twitter
C) Facebook
D) Microsoft

Q5
Bootstrap's grid system is based on how many columns?
A) 10
B) 12
C) 14
D) 16

Q6
What is the purpose of the Bootstrap "container" class?
A) To enhance text readability
B) To manage server requests
C) To structure the layout
D) To style images

Q7
Which Bootstrap feature provides the ability to hide or show content based on screen size?
A) Data-binding
B) Responsive utilities
C) Ajax components
D) None of the above

Q8
What is the advantage of using Bootstrap's precompiled feature?
A) Faster server response
B) Easier debugging
C) Quicker deployment
D) Enhanced security

Q9
Which class adds a responsive horizontal margin in Bootstrap?
A) .mx-auto
B) .mx-responsive
C) .mx-width
D) .mx-fill

Q10
If a Bootstrap navbar is not responsive, what is a common oversight to check for?
A) Missing viewport meta tag
B) Incorrect CSS link
C) Outdated Bootstrap version
D) All of the above

Q11
What is the maximum number of columns in Bootstrap's grid system?
A) 8
B) 10
C) 12
D) 16
Q12
In Bootstrap's grid system, which class is used for medium-sized screens?
A) .col-md
B) .col-sm
C) .col-lg
D) .col-xs

Q13
What does the 'col-' prefix in Bootstrap indicate?
A) Column control
B) Container sizing
C) Color adjustment
D) Cursor change

Q14
What is the purpose of the Bootstrap class 'row'?
A) To align text
B) To create a horizontal grouping of columns
C) To set borders
D) To add padding

Q15
Which class adjusts the alignment of elements within a column in Bootstrap's grid system?
A) .align-items-start
B) .align-items-end
C) .justify-content-center
D) .row-align

Q16
How does the class 'col-6' affect the width of a column in a Bootstrap grid?
A) Spans half of the screen
B) Spans one-sixth of the screen
C) Spans six pixels wide
D) None of the above

Q17
What effect does 'offset-' have in Bootstrap's grid system?
A) Increases padding inside columns
B) Moves columns to the right
C) Changes the color of columns
D) Decreases column width

Q18
Which Bootstrap feature allows for columns to reorder based on screen size?
A) Flex properties
B) Push and pull classes
C) Responsive resets
D) Visibility classes

Q19
Which class is used to make a column span three equal parts of the container width on a large
screen?
A) .col-lg-4
B) .col-lg-3
C) .col-lg-12
D) .col-lg-1

Q20
What class would you use to create four equal columns in a single row on medium screens?
A) .col-md-3
B) .col-md-4
C) .col-md-6
D) .col-md-12

Q21
To center a column in the grid, which utility class is necessary alongside the column size
class?
A) .mx-auto
B) .center-block
C) .auto-margin
D) .align-self-center

Q22
Which class combination creates a responsive column that stacks on small screens and aligns
side by side on medium screens?
A) .col-12 .col-md-6
B) .col-sm-12 .col-md-6
C) .col-xs-12 .col-lg-6
D) .col-6 .col-lg-12
Q23
If columns are unexpectedly stacking vertically on a medium device, what should be checked
first?
A) Row configuration
B) Column class overlap
C) Container fluidity
D) Viewport settings

Q24
What might cause gaps between columns in a Bootstrap layout?
A) Missing 'row' class
B) Extra padding in columns
C) Improper use of .col classes
D) All of the above

Q25
How can unexpected horizontal scrolling be fixed in a Bootstrap grid layout?
A) Check container classes
B) Remove custom CSS
C) Reduce column counts
D) All of the above

Q26
A developer finds that columns break out of alignment when resizing the browser window.
What could be the issue?
A) Improper column reset
B) Non-responsive meta tag
C) Incorrect row setup
D) Misconfigured breakpoints

Q27
Which utility class in Bootstrap is used to hide an element on all device sizes?
A) .invisible
B) .hidden
C) .hide
D) .none
Q28
Bootstrap’s spacing utilities control which of the following aspects?
A) Margin and padding
B) Color and font
C) Position and display
D) Width and height

Q29
What is the purpose of the .text-center class in Bootstrap?
A) To center text horizontally
B) To center text vertically
C) To justify text
D) To highlight text

Q30
Which class adjusts the vertical alignment of elements in Bootstrap?
A) .align-baseline
B) .align-top
C) .align-middle
D) .align-bottom

Q31
What does the 'text-' prefix in Bootstrap's utility classes generally modify?
A) Font size
B) Text alignment
C) Font style
D) Text decoration

Q32
Which utility class is used for changing the display property of an element to 'none' in
Bootstrap?
A) .d-none
B) .display-none
C) .hide
D) .invisible

Q33
How would you apply a Bootstrap class to add a small space between two buttons?
A) .m-1
B) .m-2
C) .m-3
D) .m-4
Q34
Which Bootstrap utility class adds a shadow to a box?
A) .box-shadow
B) .shadow
C) .drop-shadow
D) .shadow-sm

Q35
What class would you use to make a list item non-bulleted in a Bootstrap list group?
A) .list-unstyled
B) .no-bullets
C) .list-inline
D) .list-horizontal

Q36
Which class combination is used to set text color to primary and background color to
secondary in Bootstrap?
A) .text-primary .bg-secondary
B) .text-color-primary .background-secondary
C) .color-primary .bg-color-secondary
D) .primary-text .secondary-bg

Q37
If an element with .text-danger is not displaying red text as expected, what should be checked
first?
A) CSS file linkage
B) Overriding styles
C) Browser compatibility
D) Font settings

Q38
When a utility class for margin isn't affecting an element as expected, what is a likely cause?
A) Incorrect class name
B) Insufficient specificity
C) Colliding CSS
D) All of the above
Q39
What is the main method for customizing Bootstrap’s visual design?
A) Overriding existing CSS
B) Editing the source code
C) Using inline styles
D) Using CSS preprocessors

Q40
How does creating a custom theme differ from modifying Bootstrap’s core files?
A) It's more stable across updates
B) It requires more coding skills
C) It's less flexible
D) It's cheaper

Q41
In what file type is Bootstrap's source code primarily written?
A) .css
B) .scss
C) .js
D) .html

Q42
What is the advantage of using Bootstrap’s built-in mixins for customizations?
A) Faster compilation
B) Less code redundancy
C) Easier debugging
D) All of the above

Q43
What is a critical consideration when upgrading Bootstrap versions in a heavily customized
project?
A) Checking for deprecated features
B) Rewriting all custom code
C) Reducing page size
D) Increasing compatibility with browsers

Q44
Which Bootstrap variable can be adjusted to change the default padding for modals?
A) $modal-padding
B) $modal-margin
C) $modal-spacing
D) $modal-position

Q45
How do you override the default color palette in Bootstrap using SCSS?
A) Define new values before importing Bootstrap
B) Overwrite values in a new file
C) Change colors in the CSS file
D) Use !important in CSS

Q46
What SCSS function is crucial for adding new utilities with custom properties in Bootstrap?
A) @include
B) @function
C) @extend
D) @import

Q47
If changes to Bootstrap's SCSS variables do not take effect, what is the first thing you should
check?
A) File import order
B) SCSS compiler settings
C) Syntax errors
D) All of the above

Q48
What should you verify if a Bootstrap customization does not display correctly on a
webpage?
A) The CSS file is linked correctly
B) The customization uses correct syntax
C) The browser cache has been cleared
D) All of the above

Q49
How can you troubleshoot a custom Bootstrap build that fails to compile?
A) Check for missing dependencies
B) Review SCSS syntax errors
C) Ensure file paths are correct
D) All of the above
Q50
What is the primary use of Bootstrap's Modal component?
A) To navigate between pages
B) To display interactive alerts
C) To organize content
D) To display additional information in a popup

Q51
Which component is used to create a group of buttons that can toggle between active and
inactive states?
A) Navs
B) Button group
C) Input group
D) Dropdown

Q52
What does the Bootstrap Carousel component do?
A) Rotates text
B) Displays a series of images or slides in a slideshow
C) Collapses content
D) Expands forms

Q53
In Bootstrap, what is the purpose of the Jumbotron component?
A) To enhance navigation
B) To increase font size
C) To create a lightweight container for calling extra attention to content
D) To display modal dialogs

Q54
Which Bootstrap component is best suited for displaying a list of items with contextual
background colors?
A) List group
B) Progress bar
C) Tooltip
D) Table

Q55
How do Bootstrap Navs differ from Tabs?
A) Navs are always vertical, while Tabs are horizontal
B) Navs offer more style options
C) Tabs are clickable, while Navs are not
D) Navs are for navigation, Tabs are for content organization

Q56
Which Bootstrap component should be used for complex form layouts that require inline
arrangement of form controls?
A) Forms
B) Grid system
C) Input group
D) Card

Q57
What is the function of Bootstrap's Scrollspy component?
A) To add animations to scrolling
B) To update links in a navigation list based on scroll position
C) To hide elements on scroll
D) To lock an element at a specific scroll position

Q58
What class is used to make a navigation bar sticky at the top of the viewport in Bootstrap?
A) .fixed-top
B) .sticky-top
C) .top-nav
D) .nav-fixed

Q59
How do you create a basic alert box in Bootstrap that can be dismissed by the user?
A) Use .alert with .alert-dismissible
B) Use .alert with .close
C) Use .alert with .alert-close
D) Use .alert with .dismiss-alert

Q60
What Bootstrap class is needed to create a dropdown menu within a navigation bar?
A) .dropdown
B) .drop-nav
C) .navbar-dropdown
D) .nav-drop