Bootstrap - Online Quiz

Following quiz provides Multiple Choice Questions (MCQs) related to Bootstrap Framework. You will have to read all the given answers and click over the correct answer. If you are not sure about the answer then you can check the answer using Show Answer button. You can use Next Quiz button to check new set of questions in the quiz.

Q 1 - Which of the following is a part of Mobile First Strategy of Bootstrap?

A - Content: Determine what is most important.

B - Layout: Design to smaller widths first. Base CSS address mobile device first; media queries address for tablet, desktops.

C - Progressive Enhancement: Add elements as screen size increases.

D - All of the above.

Answer : D

Explanation

All of the above options are correct.

Q 2 - Which of the following class styles a table as a nice basic table with just some light padding and horizontal dividers?

Answer : A

Explanation

If you want a nice, basic table style with just some light padding and horizontal dividers, add the base class of .table to any table.

Q 3 - Which of the following bootstrap style of button represents a contextual button for informational alert messages?

Answer : D

Explanation

.btn-info − Contextual button for informational alert messages.

Q 4 - Which of the following bootstrap style helps to combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components?

A - .btn-group

B - .btn-toolbar

C - .btn-group-lg

D - .btn-group-vertical

Answer : B

Explanation

.btn-toolbar − This helps to combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Q 5 - Which of the following bootstrap styles are used to add a dropdown to a pills?

A - .nav, .nav-tab, .menu

B - .nav, .nav-pills, .dropdown-.menu

C - .nav, .nav-pills, .dropdown

D - .nav, .nav-pills

Answer : B

Explanation

To add dropdowns to tab: Start with a basic unordered list with the base class of .nav; Add the class .nav-pills.; Now add an unordered list with a .dropdown-menu class.

Q 6 - Which of the following bootstrap style is to be used if you want the .navbar fixed to the top of the page?

A - .navbar-top

B - .navbar-fixed

C - .navbar-fixed-top

D - None of the above.

Answer : C

Explanation

If you want the .navbar fixed to the top of the page, add class .navbar-fixed-top to the .navbar class.

Q 7 - Which of the following bootstrap styles can be used to create a striped progress bar?

A - .progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger

B - .success, .info, .warning, .danger

C - .progress-striped.

D - None of the above.

Answer : C

Explanation

To create a striped progress bar: Add a <div> with a class of .progress and .progress-striped. Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

Q 8 - Which of the following is correct about bootstrap media objects?

A - These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content.

B - The goal of the media object is to make the code for developing these blocks of information drastically shorter.

C - Both of the above.

D - None of the above.