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 Responsive Images?

A - Bootstrap 3 allows you to make the images responsive by adding a class ..img-responsive to the <.img> tag.

B - ..img-responsive class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

C - Both of the above.

D - None of the above..

Answer : C

Explanation

Both of the above options are correct.

Q 2 - Which of the following class can be used to create a responsive table?

A - .table-responsive

B - .responsive

C - .active

D - .table

Answer : A

Explanation

By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Q 3 - Which of the following bootstrap style of button creates a default/ standard button?

Answer : A

Explanation

.btn − Default/ Standard button.

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 create a vertical pills navigation?

A - .nav, .nav-tabs

B - .nav, .nav-pills

C - .nav, .nav-pills, .nav-stacked

D - .nav, .nav-tabs, .nav-justified

Answer : C

Explanation

You can stack the pills vertically using the class ..nav-stacked along with the classes: .nav, .nav-pills.

Q 6 - Which of the following bootstrap style can be used to customize .pagination links?

A - .disabled, .active

B - .pagination-active, .pagination-disabled

C - .menu-active, .menu-disabled

D - None of the above.

Answer : A

Explanation

You can customize links by using .disabled for unclickable links and .active to indicate the current page.

Q 7 - Which of the following is correct about Bootstrap jumbotron?

A - This component can optionally increase the size of headings and add a lot of margin for landing page content.

B - To use the Jumbotron: Create a container <div> with the class of .jumbotron.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 8 - Which of the following is correct about data-backdrop Data attribute of Modal Plugin?

A - It specifies static for a backdrop, if you don't want the modal to be closed when the user clicks outside of the modal.

B - It closes the modal when escape key is pressed; set to false to disable.

C - It shows the modal when initialized.

D - Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is added, it will load that content.

Answer : A

Explanation

data-backdrop − Specify static for a backdrop, if you don't want the modal to be closed when the user clicks outside of the modal.

Q 9 - Which of the following is correct about data-show Data attribute of Modal Plugin?

A - It specifies static for a backdrop, if you don't want the modal to be closed when the user clicks outside of the modal.

B - It closes the modal when escape key is pressed; set to false to disable.

C - It shows the modal when initialized.

D - Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is added, it will load that content.

Answer : C

Explanation

data-show − Shows the modal when initialized.

Q 10 - Which of the following is correct about data-animation Data attribute of Popover Plugin?

A - Applies a CSS fade transition to the popover.

B - Inserts HTML into the popover. If false, jQuery's text method will be used to insert content into the dom.

C - Specifies how to position the popover (i.e., top|bottom|left|right|auto).

D - Delegates to the specified targets.

Answer : A

Explanation

data-animation − Applies a CSS fade transition to the popover.

bootstrap_questions_answers.htm