Test Your Bootstrap Knowledge: Multiple Choice Questions and Answers

Challenge your understanding of Bootstrap with this set of multiple-choice questions and answers. This quiz covers key concepts, features, and best practices, testing your knowledge of this popular framework for building responsive and mobile-first websites.

Bootstrap Multiple Choice Questions (MCQ)

This section contains multiple-choice questions and answers related to Bootstrap, a popular HTML, CSS, and JavaScript framework for developing responsive and mobile-first websites.

Bootstrap MCQ Questions and Answers

1) Who developed Bootstrap?
  1. James Gosling
  2. Mark Zuckerberg
  3. Dennis Ritchie
  4. Mark Otto and Jacob Thornton
Show Answer

(d) Mark Otto and Jacob Thornton
Bootstrap was originally developed at Twitter and released as an open-source project in August 2011.
2) Is Bootstrap 3 mobile-first?
  1. True
  2. False
Show Answer

(a) True
Bootstrap 3 was designed with mobile-first principles in mind.
3) Which Bootstrap class provides a responsive fixed-width container?
  1. .container-fixed
  2. .container-fluid
  3. .container
  4. All of the above
Show Answer

(c) .container
The .container class provides a responsive container with fixed widths.
4) How many columns are in the Bootstrap grid system?
  1. 2
  2. 12
  3. 3
  4. 5
Show Answer

(b) 12
5) Which Bootstrap class creates a large box for highlighting content?
  1. .box
  2. .container
  3. .container-fluid
  4. .jumbotron
Show Answer

(d) .jumbotron
6) Correct syntax for a standard navigation bar?
Show Answer

The correct answer would show the standard HTML structure for a Bootstrap navbar, including the .navbar class and its variations for styling and responsiveness.
7) Correct syntax for a standard navigation tab?
Show Answer

The correct answer would show the standard HTML structure for a Bootstrap navigation tab, including the .nav class and its variations.
8) Which class creates a black navigation bar?
  1. .navbar-default
  2. .navbar-inverse
  3. .navbar-black
  4. .navbar-dark
Show Answer

(b) .navbar-inverse (Note: In newer Bootstrap versions, this might be .navbar-dark)
9) Which Bootstrap plugin creates slideshows?
  1. slideshow
  2. scrollspy
  3. carousel
  4. None of the above
Show Answer

(c) carousel
10) Which Bootstrap class creates a dropdown menu?
  1. .dropdown
  2. .select
  3. .select-list
  4. None of the above
Show Answer

(a) .dropdown
11) Which Bootstrap class creates a basic list group?
  1. .grouped-list
  2. .select-list
  3. .list-group
  4. .list-grouped
Show Answer

(c) .list-group
12) Which Bootstrap class makes an image circular?
  1. .img-rounded
  2. .img-circle
  3. .image-rounded
  4. None of the above
Show Answer

(b) .img-circle
13) Which Bootstrap class adds zebra-striping to a table?
  1. .tab-striped
  2. .zebra-strip
  3. .table-stripped
  4. .table-striped
Show Answer

(d) .table-striped
14) Which Bootstrap class creates a large button?
  1. .btn-xl
  2. .btn-lrg
  3. .btn-large
  4. .btn-lg
Show Answer

(d) .btn-lg
15) Which Bootstrap plugin creates modal windows?
  1. popup
  2. alert
  3. modal
  4. window
Show Answer

(c) modal
16) Which Bootstrap class creates basic pagination?
  1. .page
  2. .pagin
  3. .paginate
  4. .pagination
Show Answer

(d) .pagination
17) Which Bootstrap class creates a badge?
  1. .tag
  2. .badge
  3. .page
  4. .flag
Show Answer

(b) .badge
18) Which Bootstrap class adds rounded corners to images?
  1. .img-circle
  2. .image-circle
  3. .image-rounded
  4. .img-rounded
Show Answer

(d) .img-rounded
19) Which Bootstrap class creates a panel?
  1. .panel
  2. .container
  3. .box
  4. .jumbotron
Show Answer

(a) .panel
20) Which Bootstrap class creates a pager?
  1. .carousel
  2. .collapse
  3. .pager
  4. None of the above
Show Answer

(c) .pager
21) Which Bootstrap class creates collapsible elements?
  1. .collapse
  2. .carousel
  3. .pager
  4. None of the above
Show Answer

(a) .collapse
22) Which Bootstrap class creates a well?
  1. .wel
  2. .well
  3. .well-container
  4. .container-well
Show Answer

(b) .well
23) Which Bootstrap class creates large wells?
  1. .well-large
  2. .well-big
  3. .well-lg
  4. .well-sm
Show Answer

(c) .well-lg
24) Which Bootstrap class creates small wells?
  1. .well-small
  2. .well-short
  3. .well-lg
  4. .well-sm
Show Answer

(d) .well-sm
Test Your Bootstrap Knowledge: Multiple Choice Questions and Answers

Bootstrap Multiple Choice Questions (MCQ)

