This set of HTML Objective Questions & Answers focuses on “Responsive Overview – 5”.
1. Which of the following centers tabs/pills?
a) .nav-justified
b) .nav nav-pills
c) .nav-stacked
d) .nav.navbar-nav
View Answer
Explanation: .nav-justified centers tabs/pills, on screens smaller than 786px the items are stacked and the content will remained centered, .nav nav-pills indicates a pill menu, .nav.navbar-nav contains list items with links inside navigation bar, .nav-stacked is for vertically stack tabs or pills.
2. Which of the following is for title of the modal?
a) .modal-sm
b) .modal-title
c) .modal-open
d) .modal-lg
View Answer
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.
3. Which defines style for body of the modal?
a) .modal
b) .modal-content
c) .modal-body
d) .modal-dialog
View Answer
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.
4. Which of the following aligns media objects?
a) .media-body
b) .media
c) .media-list
d) .media-object
View Answer
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.
5. Which of the following will provide additional information about something?
a) .item
b) .jumbotron
c) .label
d) .label-danger
View Answer
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.
6. Which of the following is a container to enhance input by adding an icon?
a) .input-group-btn
b) .input-group-addon
c) .input-group
d) .input-group-lg
View Answer
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.
7. Which of the following are the fades in a tab?
a) .in
b) .info
c) .initialism
d) .icon-prev
View Answer
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.
8. Which of the following will add feedback icons for inputs?
a) .has-warning
b) .has-danger
c) .has-success
d) .has-feedback
View Answer
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.
9. Which of the following will create hamburger menu?
a) .icon-next
b) .icon-bar
c) .icon-prev
d) .img-circle
View Answer
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.
10. Which of the following displays text inside <abbr> in slightly smaller font size:
a) .info
b) .input-group
c) .initialism
d) .in
View Answer
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.
11. Which of the following adds checkmark icon inside input?
a) .has-warning
b) .help-block
c) .has-success
d) .has-feedback
View Answer
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.
12. Which shapes an image to a thumbnail?
a) .img-circle
b) .img-responsive
c) .img-rounded
d) .img-thumbnail
View Answer
Explanation: .img-thumbnail shapes image to a thumbnail (borders), .img-rounded adds rounded crners to an image, .img-responsive makes an image responsive, .img-circle shapes an image to a circle, it is not supported in IE8 and earlier versions.
13. Which of the following forces an element to be hidden?
a) .hidden
b) .hidden-*
c) .hide
d) .icon-bar
View Answer
Explanation: .hidden forces an element to be hidden (display:none), .hidden-* hides content depending on screen size, .hide is deprecates, .icon-bar is used in the navbar to create hamburger menu.
14. Which of the following adds plain text next to form label?
a) .form-control-static
b) .form-group
c) .form-inline
d) .form-control
View Answer
Explanation: .form-control-static adds plain text next to form label within a horizontal form, .form-group is a container for form input and label, .form-inline makes a <form> left-aligned with inline-block controls, .form-control is used on input, textarea, and select elements to span the entire width of the page and make them responsive.
15. Which is not a container for embedded content?
a) .embed-responsive
b) .embed-responsive-16by9
c) .embed-responsive-4by3
d) .embed-responsive-item
View Answer
Explanation: .embed-responsive-item is used inside .embed-responsive, scales the video nicely to the parent element, .embed-responsive, .embed-responsive-16by9, .embed-responsive-4by3 are containers for embedded content. They creates given aspect ratio embedded content.
Sanfoundry Global Education & Learning Series – HTML.
To practice all objective questions on HTML, here is complete set of 1000+ Multiple Choice Questions and Answers.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Check Computer Science Books
- Practice MCA MCQs
- Practice Computer Science MCQs
- Practice Information Science MCQs
- Apply for Computer Science Internship
