Top 25 BOOTSTRAP MCQ Questions and Answers Exercise (Set 1/4)

By Sahil Bansal | Views: 8433

Q 1 - Which of the following is correct about Bootstrap?

A - Bootstrap is a sleek, intuitive, and powerful, mobile-first front-end framework for faster and easier web development.
B - It uses HTML, CSS, and Javascript.
C - Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.
D - All of the above.

Q 2 - Which of the following is correct about Bootstrap?

A - Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobiles.
B - Provides a clean and uniform solution for building an interface for developers.
C - It contains beautiful and functional built-in components which are easy to customize.
D - All of the above.

Q 3 - Which of the following is a part of the Mobile-First Strategy of Bootstrap?

A - Content: Determine what is most important.
B - Layout: Design to smaller widths first. Base CSS address mobile device first; media queries address for tablet, desktops.
C - Progressive Enhancement: Add elements as screen size increases.
D - All of the above.

Q 4 - Which of the following is correct about the Bootstrap Grid System?

A - Rows must be placed within a .container class for proper alignment and padding.
B - Use rows to create horizontal groups of columns.
C - Content should be placed within the columns, and only columns may be the immediate children of rows.
D - All of the above.

Q 5 - Which of the following is correct about the Bootstrap Grid System?

A - Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Fewer mixins can also be used for more semantic layouts.
B - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
C - Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
D - All of the above.

Q 6 - Which of the following is correct about Bootstrap Media Query?

A - Media query is a really fancy term for "conditional CSS rule".
B - It simply applies some CSS, based on certain conditions set forth. If those conditions are met, the style is applied.
C - Both of the above.
D - None of the above

Q 7 - Which of the following is correct about Bootstrap Media Query?

A - Media queries have two parts, a device specification and then a size rule.
B - Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size.
C - Both of the above.
D - None of the above

Q 8 - Which of the following is correct about Bootstrap Mobile-First Strategy?

A - You need to add the viewport meta tag to the element, to ensure proper rendering and touch zooming on mobile devices.
B - width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.
C - initial-scale=1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.
D - All of the above.

Q 9 - Which of the following is correct about Bootstrap Responsive Images?

A - Bootstrap 3 allows you to make the images responsive by adding a class ..img-responsive to the <.img> tag.
B - img-responsive class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
C - Both of the above.
D - None of the above

Q 10 - Which of the following is correct about Bootstrap cross-browser consistency?

A - Bootstrap uses Normalize to establish cross-browser consistency.
B - Normalize.css is a modern, HTML5-ready alternative to CSS resets.
C - Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
D - All of the above.

Q 11 - Which of the following class styles a table as a nice basic table with just some light padding and horizontal dividers?

A - .table
B - .table-striped
C - .table-bordered
D - .table-hover

Q 12 - Which of the following class styles a table as a nice basic table with stripes on rows?

A - .table
B - .table-striped
C - .table-bordered
D - .table-hover

Q 13 - Which of the following class styles a table with borders surrounding every element and rounded corners around the entire table?

A - .table
B - .table-striped
C - .table-bordered
D - .table-hover

--------------------------------------------------------------------------------------------------------------------------------------------

Practice more questions

--------------------------------------------------------------------------------------------------------------------------------------------

Q 14 - Which of the following class styles a table with a light gray background to rows while the cursor hovers over them?

A - .table
B - .table-striped
C - .table-bordered
D - .table-hover

Q 15 - Which of the following class applies the hover color to a particular row or cell of a table?

A - .active
B - .success
C - .warning
D - .danger

Q 16 - Which of the following class indicates a successful or positive action?

A - .active
B - .success
C - .warning
D - .danger

Q 17 - Which of the following class indicates a warning that might need attention?

A - .active
B - .success
C - .warning
D - .danger

Q 18 - Which of the following class indicates a dangerous or potentially negative action?

A - .active
B - .success
C - .warning
D - .danger

Q 19 - Which of the following class can be used to create a responsive table?

A - .table-responsive
B - .responsive
C - .active
D - .table

Q 20 - Which of the following is the default layout of a bootstrap form?

A - .vertical
B - .inline
C - .horizontal
D - None of the above.

Q 21 - Which of the following class is required to be added to the form tag to make it inline?

A - .inline
B - .form-inline
C - .horizontal
D - None of the above.

Q 22 - Which of the following class is required to be added to the form tag to make it horizontal?

A - .horizontal
B - .form-horizontal
C - .horizontal
D - None of the above.

Q 23 - Which of the following is true about bootstrap help text?

A - Bootstrap form controls can have a block-level help text that flows with the inputs.
B - To add a full width block of content, use the .help-block after the <input>.
C - Both of the above.
D - None of the above.

Q 24 - Which of the following bootstrap style of buttons creates a default/ standard button?

A - .btn
B - .btn-primary
C - .btn-success
D - .btn-info

Q 25 - Which of the following bootstrap style of buttons provides extra visual weight and identifies the primary action in a set of buttons?

A - .btn
B - .btn-primary
C - .btn-success
D - .btn-info

 

 QUESTION NO. ANSWERS
1.D
2.D
3.D
4.D
5.D
6.C
7.C
8.D
9.C
10.D
11.A
12.B
13.C
14.D
15.A
16.B
17.C
18.D
19.A
20.A
21.B
22.B
23.C
24.A
25.B

--------------------------------------------------------------------------------------------------------------------------------------------

Also Practice:

--------------------------------------------------------------------------------------------------------------------------------------------

Thank you for your feedback!