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.

Questions and Answers

Bootstrap Mock Test III

Q 1 - Which of the following bootstrap style is used to add standard links to .navbar?

A - .navbar-link

D - None of the above.

Answer : A

Explanation

If you want to use the standard links that are not within the regular .navbar navigation component, then use the class .navbar-link to add proper colors for the default and inverse .navbar options.

Q 2 - Which of the following bootstrap style is used to align .nav links, forms, buttons, or text to left or right in a .navbar?

A - .navbar-align

B - .navbar-left, .navbar-right

D - None of the above.

Answer : B

Explanation

You can align the components like .nav links, forms, buttons, or text to left or right in a .navbar using the utility classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction.

Q 3 - Which of the following bootstrap style is to be used if you want the .navbar fixed to the top of the page?

A - .navbar-top

B - .navbar-fixed

C - .navbar-fixed-top

D - None of the above.

Answer : C

Explanation

If you want the .navbar fixed to the top of the page, add class .navbar-fixed-top to the .navbar class.

Q 4 - Which of the following bootstrap style is to be used if you want to create a .navbar that scrolls with the page?

A - .navbar-static-top

B - .navbar-fixed

C - .navbar-fixed-top

D - None of the above.

Answer : A

Explanation

To create a .navbar that scrolls with the page, add the ..navbar-static-top class. This class does not require adding the padding to the <body>.

Q 5 - Which of the following bootstrap style is to be used if you want to create an inverted .navbar with a black background and with white text?

A - .navbar-reverse

B - .navbar-inverse

C - .navbar-inverted

D - None of the above.

Answer : B

Explanation

To create an inverted .navbar with a black background and with white text, simply add the .navbar-inverse class to the ..navbar class.

Q 6 - Which of the following bootstrap style is used to create a .breadcrumb?

A - .breadcrumb

D - None of the above.

Answer : A

Explanation

A .breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css).

Q 7 - Which of the following bootstrap style is used to create a .pagination?

A - .breadcrumb

B - .pagination

D - None of the above.

Answer : B

Explanation

.pagination: Add this class to get the .pagination on your page.

Q 8 - Which of the following bootstrap style can be used to customize .pagination links?

A - .disabled, .active

B - .pagination-active, .pagination-disabled

C - .menu-active, .menu-disabled

D - None of the above.

Answer : A

Explanation

You can customize links by using .disabled for unclickable links and .active to indicate the current page.

Q 9 - Which of the following bootstrap style can be used to to get different size items of .pagination?

B - .pagination-lg, .pagination-sm

C - .menu-lg, .menu-sm

D - None of the above.

Answer : B

Explanation

.pagination-lg, .pagination-sm − Use these classes to get different size items.

Q 10 - Which of the following bootstrap style can be used to create a pager on a page?

B - .pagination

D - None of the above.

Answer : A

Explanation

.pager − Add this class to get the pager links.

Q 11 - Which of the following bootstrap style can be used to align .pager buttons?

A - .pager-previous, .pager-next

B - .previous, .next

C - .link-previous, .link-next

D - None of the above.

Answer : B

Explanation

.previous, .next − Use class .previous to left align and .next to right-align the links.

Q 12 - Which of the following bootstrap style can be used to get a muted look on a pager buttons?

A - .pager-disabled

C - .link-disabled

D - None of the above.

Answer : B

Explanation

.disabled − Add this class to get a muted look.

Q 13 - Which of the following is correct about Bootstrap badges?

A - Badges are similar to labels; the primary difference is that the corners are more rounded.

B - Badges are mainly used to highlight new or unread items.

C - To use badges just add <span class="badge"> to links, Bootstrap navs, and more.

D - All of the above.

Answer : D

Explanation

All of the above options are correct.

Q 14 - Which of the following is correct about Bootstrap jumbotron?

A - This component can optionally increase the size of headings and add a lot of margin for landing page content.

B - To use the Jumbotron: Create a container <div> with the class of .jumbotron.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 15 - Which of the following bootstrap styles can be used to create a default progress bar?

A - .progress, .progress-bar

B - .nav-progress

C - .link-progress-bar

D - None of the above.

Answer : A

Explanation

To create a basic progress bar: Add a <div> with a class of .progress. Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

Q 16 - Which of the following bootstrap styles can be used to create progress bars with different styles?

A - .progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger

B - .success, .info, .warning, .danger

C - .progress, .progress-bar

D - None of the above.

Answer : A

Explanation

To create a progress bar with different styles: Add a <div> with a class of .progress. Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

Q 17 - Which of the following bootstrap styles can be used to create a striped progress bar?

A - .progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger

B - .success, .info, .warning, .danger

C - .progress-striped.

D - None of the above.

Answer : C

Explanation

To create a striped progress bar: Add a <div> with a class of .progress and .progress-striped. Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

Q 18 - Which of the following bootstrap styles can be used to create a Animated progress bar?

A - .progress-active

C - .progress-striped.

D - None of the above.

Answer : B

Explanation

To create an animated progress bar: Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

Q 19 - Which of the following bootstrap styles can be used to create a Stacked progress bar?

A - .progress-stacked

C - .progress-stack.

D - None of the above.

Answer : B

Explanation

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

Q 20 - Which of the following is correct about bootstrap media objects?

A - These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content.

B - The goal of the media object is to make the code for developing these blocks of information drastically shorter.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 21 - Which of the following is correct about bootstrap media objects?

A - These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content.

B - The goal of the media object is to make the code for developing these blocks of information drastically shorter.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 22 - Which of the following is correct about bootstrap panels?

A - Panel components are used when you want to put your DOM component in a box.

B - To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 23 - Using which of the following ways you can add header to a panel?

A - Use .panel-heading class to easily add a heading container to your panel.

B - Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Q 24 - Which of the following class can be used to add a footer to a panel?

A - .panel-footer

D - None of the above.

Answer : A

Explanation

You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.

Q 25 - Which of the following is correct about bootstrap wells?

A - A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.

B - To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.

C - Both of the above.

D - None of the above.

Answer : C

Explanation

Both of the above options are correct.

Answer Sheet

Question Number	Answer Key
1	A
2	B
3	C
4	A
5	B
6	A
7	B
8	A
9	B
10	A
11	B
12	B
13	D
14	C
15	A
16	A
17	C
18	B
19	B
20	C
21	C
22	C
23	C
24	A
25	C

bootstrap_questions_answers.htm

Advertisements