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 correct about Bootstrap Mobile First Strategy?

A - You need to add the viewport meta tag to the element, to ensure proper rendering and touch zooming on mobile devices.

B - width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles,desktops,tablets...) properly.

C - initial-scale=1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.

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 stripes on rows?

Answer : B

Explanation

By adding the .table-striped class, you will get stripes on rows within the <tbody>.

Q 3 - Which of the following bootstrap style of button provides extra visual weight and identifies the primary action in a set of buttons?

Answer : B

Explanation

.btn-primary − Provides extra visual weight and identifies the primary action in a set of buttons.

Q 4 - Which of the following bootstrap style of button creates block level buttons that span the full width of a parent?

Answer : D

Explanation

.btn-block − This creates block level buttons that span the full width of a parent.

Q 5 - Which of the following bootstrap style is used to add text to .navbar?

A - .navbar-text

B - .text

C - .form-text

D - None of the above.

Answer : A

Explanation

To wrap strings of text in an element use the class .navbar-text. This is usually used with <p> tag for proper leading and color.

Q 6 - Which of the following bootstrap style is used to create a .breadcrumb?

A - .breadcrumb

B - .navbar

C - .menu

D - None of the above.

Answer : A

Explanation

A .breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css).

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

A - .progress, .progress-bar

B - .nav-progress

C - .link-progress-bar

D - None of the above.

Answer : A

Explanation

To create a basic progress bar: Add a <div> with a class of .progress. Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

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

A - Panel components are used when you want to put your DOM component in a box.

B - To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

C - Both of the above.

D - None of the above.