Q 1 - Which of the following is correct about the data-remote Data attribute of Modal Plugin?

A - It specifies static for a backdrop if you don't want the modal to be closed when the user clicks outside of the modal.
B - It closes the modal when the escape key is pressed; set to false to disable.
C - It shows the modal when initialized.
D - Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is added, it will load that content.

Answer : D
Explanation
data-remote − Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is added, it will load that content.

Q 2 - 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

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 3 - Which of the following bootstrap style of buttons indicates a successful or positive action?

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

Answer: C
Explanation
.btn-success − Indicates a successful or positive action.

Q 4 - Which of the following bootstrap style is used for a basic button group?

A - .btn-group
B - .btn-toolbar
C - .btn-group-lg
D - .btn-group-vertical

Answer: A
Explanation
.btn-group − This class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.

Q 5 - Which of the following bootstrap styles are used to add a dropdown to pills?

A - .nav, .nav-tab, .menu
B - .nav, .nav-pills, .dropdown-.menu
C - .nav, .nav-pills, .dropdown
D - .nav, .nav-pills

Answer: B
Explanation
To add dropdowns to a tab: Start with a basic unordered list with the base class of .nav; Add the class .nav-pills.; Now add an unordered list with a .dropdown-menu class.

Q 6 - 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 7 - 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 8 - Which of the following is correct about the data-title Data attribute of Tooltip Plugin?

A - Sets the default title value if the title attribute isn't present.
B - Defines how the tooltip is triggered.
C - Defines default content value if the data-content attribute isn't present
D - Delays showing and hiding the tooltip in ms.

Answer: A
Explanation
data-title − Sets the default title value if the title attribute isn't present.

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

Q10 - Which of the following bootstrap style of buttons indicates a dangerous or potentially negative action?

A - .btn-warning
B - .btn-danger
C - .btn-link
D - .btn-info

Answer: B
Explanation
.btn-danger − Indicates a dangerous or potentially negative action.

Q11 - Which of the following is correct about the data-animation Data attribute of the Popover Plugin?

A - Applies a CSS fade transition to the popover.
B - Inserts HTML into the popover. If false, jQuery's text method will be used to insert content into the dom.
C - Specifies how to position the popover (i.e., top|bottom|left|right|auto).
D - Delegates to the specified targets.

Answer: A
Explanation
data-animation − Applies a CSS fade transition to the popover.

Q12 - Which of the following is correct about the data-HTML Data attribute of Tooltip Plugin?

A - Applies a CSS fade transition to the tooltip.
B - Inserts HTML into the tooltip. If false, jQuery's text method will be used to insert content into the dom.
C - Specifies how to position the tooltip (i.e., top|bottom|left|right|auto).
D - Delegates to the specified targets.

Answer: B
Explanation
data-HTML − Inserts HTML into the tooltip. If false, jQuery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.

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

A - .breadcrumb
B - .pagination
C - .menu
D - None of the above.

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

Q14 - Which of the following bootstrap styles are used to create a disabled tab in tabs navigation?

A - .nav, .nav-tabs, .disabled
B - .nav, .nav-tabs
C - .nav, .nav-pills, .nav-disabled
D - .nav, .nav-pills

Answer: A
Explanation
For each of the .nav classes, if you add the .disabled class, it will create a gray link that also disables the: hover state.

Q15 - 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
C - .alignment
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.

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

Practice more questions

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

Q16 - Which of the following bootstrap style of buttons makes the button size extra small?

A - .btn-lg
B - .btn-sm
C - .btn-xs
D - .btn-block

Answer: C
Explanation
.btn-xs − This makes the button size extra small.

Q17 - Which of the following bootstrap style of buttons makes the button size large?

A - .btn-lg
B - .btn-sm
C - .btn-xs
D - .btn-block

Answer: A
Explanation
.btn-lg − This makes the button size large.

Q18 - Which of the following is correct about the data-placement Data attribute of the Popover Plugin?

A - Applies a CSS fade transition to the popover.
B - Inserts HTML into the popover. If false, jQuery's text method will be used to insert content into the dom.
C - Specifies how to position the popover (i.e., top|bottom|left|right|auto).
D - Delegates to the specified targets.

Answer: C
Explanation
data-placement − Specifies how to position the popover (i.e., top|bottom|left|right|auto).

Q19 - Which of the following is correct about the Popover Plugin?

A - You can toggle the Popover plugin's hidden content via data attributes.
B - You can toggle the Popover plugin's hidden content via javascript.
C - Both of the above.
D - None of the above.

Answer: C
Explanation
Both of the above options are correct.

Q20 - Which of the following is correct about the data-selector Data attribute of the Popover Plugin?

A - Applies a CSS fade transition to the popover.
B - Inserts HTML into the popover. If false, jQuery's text method will be used to insert content into the dom.
C - Specifies how to position the popover (i.e., top|bottom|left|right|auto).
D - Delegates to the specified targets.

Answer : D
Explanation
data-selector − If a selector is provided, popover objects will be delegated to the specified targets.

Q21 - Which of the following is correct about the data-delay Data attribute of the Tooltip Plugin?

A - Sets the default title value if the title attribute isn't present.
B - Defines how the tooltip is triggered.
C - Defines default content value if the data-content attribute isn't present
D - Delays showing and hiding the tooltip in ms.

Answer : D
Explanation
data-delay − Delays showing and hiding the tooltip in ms, does not apply to manual trigger type. If a number is supplied, the delay is applied to both hide/show.

Q22 - Which of the following bootstrap style makes a set of buttons appear vertically stacked rather than horizontally?

A - .btn-group
B - .btn-toolbar
C - .btn-group-lg
D - .btn-group-vertical

Answer: C
Explanation
.btn-group-vertical − This class makes a set of buttons appear vertically stacked rather than horizontally.

Q23 - Which of the following bootstrap styles can be used to create an Animated progress bar?

A - .progress-active
B - .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.

Q24 - Which of the following bootstrap style is used to add text to the .navbar?

A - .navbar-text
B - .text
C - .form-text
D - None of the above.

Answer: A
Explanation
To wrap strings of text in an element using the class .navbar-text. This is usually used with <p> tag for proper leading and color.

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

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

Answer : D
Explanation
All of the above options are correct.

Q27 - Which of the following is correct about the data-trigger Data attribute of the Tooltip Plugin?

A - Sets the default title value if the title attribute isn't present.
B - Defines how the tooltip is triggered.
C - Defines default content value if the data-content attribute isn't present
D - Delays showing and hiding the tooltip in ms.

Answer: B
Explanation
data-trigger − Defines how the tooltip is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with space.

Q 28 - 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 29 - Which of the following bootstrap style of buttons creates block-level buttons that span the full width of a parent?

A - .btn-lg
B - .btn-sm
C - .btn-xs
D - .btn-block

Answer: D

Q 30 - Which of the following bootstrap style of the image gives the image rounded corners?

A - .img-rounded
B - .img-circle
C - .img-thumbnail
D - None of the above

Answer: A

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

Also Read:

Commonly Asked AngularJS Interview Questions and Answers for Experienced and Freshers

Practice our complete set of quantitative and English