Bootstrap - Mock Test

A - Bootstrap's responsive CSS adjusts to Desktops,Tablets and Mobiles.

Answer : D

Explanation

All of the above options are correct.

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

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.

A - Content: Determine what is most important.

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?

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.

A - Rows must be placed within a .container class for proper alignment and padding.

Answer : D

Explanation

All of the above options are correct.

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

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.

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.

Answer : D

Explanation

All of the above options are correct.

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

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.

A - Media query is a really fancy term for "conditional CSS rule".

Answer : D

Explanation

All of the above options are correct.

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

B - It simply applies some CSS, based on certain conditions set forth. If those conditions are met, the style is applied.

A - Media queries have two parts, a device specification and then a size rule.

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?

B - Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size.

A - You need to add the viewport meta tag to the element, to ensure proper rendering and touch zooming on mobile devices.

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?

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.

A - Bootstrap 3 allows you to make the images responsive by adding a class ..img-responsive to the <.img> tag.

Answer : D

Explanation

All of the above options are correct.

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

B - ..img-responsive class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

A - Bootstrap uses Normalize to establish cross browser consistency.

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?

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.

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

Answer : A

Explanation

Vertical or Basic Form: The basic form structure which comes with Bootstrap.

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

A - .inline

B - .form-inline

C - .horizontal

Answer : B

Explanation

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.

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

A - .horizontal

B - .form-horizontal

C - .horizontal

A - Bootstrap form controls can have a block level help text that flows with the inputs.

Answer : B

Explanation

To create a form that uses the horizontal layout, Add a class of .form-horizontal to the parent

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

B - To add a full width block of content, use the .help-block after the <input>.