Bootstrap - Mock Test

This section presents you various set of Mock Tests related to Bootstrap Framework. You can download these sample mock tests at your local machine and solve offline at your convenience. Every mock test is supplied with a mock test key to let you verify the final score and grade yourself.

Bootstrap Mock Test I

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.

Answer : D

Explanation

All of the above options are correct.

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.

Answer : D

Explanation

All of the above options are correct.

Q 3 - Which of the following is a part of 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.

Answer : D

Explanation

All of the above options are correct.

Q 4 - Which of the following is correct about 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.

Answer : D

Explanation

All of the above options are correct.

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

A - Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS 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.

Answer : D

Explanation

All of the above options are correct.

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

Answer : C

Explanation

Both of the above options are correct.

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

Answer : C

Explanation

Both of the above options are correct.

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.

Answer : D

Explanation

All of the above options are correct.

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

Answer : C

Explanation

Both of the above options are correct.

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.

Answer : D

Explanation

All of the above options are correct.

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

Answer : A

Explanation

If you want a nice, basic table style with just some light padding and horizontal dividers, add the base class of .table to any table.

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

Answer : B

Explanation

By adding the .table-striped class, you will get stripes on rows within the <tbody>.

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

Answer : C

Explanation

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table.

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

Answer : D

Explanation

By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them.

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

Answer : A

Explanation

.active − Applies the hover color to a particular row or cell.

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

Answer : B

Explanation

.success − Indicates a successful or positive action.

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

Answer : C

Explanation

.warning − Indicates a warning that might need attention.

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

Answer : D

Explanation

.danger − Indicates a dangerous or potentially negative action.

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

A - .table-responsive

B - .responsive

C - .active

D - .table

Answer : A

Explanation

By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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.