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 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 indicates a dangerous or potentially negative action?

Answer : B

Explanation

.btn-danger − Indicates a dangerous or potentially negative action.

Q 4 - Which of the following bootstrap style of image makes the entire image round by adding border-radius:500px?

A - .img-rounded

B - .img-circle

C - .img-thumbnail

D - None of the above.

Answer : B

Explanation

.img-circle − makes the entire image round by adding border-radius:500px.

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 align .nav links, forms, buttons, or text to left or right in a .navbar?

A - .navbar-align

B - .navbar-left, .navbar-right

C - .alignment

D - None of the above.

Answer : B

Explanation

You can align the components like .nav links, forms, buttons, or text to left or right in a .navbar using the utility classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction.

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

A - .progress-stacked

B - .progress

C - .progress-stack.

D - None of the above.

Answer : B

Explanation

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

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.

Answer : C

Explanation

Both of the above options are correct.

Q 9 - Which of the following is correct about data-selector Data attribute of Tooltip Plugin?

A - Applies a CSS fade transition to the tooltip.

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

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

D - Delegates to the specified targets.

Answer : D

Explanation

data-selector − If a selector is provided, tooltip objects will be delegated to the specified targets.

Q 10 - Which of the following is correct about data-delay Data attribute of Tooltip Plugin?

A - Sets the default title value if the title attribute isn't present.

B - Defines how the tooltip is triggered.

C - Defines default content value if data-content attribute isn't present

D - Delays showing and hiding the tooltip in ms.

Answer : D

Explanation

data-delay − Delays showing and hiding the tooltip in ms , does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show.

bootstrap_questions_answers.htm