This section presents multiple-choice questions and answers covering various aspects of Bootstrap, a popular front-end framework for building responsive websites. Each question tests your knowledge of Bootstrap's components, classes, and functionalities.

Bootstrap MCQ Quiz

1) Who developed Bootstrap?
  1. James Gosling
  2. Mark Zuckerberg
  3. Dennis Ritchie
  4. Mark Otto and Jacob Thornton
Show Answer

(d) Mark Otto and Jacob Thornton
2) Is Bootstrap 3 mobile-first?
  1. True
  2. False
Show Answer

(a) True
3) Which Bootstrap class creates a responsive fixed-width container?
  1. .container-fixed
  2. .container-fluid
  3. .container
  4. All of the above
Show Answer

(c) .container
4) How many columns are in a Bootstrap grid system?
  1. 2
  2. 12
  3. 3
  4. 5
Show Answer

(b) 12
5) Which Bootstrap class creates a large highlighted box?
  1. .box
  2. .container
  3. .container-fluid
  4. .jumbotron
Show Answer

(d) .jumbotron
6) Correct syntax for a basic navigation bar?
Show Answer

The answer should show the correct HTML structure for a Bootstrap navbar.
7) Correct syntax for a basic navigation tab?
Show Answer

The answer should show the correct HTML structure for a Bootstrap navigation tab.
8) Which class creates a black navbar?
  1. .navbar-default
  2. .navbar-inverse
  3. .navbar-black
  4. .navbar-dark
Show Answer

(b) .navbar-inverse (Note: In newer versions, it might be .navbar-dark)
9) Which Bootstrap plugin creates slideshows?
  1. slideshow
  2. scrollspy
  3. carousel
  4. None of the above
Show Answer

(c) carousel
10) Which Bootstrap class creates a dropdown menu?
  1. .dropdown
  2. .select
  3. .select-list
  4. None of the above
Show Answer

(a) .dropdown
11) Which Bootstrap class creates a basic list group?
  1. .grouped-list
  2. .select-list
  3. .list-group
  4. .list-grouped
Show Answer

(c) .list-group
12) Which Bootstrap class makes an image circular?
  1. .img-rounded
  2. .img-circle
  3. .image-rounded
  4. None of the above
Show Answer

(b) .img-circle
13) Which Bootstrap class adds zebra-striping to a table?
  1. .tab-striped
  2. .zebra-strip
  3. .table-stripped
  4. .table-striped
Show Answer

(d) .table-striped
14) Which Bootstrap class creates a large button?
  1. .btn-xl
  2. .btn-lrg
  3. .btn-large
  4. .btn-lg
Show Answer

(d) .btn-lg
15) Which Bootstrap plugin creates modal windows?
  1. popup
  2. alert
  3. modal
  4. window
Show Answer

(c) modal
16) Which Bootstrap class creates basic pagination?
  1. .page
  2. .pagin
  3. .paginate
  4. .pagination
Show Answer

(d) .pagination
17) Which Bootstrap class creates a badge?
  1. .tag
  2. .badge
  3. .page
  4. .flag
Show Answer

(b) .badge
18) Which Bootstrap class adds rounded corners to images?
  1. .img-circle
  2. .image-circle
  3. .image-rounded
  4. .img-rounded
Show Answer

(d) .img-rounded
19) Which Bootstrap class creates a panel?
  1. .panel
  2. .container
  3. .box
  4. .jumbotron
Show Answer

(a) .panel
20) Which Bootstrap class creates a pager?
  1. .carousel
  2. .collapse
  3. .pager
  4. None of the above
Show Answer

(c) .pager
21) Which Bootstrap class creates collapsible elements?
  1. .collapse
  2. .carousel
  3. .pager
  4. None of the above
Show Answer

(a) .collapse
22) Which Bootstrap class creates a well?
  1. .wel
  2. .well
  3. .well-container
  4. .container-well
Show Answer

(b) .well
23) Which Bootstrap class creates large wells?
  1. .well-large
  2. .well-big
  3. .well-lg
  4. .well-sm
Show Answer

(c) .well-lg
24) Which Bootstrap class creates small wells?
  1. .well-small
  2. .well-short
  3. .well-lg
  4. .well-sm
Show Answer

(d) .well-sm
25) Which Bootstrap class creates large modals?
  1. .modal-large
  2. .modal-sm
  3. .modal-big
  4. .modal-lg
Show Answer

(d) .modal-lg
26) Which Bootstrap class creates small modals?
  1. .modal-large
  2. .modal-sm
  3. .modal-big
  4. .modal-lg
Show Answer

(b) .modal-sm
27) Which Bootstrap class makes text uppercase?
  1. .text-capitalize
  2. .text-upper
  3. .uppercase
  4. .text-uppercase
Show Answer

(d) .text-uppercase
28) Which Bootstrap plugin creates tooltips?
  1. popover
  2. tooltip
  3. modal
  4. None of the above
Show Answer

(b) tooltip
29) Correct syntax for a Bootstrap search icon?
Show Answer

