HTML Questions & Answers – Responsive Overview – 6

This set of HTML Multiple Choice Questions & Answers (MCQs) focuses on “Responsive Overview – 6”.

1. Which of the following removes the default list-style and left margin on list items?
a) .list-unstyled
b) .blockquote-reverse
c) .list-inline
d) .initialism
View Answer

Answer: a
Explanation: .list-unstyled removes default list-style and left margin on list items, it works on both <ul> and <ol>, this class only applies to immediate children list items to remove the default list-style from any nested lists, can be applied to any listed lists as well. .initialism displays text inside <abbr> tag. All items in a single line is displayed by .list-inline.

2. What lines up the terms and descriptions in <dl> element side by side?
a) .list-inline
b) .dl-horizontal
c) .list-unstyled
d) .initialism
View Answer

Answer: b
Explanation: .dl-horizontal lines up the terms and descriptions in <dl> element side-by-side, it starts off like default <dl>s, but when browser window expands it will line up side-by-side. .list-unstyled removes default list-style and left margin on list items. .initialism displays text inside <abbr> tag.

3. Which class makes a text stand out?
a) .text-left
b) .small
c) .lead
d) .text-center
View Answer

Answer: c
Explanation: .lead makes a text stand out, .small indicates smaller text, set to 85% of the size of the parent, .text-left indicates left-aligned text, .text-center indicates center-aligned text.
advertisement
advertisement

4. Which of the following indicates dropdown functionality?
a) .caret
b) .close
c) .sr-only
d) .text-hide
View Answer

Answer: a
Explanation: .caret indicates dropdown functionality, it will reverse automatically in dropup menus, .close indicates a close icon, .sr-only hides an element to all devices except screen readers. .text-hide hides the text present in document.

5. Which class separates items inside dropdown menu?
a) .divider
b) .disabled
c) .collapse
d) .dropdown-header
View Answer

Answer: a
Explanation: .divider separates items inside dropdown menu with horizontal line, .disabled disables an item in dropdown menu, .collapse indicates collapsible content which can be hidden or shown on demand. .dropdown-header class add header inside dropdown menu.
Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following shown collapsible content by default?
a) .dropdown-header
b) .collapse
c) .collapse.in
d) .panel-collapse
View Answer

Answer: c
Explanation: .collapse.in shows collapsible content by default, .panel-collapse shows collapsible panel, toggle between hiding and showing panel, .collapse indicates collapsible content which can be hidden or shown on demand. .dropdown-header class add header inside dropdown menu.

7. Which style button that should open navbar on small screens?
a) .navbar-toggle
b) .navbar-text
c) .navbar-static-top
d) .navbar-right
View Answer

Answer: a
Explanation: .navbar-toggle styles button that should open navbar on small screens, often used together with three .icon-bar classes to indicate a toggleable menu icon, .navbar-text vertical align any elements inside navbar that are not links. Left, top and right borders from the nav bar can be removed by .navbar-static-top. Alignment of nav links, text and buttons in the nav bar to the right can be done by .navbar-right.
advertisement

8. Which is used on a <ul> container?
a) .navbar-static-top
b) .navbar-nav
c) .navbar-toggle
d) .navbar-right
View Answer

Answer: b
Explanation: .navbar-nav is used on <ul> container that contains list items with links inside a navigation bar, .navbar-right aligns nav links, forms, buttons or text in navbar to the right. Left, top and right borders from the nav bar can be removed by .navbar-static-top. .navbar-toggle styles button that should open navbar on small screens.

9. Which of the following removes left, top and right borders from navbar?
a) .navbar-toggle
b) .navbar-right
c) .navbar-static-top
d) .navabr-nav
View Answer

Answer: c
Explanation: .navbar-nav is used on <ul> container that contains list items with links inside a navigation bar. .navbar-right aligns nav links, forms, buttons or text in navbar to the right. .navbar-static-top removes left, top and right borders (rounded corners) from navbar, default navbar has a grey border and 4px border-radius by default, .navbar-toggle styles button that should open navbar on small screens.
advertisement

10. Which of the following aligns .pager previous button to left?
a) .disabled
b) .pager
c) .next
d) .previous
View Answer

Answer: d
Explanation: .previous aligns .pager previous button to the left, .next aligns .pager next button to the right, .disabled indicates unclickable link, .pager provides simple pagination links (next/previous).

11. Which class indicates new or unread items?
a) .jumbortron
b) .badge
c) .label label-success
d) .pager
View Answer

Answer: b
Explanation: .badge class indicates unread or new items, .jumbotron indicates a big box for calling extra attention to featured content or information, .label label-success indicates a green label of type “success”. .pager provides simple pagination links (next/previous).

12. Which of the following will display a grey label?
a) .label label-info
b) .label label-primary
c) .label label-success
d) .label label-default
View Answer

Answer: d
Explanation: .label label-default indicates a default grey label, .label label-primary indicates blue label of type “primary”, .label label-success indicates green label of type “success”, .label label-info indicates light blue label of type “info”.

13. Which class indicates the current page?
a) .active
b) .disables
c) .pagination-sm
d) .pagiantion-lg
View Answer

Answer: a
Explanation: .active indicates the current page, .disabled indicates unclickable link, .pagination-lg is used with .pagination to provide larger pagination, .pagination-sm is used to provide smaller pagination.

14. Which of the following is added to link or header element?
a) .navbar-default
b) .navbar
c) .navbar-btn
d) .navbar-brand
View Answer

Answer: d
Explanation: .navbar creates navigation bar. .navbar-brand added to link or header element inside navbar to represent a logo or header, .navbar-btn vertically aligns button inside navbar, .nabar-default creates default navigation bar.

15. What creates black navigation bar?
a) .navbar-inverse
b) .navbar-header
c) .navbar-form
d) .navbar-link
View Answer

Answer: a
Explanation: .navbar-inverse creates a black navigation bar instead of light grey, .navbar-header added to container element that contains link or element that represent logo or header, .navbar-link styles an element to look like link inside the navbar. Adding form elements inside the navbar to vertically center them is done by .navbar-form.

Sanfoundry Global Education & Learning Series – HTML.

To practice all areas of 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]

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.