This set of HTML Multiple Choice Questions & Answers (MCQs) focuses on “Responsive Overview – 4”.
1. Which of the following changes order of the grid columns?
a) .col-*-pull-*
b) .col-*-offset-*
c) .col-*-push-*
d) .collapse
View Answer
Explanation: .col-*-pull-* changes order of the grid column, .col-*-offset-* moves columns to the right, these classes increase left margin of a column by * columns, .col-*-push-* changes order of the grid columns, .collapse indicates collapsible content.
2. Which of the following spans full width of screen?
a) .container
b) .control-label
c) .container-fluid
d) .collapse-in
View Answer
Explanation: .containerfluid is a container that spans the full width of the screen, .container is a fixed width container with widths determined by screen sites, .control-labels allows a label to be used for form validation.
3. Which class is used to separate links in dropdown menu?
a) .divider
b) .dl-horizontal
c) .disabled
d) .dropdown
View Answer
Explanation: .divider class is there to separate links in dropdown menu with thin horizontal border, .dl-horizontal lines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side, .dropdown creates a toggleable menu that allows user to choose one value from predefined list.
4. Which of the following adds default styles for dropdown menu container?
a) .dropdown-menu
b) .dropdown-toggle
c) .dropdown-menu-right
d) .dropdown
View Answer
Explanation: .dropdown-menu adds default styles for dropdown menu container, .dropdown-header is used to add headers inside dropdown menu, .dropdown-right right-aligns a dropdown menu, .dropdown-toggle is used on the button that should hide and show the dropdown menu.
5. Which class adds a rounded border around an element?
a) .well-sm
b) .well-lg
c) .well
d) .divider
View Answer
Explanation: .well adds a rounded border around an element with gray background color and some padding, .well-lg is a large well i.e. for more padding, .well-sm is a small well with less padding.
6. Which of the following will show popup-box?
a) .well
b) .visible-*
c) .thumbnail
d) .tooltip
View Answer
Explanation: .tooltip is for the popup-box that appears when a user moves the mouse pointer over an element, .thumbnail adds a border around an element often used for images or videos to make it look like a thumbnail. .well adds a rounded border around an element with gray background color and some padding. .visible-* is used to show the content by device.
7. Which of the following class will show blue text?
a) .text-primary
b) .text-success
c) .text-muted
d) .text-warning
View Answer
Explanation: .text-primary shows blue text color, .text-success shows green text color which indicates success, .text-warning shows yellow or orange text color which indicates warning, .text-muted shows grey color text, .text-danger shows red color text.
8. Which of the following makes a table more compact?
a) .table-responsive
b) .table-hover
c) .table-condensed
d) .table-bordered
View Answer
Explanation: .table-condensed makes a table more compact by cutting cell padding in half, .table-hover creates a hoverable table by adding grey background color on table rows on hover, .table-responsive makes table responsive by adding the horizontal scrollbar when needed.
9. Which of the following creates toggleable tabs?
a) .tab-pane
b) .table-responsive
c) .table-condensed
d) .table
View Answer
Explanation: .tab-pane is used together with .tab-content to create toggleable or dynamic tabs or dynamic pills. .table adds basic styling to a table like bottom borders, padding etc. Cutting cell padding in half to make table more compact, .table-condensed is used. A responsive table is created by .table-responsive.
10. Which class is a container for responsive columns?
a) .sr-only
b) .small
c) .show
d) .row
View Answer
Explanation: .row class is for container for responsive columns, .small creates a lighter, secondary text in any heading, .sr-only hides an element on all devices except for screen readers, .show class shows an element.
11. Which of the following creates yellow progress bar?
a) .progress-bar-success
b) .progress-bar-warning
c) .progress-bar-info
d) .progress-bar-danger
View Answer
Explanation: .progress-bar-warning will create a yellow progress bar indicating warning, .progress-bar-success will show green progress bar indicating success, .progress-bar-danger will show red progress bar indicating danger, .progress-bar-info will show light-blue progress bar indicating information.
12. Which class is a container for progress bars?
a) .progress
b) .progress-bar
c) .progress-bar-info
d) .progress-bar-success
View Answer
Explanation: .progress class is a container for progress bars, .progress-bar creates a progress bar, .progress-bar-success creates a green progress bar and indicates success, .progress-bar-info shows light-blue progress bar indicating information.
13. Which of the following is used to align pager buttons to the left side of the page?
a) .previous
b) .prev
c) .pre-scrollable
d) .popover
View Answer
Explanation: .previous class is used to align pager buttons to the left side of the page, .prev is used in carousels to indicate a “previous” link, .pre-scrollable makes a <pre> element scrollable, .popover shows popup-box that appears when a user clicks on an element.
14. Which of the following is a container for content inside the panel?
a) .panel-body
b) .panel-collapse
c) .panel-success
d) .panel-footer
View Answer
Explanation: .panel-body is a container for content inside the panel, .panel-collapse is for the collapsible panel which toggles between hiding and showing panel, .panel-success shows green panel indicating success, .panel-footer creates a panel footer.
15. Which of the following creates a pagination?
a) .pager
b) .pagination
c) .pagination-lg
d) .pagination-sm
View Answer
Explanation: .pagination creates a pagination which is useful when we have a website with lots of pages, used on <ul> elements, .pager creates previous or next buttons, it is used on <ul> elements, .pagination-lg creates large pagination, .pagination-sm creates small pagination.
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]
- Check HTML Books
- Check Computer Science Books
- Practice Information Science MCQs
- Practice Computer Science MCQs
- Apply for Computer Science Internship
