HTML Multiple Choice Questions “Responsive Overview”.
1. How many classes does bootstrap grid system has?
a) 3
b) 2
c) 1
d) 4
Answer: d
Clarification: Bootstrap grid system has four classes. Xs, sm, md, lg. as is for phones having screens less than 786px wide, sm is for tablets. Screens equal to or greater than 768px, md is for small laptops, screen equal to or greater than 992px wide, lg is for laptops and desktops, Screens equal to or greater than 1200px wide.
2. What is bootstrap’s global default font-size?
a) 12px
b) 14px
c) 10px
d) 9px
Answer: b
Clarification: Bootstrap’s global default font-size is 14px, with line-height of 1.428. This is applied to element and all paragraphs. In addition all
elements have bottom margins.
3. Progress bars are not supported in ______________
a) Internet Explorer 10
b) Internet Explorer 9
c) Opera
d) Chrome
Answer: b
Clarification: Progress bars are not supported in Internet Explorer 9 and earlier versions, because they use CSS3 transitions and animations to achieve some of the effects. For improving accessibility for people using screen readers, we should include aria-* attributes.
4. Which of the following clears bottom-margin of each panel?
a) .panel-group
b) .panel-footer
c) .panel-heading
d) .panel-body
Answer: a
Clarification: .panel-group class clears bottom-margin of each panel. It also group many panels together, we can wrap
with class .panel-group around them. Footer to the panel is added by .panel-footer. Heading to the panel is given by .panel-heading class. The content inside the panel is in .panel-body.
5. For inserting plain text we use __________
a) .form-control-static
b) .input-group
c) .input-group-addon
d) .input-group-btn
Answer: a
Clarification: If we need to insert plain text next to a form label within horizontal form we can use .form-control-static class on
element. The .input-group class is a container to enhance input by adding an icon, text or button in front or behind it. An icon or help text next to the input field and button next to input is attached by .input-group-addon and .input-group-btn respectively.
6. Which attribute is used to input to prevent user input?
a) readonly
b) .sr-only
c) disabled
d) .has-feedback
Answer: a
Clarification: A button is disabled by .disabled class. We can add readonly attribute to an input to prevent user input. .sr-only class is applied on non-visible labels, disabled attribute is added to disabled an input field.
7. What is the range of dimension for small devices?
a) 450px to 700px
b) 768px to 991px
c) 992px to 1199px
d) 120px to 500px
Answer: b
Clarification: Small devices are defined as a screen width from 768px to 991px. For small devices we use the class .col-sm-*, for medium devices the screen width from 992px to 1199px.
8. Which will change the order of a grid columns?
a) .col-md-push-*
b) .col-md-offset-*
c) .clearfix
d) .col-sm-*
Answer: a
Clarification: We can change order of the grid columns with .col-md-push-* and .col-md-pull-* classes, we can move columns to right using .col-md-offset class. .clearfix class clears float. A column layout for small device is done by .col-sm-*.