- Bootstrap Tutorial
- Bootstrap - Home
- Bootstrap - Overview
- Bootstrap - Environment Setup
- Bootstrap - RTL
- Bootstrap - CSS Variables
- Bootstrap - Color Modes
- Bootstrap Layouts
- Bootstrap - Breakpoints
- Bootstrap - Containers
- Bootstrap - Grid System
- Bootstrap - Columns
- Bootstrap - Gutters
- Bootstrap - Utilities
- Bootstrap - CSS Grid
- Bootstrap Content
- Bootstrap - Reboot
- Bootstrap - Typography
- Bootstrap - Images
- Bootstrap - Tables
- Bootstrap - Figures
- Bootstrap Components
- Bootstrap - Accordion
- Bootstrap - Alerts
- Bootstrap - Badges
- Bootstrap - Breadcrumb
- Bootstrap - Buttons
- Bootstrap - Button Groups
- Bootstrap - Cards
- Bootstrap - Carousel
- Bootstrap - Close button
- Bootstrap - Collapse
- Bootstrap - Dropdowns
- Bootstrap - List Group
- Bootstrap - Modal
- Bootstrap - Navbars
- Bootstrap - Navs & tabs
- Bootstrap - Offcanvas
- Bootstrap - Pagination
- Bootstrap - Placeholders
- Bootstrap - Popovers
- Bootstrap - Progress
- Bootstrap - Scrollspy
- Bootstrap - Spinners
- Bootstrap - Toasts
- Bootstrap - Tooltips
- Bootstrap Forms
- Bootstrap - Forms
- Bootstrap - Form Control
- Bootstrap - Select
- Bootstrap - Checks & radios
- Bootstrap - Range
- Bootstrap - Input Groups
- Bootstrap - Floating Labels
- Bootstrap - Layout
- Bootstrap - Validation
- Bootstrap Helpers
- Bootstrap - Clearfix
- Bootstrap - Color & background
- Bootstrap - Colored Links
- Bootstrap - Focus Ring
- Bootstrap - Icon Link
- Bootstrap - Position
- Bootstrap - Ratio
- Bootstrap - Stacks
- Bootstrap - Stretched link
- Bootstrap - Text Truncation
- Bootstrap - Vertical Rule
- Bootstrap - Visually Hidden
- Bootstrap Utilities
- Bootstrap - Backgrounds
- Bootstrap - Borders
- Bootstrap - Colors
- Bootstrap - Display
- Bootstrap - Flex
- Bootstrap - Floats
- Bootstrap - Interactions
- Bootstrap - Link
- Bootstrap - Object Fit
- Bootstrap - Opacity
- Bootstrap - Overflow
- Bootstrap - Position
- Bootstrap - Shadows
- Bootstrap - Sizing
- Bootstrap - Spacing
- Bootstrap - Text
- Bootstrap - Vertical Align
- Bootstrap - Visibility
- Bootstrap Demos
- Bootstrap - Grid Demo
- Bootstrap - Buttons Demo
- Bootstrap - Navigation Demo
- Bootstrap - Blog Demo
- Bootstrap - Slider Demo
- Bootstrap - Carousel Demo
- Bootstrap - Headers Demo
- Bootstrap - Footers Demo
- Bootstrap - Heroes Demo
- Bootstrap - Featured Demo
- Bootstrap - Sidebars Demo
- Bootstrap - Dropdowns Demo
- Bootstrap - List groups Demo
- Bootstrap - Modals Demo
- Bootstrap - Badges Demo
- Bootstrap - Breadcrumbs Demo
- Bootstrap - Jumbotrons Demo
- Bootstrap-Sticky footer Demo
- Bootstrap-Album Demo
- Bootstrap-Sign In Demo
- Bootstrap-Pricing Demo
- Bootstrap-Checkout Demo
- Bootstrap-Product Demo
- Bootstrap-Cover Demo
- Bootstrap-Dashboard Demo
- Bootstrap-Sticky footer navbar Demo
- Bootstrap-Masonry Demo
- Bootstrap-Starter template Demo
- Bootstrap-Album RTL Demo
- Bootstrap-Checkout RTL Demo
- Bootstrap-Carousel RTL Demo
- Bootstrap-Blog RTL Demo
- Bootstrap-Dashboard RTL Demo
- Bootstrap Useful Resources
- Bootstrap - Questions and Answers
- Bootstrap - Quick Guide
- Bootstrap - Useful Resources
- Bootstrap - Discussion
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 III
Q 1 - Which of the following bootstrap style is used to add standard links to .navbar?
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?
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?
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?
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?
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?
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?
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?
B - .pagination-active, .pagination-disabled
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?
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?
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
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?
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.
Answer : D
Explanation
All of the above options are correct.
Q 14 - Which of the following is correct about Bootstrap jumbotron?
B - To use the Jumbotron: Create a container <div> with the class of .jumbotron.
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?
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
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
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?
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?
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?
Answer : C
Explanation
Both of the above options are correct.
Q 21 - Which of the following is correct about bootstrap media objects?
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.
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.
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?
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?
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 |
To Continue Learning Please Login
Login with Google