The answer should show the correct HTML for a Bootstrap Glyphicon search icon.
30) Which Bootstrap class adds a heading to a panel?
  1. .panel-head
  2. .panel-header
  3. .panel-heading
  4. .panel-content
Show Answer

(c) .panel-heading
31) Correct method to add a success button?
Show Answer

The answer should show the correct HTML structure for a Bootstrap success button.
32) Which Bootstrap class creates a label?
  1. .label
  2. .badge
  3. .flag
  4. .popover
Show Answer

(a) .label
33) Does the Bootstrap grid system work across multiple devices?
  1. True
  2. False
Show Answer

(a) True
34) What are Bootstrap Glyphicons used for?
  1. Displaying icons.
  2. Removing icons.
  3. Selecting icons.
  4. None of the above
Show Answer

(a) Displaying icons.
35) What is the default Bootstrap form layout?
  1. Horizontal
  2. Inline
  3. Vertical
  4. None of the above
Show Answer

(c) Vertical
36) Which Bootstrap class capitalizes text?
  1. .text-capitalize
  2. .text-upper
  3. .uppercase
  4. .text-uppercase
Show Answer

(a) .text-capitalize
37) Which Bootstrap class right-aligns navbar buttons?
  1. .navbar-rgt
  2. .navbar-btn
  3. .navbar-right
  4. .navbar-default
Show Answer

(c) .navbar-right
38) Which Bootstrap class creates thumbnail images?
  1. .img-circle
  2. .img-nail
  3. .img-thumb
  4. .img-thumbnail
Show Answer

(d) .img-thumbnail
39) Which Bootstrap class creates a button that acts as a link?
  1. .btn-anchor
  2. .btn-link
  3. .btn-hyperlink
  4. None of the above
Show Answer

(b) .btn-link
40) Which Bootstrap grid class is for desktops?
  1. xs
  2. sm
  3. lg
  4. md
Show Answer

(d) md
41) The Bootstrap class "xs" is for:
  1. Tablets
  2. Phones
  3. Desktops
  4. All of the above
Show Answer

(b) Phones
42) Which Bootstrap class creates an animated progress bar?
  1. .active
  2. .progress-success
  3. .progress-active
  4. None of the above
Show Answer

(a) .active
43) Which statement is true about Bootstrap wells?
  1. Default size is medium.
  2. Size can be changed with .well-sm and .well-lg.
  3. .well-sm is for small wells; .well-lg is for large wells.
  4. All of the above
Show Answer

(d) All of the above
44) Which statement is true about the Bootstrap Grid System?
  1. 12 columns across the page.
  2. Responsive layout.
  3. Both (a) and (b)
  4. Neither (a) nor (b)
Show Answer

(c) Both (a) and (b)
45) Which statement is true about Bootstrap jumbotrons?
  1. Created with .jumbotron.
  2. Used for highlighting content.
  3. Enlarges font size.
  4. All of the above
Show Answer

(d) All of the above
46) Which statement is true about responsive images in Bootstrap?
  1. Use .img-responsive class.
  2. Images automatically resize.
  3. Both (a) and (b)
  4. Neither (a) nor (b)
Show Answer

(c) Both (a) and (b)
Test Your Bootstrap Knowledge: Multiple Choice Questions and Answers

Responsive Images in Bootstrap

Bootstrap simplifies creating responsive images that adapt to different screen sizes. Adding the .img-responsive class to an <img> tag automatically makes the image responsive. The image will scale proportionally to fit within its container, preventing it from overflowing and maintaining aspect ratio. This class applies the styles `display: block;`, `max-width: 100%;`, and `height: auto;` to the image.

Bootstrap Grid System Screen Sizes

The Bootstrap grid system uses classes to define screen sizes. These classes help make your website responsive by adjusting the layout based on the screen size. The question below asks about these classes.

47) Which set of classes defines screen sizes in the Bootstrap grid system?
  1. small, xs, lg, extra-large
  2. xs, medium, lg, sm
  3. sm, mg, lg
  4. xs, sm, md, lg
Show Answer

(d) xs, sm, md, lg
These classes correspond to extra small (phones), small (tablets), medium (desktops), and large (large desktops) screen sizes.

Bootstrap Table Styles

Bootstrap provides classes for styling tables:

48) Which Bootstrap class adds borders to all table elements?
  1. .table-striped
  2. .table-bordered
  3. .table-border
  4. .table-condensed
Show Answer

(b) .table-bordered
49) Which Bootstrap class adds a hover effect to table rows?
  1. .table-striped
  2. .table-bordered
  3. .table-border
  4. .table-hover
Show Answer

(d) .table-hover

Bootstrap Plugins and Classes

The following questions cover Bootstrap plugins and classes used for various UI elements.

50) The Bootstrap Scrollspy plugin automatically updates navigation links based on scroll position.
  1. True
  2. False
Show Answer

(a) True
More Bootstrap MCQs (25-46) would be placed here.