Bootstrap MCQs with answers Page - 23

A

Admin • 833.24K Points
Coach

Q. Which of the following adds checkmark icon inside input?

• (A) .has-success
• (B) .has-feedback
• (C) .has-warning
• (D) .help-block

Show Answer Discuss Share

Correct answer - Option (C)

Explanation:

.has-warning adds yellow or orange color to label and a yellow or orange border to the input, as well as checkmark icon inside the input, it is used together with .has-feedback, .help-block in a block of help text that breaks onto the new line and may extend beyond one line.

A

Admin • 833.24K Points
Coach

Q. Which of the following is a container to enhance input by adding an icon?

• (A) .input-group
• (B) .input-group-btn
• (C) .input-group-lg
• (D) .input-group-addon

Show Answer Discuss Share

Correct answer - Option (A)

Explanation:

.input-group is a container to enhance an input by adding an icon, text or button in front or behind it as a “help text”, .input-group-lg is for large input group, .input-group-addon is used together with .input-group class, this makes it possible to add an icon or help text next to input field.

A

Admin • 833.24K Points
Coach

Q. Which of the following are the fades in a tab?

• (A) .initialism
• (B) .icon-prev
• (C) .in
• (D) .info

Show Answer Discuss Share

Correct answer - Option (C)

Explanation:

.in fades in tabs, .info adds a light-blue background to table row, it indicates neutral informative change or action, .initialism displays the text inside <abbr> element in a slightly smaller font size, .icon-prev specifies unicode icon used in corousels.

A

Admin • 833.24K Points
Coach

Q. Which of the following will add feedback icons for inputs?

• (A) .has-feedback
• (B) .has-success
• (C) .has-danger
• (D) .has-warning

Show Answer Discuss Share

Correct answer - Option (A)

Explanation:

.has-feedback adds feedback icons for inputs like checkmark, warning and error signs, .has-danger adds red color to label and red border to the input, as well as an error icon inside the input, .has-success adds green color to label and green border to input, as well as checkmark icon inside input.

A

Admin • 833.24K Points
Coach

Q. Which of the following will create hamburger menu?

• (A) .icon-prev
• (B) .img-circle
• (C) .icon-bar
• (D) .icon-next

Show Answer Discuss Share

Correct answer - Option (C)

Explanation:

.icon-bar is used in the navbar to create hamburger menu i.e. three horizontal bars, .icon-next creates Unicode icon, used in carousels, this is often replaced by glyphicon, .icon-prev is Unicode icon used in carousels, .img-circle shapes an image to a circle.

A

Admin • 833.24K Points
Coach

Q. Which of the following displays text inside <abbr> in slightly smaller font size

• (A) .initialism
• (B) .info
• (C) .in
• (D) .input-group

Show Answer Discuss Share

Correct answer - Option (A)

Explanation:

.initialism displays text inside <abbr> element in slightly smaller font size, .input-group is a container to enhance input by adding an icon, text or button in front or behind it as a “help text”, .info adds light-blue background to table row, indicating a neutral informative change or action.

A

Admin • 833.24K Points
Coach

Q. Which of the following will provide additional information about something?

• (A) .label-danger
• (B) .label
• (C) .item
• (D) .jumbotron

Show Answer Discuss Share

Correct answer - Option (B)

Explanation:

.label adds a grey rounded box to the element, it provides additional information about something e.g. “New”, .jumbortron creates padded grey box with rounded corners that enlarge font sizes of text inside it, .item class added to each carousel item, it may be text or images.

A

Admin • 833.24K Points
Coach

Q. Which of the following aligns media objects?

• (A) .media-list
• (B) .media-object
• (C) .media-body
• (D) .media

Show Answer Discuss Share

Correct answer - Option (D)

Explanation:

.media aligns media objects like images or videos often used for comments in a blog post, .media-body specifies the text that should appear next to media object, .media-list creates nested media lists, .media-object indicates a media object.

A

Admin • 833.24K Points
Coach

Q. Which defines style for body of the modal?

• (A) .modal-body
• (B) .modal-dialog
• (C) .modal-content
• (D) .modal

Show Answer Discuss Share

Correct answer - Option (A)

Explanation:

.modal-body defines style for the body of the modal, we can add HTML markup here, .modal-content styles modal we can add modal’s header, body and footer, .modal-dialog sets the proper width and margin of the modal.

A

Admin • 833.24K Points
Coach

Q. Which of the following is for title of the modal?

• (A) .modal-lg
• (B) .modal-open
• (C) .modal-title
• (D) .modal-sm

Show Answer Discuss Share

Correct answer - Option (C)

Explanation:

.modal-title is for the title of the modal, .modal-sm is for small modal, .modal-lg specifies large modal, .modal-open is used on <body> element to prevent page scrolling, .model-header shows header of the modal often contains a title and a close button.

• Previous
• First
• 23
• 24
• 25
• 26
• Last
• Next

Jump to Go