250+ TOP MCQs on Responsive Overview and Answers

HTML Multiple Choice Questions “Responsive Overview”.

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

Answer: a
Clarification: .list-unstyled removes default list-style and left margin on list items, it works on both

and

1. , 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

tag. All items in a single line is displayed by .list-inline.2. What lines up the terms and descriptions in

element side by side?

a) .list-inline

b) .dl-horizontal

c) .list-unstyled

d) .initialism

Answer: b
Clarification: .dl-horizontal lines up the terms and descriptions in

element side-by-side, it starts off like default

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

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

Answer: c
Clarification: .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.

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

Answer: a
Clarification: .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

Answer: a
Clarification: .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.

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

Answer: c
Clarification: .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

Answer: a
Clarification: .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.

8. Which is used on a

• container?

• a) .navbar-static-top

• b) .navbar-nav

• c) .navbar-toggle

• d) .navbar-right

Answer: b
Clarification: .navbar-nav is used on

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

Answer: c
Clarification: .navbar-nav is used on

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.

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

Answer: d
Clarification: .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

Answer: b
Clarification: .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

Answer: d
Clarification: .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

Answer: a
Clarification: .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

Answer: d
Clarification: .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

Answer: a
Clarification: .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.