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 Media Query?

A - Media queries have two parts, a device specification and then a size rule.

B - Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size.

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 styles a table with borders surrounding every element and rounded corners around the entire table?

Answer : C

Explanation

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table.

Q 3 - Which of the following bootstrap style of button indicates a successful or positive action?

Answer : C

Explanation

.btn-success − Indicates a successful or positive action.

Q 4 - Which of the following bootstrap style of button makes the button size large?

Answer : A

Explanation

.btn-lg − This makes the button size large.

Q 5 - Which of the following bootstrap styles are used to create a tabbed navigation?

A - .nav, .nav-tabs

B - .nav, .nav-pills

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

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

Answer : A

Explanation

To create a tabbed navigation .menu: Start with a basic unordered list with the base class of .nav and add class .nav-tabs.

Q 6 - Which of the following bootstrap style can be used to to get different size items of .pagination?

A - .lg, .sm

B - .pagination-lg, .pagination-sm

C - .menu-lg, .menu-sm

D - None of the above.

Answer : B

Explanation

.pagination-lg, .pagination-sm − Use these classes to get different size items.

Q 7 - Which of the following bootstrap styles can be used to create progress bars with different styles?

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

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

C - .progress, .progress-bar

D - None of the above.

Answer : A

Explanation

To create a progress bar with different styles: Add a <div> with a class of .progress. 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 wells?

A - A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.

B - To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.

C - Both of the above.

D - None of the above.