Category: BOOTSTRAP MCQs

BOOTSTRAP Multiple Choice Questions :-

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

2. Which of the following class applies the hover color to a particular row or cell of a table?
A. active
B. success
C. warning
D. danger

3. Which of the following bootstrap style of button indicates caution should be taken with this action?
A. btn-warning
B. btn-danger
C. btn-link
D. btn-info

4. Which of the following bootstrap style helps to combine sets of <div class=”btn-group”> into a <div class=”btn-toolbar”> for more complex components?
A. btn-group
B. btn-toolbar
C. btn-group-lg
D. btn-group-vertical

5. Which of the following bootstrap styles are used to create a vertical pills navigation?
A. nav, .nav-tabs
B. nav, .nav-pills
C. nav, .nav-pills, .nav-stacked
D. nav, .nav-tabs, .nav-justified

6. Which of the following bootstrap style can be used to to get different size items of .pagination?
A. lg, .sm
B. pagination-lg, .pagination-sm
C. menu-lg, .menu-sm
D. None of the above.

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

8. 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.
Explanation
Both of the above options are correct.

9. Which of the following is correct about 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 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 anhref with a valid URL is added, it will load that content.

10. Which of the following is correct about data-trigger Data attribute of popover Plugin?
a) Sets the default title value if the title attribute isn’t present.
b) Defines how the popover is triggered.
c) Defines default content value if data-content attribute isn’t present
d) Delays showing and hiding the popover in ms.

11.Which class indicates a dropdown menu?
a) .dropdown-list
b) .select
c) .dropdown

12. A standard navigation tab is created with:
a) <ul class=”navigation-tabs”>
b) <ul class=”nav tabs”>
c) <ul class=”navnav-tabs”>
d) <ul class=”navnav-navbar”>

13. A standard navigation bar is created with:
a. <nav class=”navnavbar”>
b. <nav class=”navbar default-navbar”>
c. <nav class=”navbar navbar-default”>
d. <nav class=”navigationbarnavbar-default”>

14. Which class is used to create a black navigation bar?
a. .navbar-default
b. .navbar-black
c. .navbar-dark
d. .navbar-inverse

15. Which plugin is used to cycle through elements, like a slideshow?
a. orbit
b. slideshow
c. scrollspy
d. carousel

16. Which plugin is used to create a modal window?
a. modal
b. window
c. dialog Box
d. popup

17. Which plugin is used to create a tooltip?
a. popup
b. tooltip
c. modal
d. dialog Box

18. Ques. Bootstrap’s grid system allows up to
a. 6 columns across the page
b. 12 columns across the page
c. columns across the page
d. columns across the page

19. Default size of H5 bootstrap heading
a. 14px
b. 16px
c. 18px
d. 20px

20. The .container-fluid class provides
a. Fixed width container
b. Table format
c. To create a Form
d. Full width container

21. Which one is the bootstrap JS CDN url
a. <script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”&gt;
b. <script src=”http://cdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”&gt;
c. <script src=”http://maxcdn.bootstrap.com/bootstrap/3.2.0/js/bootstrap.min.js”&gt;
d. <script src=”http://max.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”&gt;

22. Which of the following class makes round corner image for automatically adjust to fit the size of the screen?
a. .img-res-image
b. .img-responsive-image
c. .img-responsive
d. .img-res

23. Containers are nestable
a. TRUE
b. FALSE

24. Medium devices are defined as having a screen width from
a. 900 pixels to 1000 pixels
b. 768 pixels to 991 pixels
c. 992 pixels to 1199 pixels
d. 512 pixels to 2048 pixels

25. Which of the following class makes round corner image
a. .img-rounded
b. .img-round-corner
c. .img-rnd
d. .img-circle

26. The .container class provides
a. Full width container
b. Fixed width container
c. Table format
d. To create a Form

27. Glyphicons used for
a. using different icons like badge
b. using slideshow
c. using animation
d. using favicon

28. Using the Bootstrap CDN makes:
a. Slows the connection
b. Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time
c. Will make extra http connection
d. None

29. Which class creates pagination?
a. pagination
b. pager
c. pagination-link
d. link-pagination

30. Default size of H3 bootstrap heading
a. 18px
b. 30px
c. 26px
d. 24px

31. In Bootstrap Small devices are defined as having a screen width from
a. 512 pixels to 1024 pixels
b. 256 pixels to 1024 pixels
c. 700 pixels to 900 pixels
d. 768 pixels to 991 pixels
Ans: D

32. Which class creates list of items?
a. lst-group
b. list-group
c. menu-group
d. list-grp
Ans: B

33. Bootstrap’s global default line-height
a. 1.128
b. 1.428
c. 1.228
d. 1.8
Ans: B

34. Bootstrap is developed by
a. James Gosling
b. Mark Jukervich
c. Mark Otto and Jacob Thornton
d. None of them
Ans: C

35. Bootstrap is a free front-end framework
a. TRUE
b. FALSe
Ans: A

36. In Grid move columns to the right using
a. .col-md-left-*
b. .col-md-margin-*
c. .col-md-offset-*
d. None of these
Ans: C

37. Default size of H2 bootstrap heading
a. 20px
b. 24px
c. 30px
d. 36px
Ans: C

38. Which class should be used for creating page navigation with Previous and Next.
a. pagination
b. pager
c. nav
d. carousel
Ans: B

39. Large devices are defined as having a screen width from
a. 1000 pixels and above
b. 1100 pixels and above
c. 1200 pixels and above
d. 1024 pixels and above
Ans: C

40. Which is default for a form
a. Horizontal Form
b. Vertical Form
c. Inline Form
d. None of these
Ans: B

41. Change the order of the grid columns with
a. .col-md-front-* and .col-md-back-*
b. .col-md-right-* and .col-md-left-*
c. .col-md-move-right-* and .col-md-move-left-*
d. .col-md-push-* and .col-md-pull-*
Ans: D

42. Default size of H1 bootstrap heading
a. 20px
b. 24px
c. 30px
d. 36px
Ans: D

43. Inthe width=device-width part sets
a. To view in Desktop only
b. The width of the page to follow the screen-width of the device (which will vary depending on the device)
c. To view for Mobile only
d. None of these
Ans: B

44. Default size of H6 bootstrap heading
a. 10px
b. 12px
c. 14px
d. 16px
Ans: B

45. Which one is the bootstrap CSS CDN url
a. b. c. d. Ans: A

46. What should be used to indicate badge in bootstrap
a. 10
b. 10
c. 10
d. 10
Ans: A

47. Can we create badges inside buttons?
a. Yes
b. No
Ans: A

48. .col-lg provides
a. To make width size
b. To make height size
c. To make width and height both
d. To make character entry size
Ans: A

49. The bootstrap class xs means for
a. phones
b. tablets
c. desktop
d. larger desktops
Ans: A

50. The bootstrap class md means for
a. phones
b. tablets
c. desktop
d. larger desktops
Ans: C

BOOTSTRAP Objective type Questions with Answers

51. The bootstrap class lg means for
a. phones
b. tablets
c. desktop
d. larger desktops
Ans: D

52. What is aspect ratio?
a. The aspect ratio of an image describes the proportional relationship between its height and its width.
b. The aspect ratio of an image describes the proportional relationship between its width and its height.
c. Its height
d. Its width
Ans: B

53. .input-lg provides
a. To make width size
b. To make height size
c. To make width and height both
d. To make character entry size
Ans: B

54. The bootstrap class sm means for
a. phones
b. tablets
c. desktop
d. larger desktops
Ans: B

55. Default size of H4 bootstrap heading
a. 16px
b. 18px
c. 24px
d. 30px
Ans: B

56. The Bootstrap grid system has four classes which defines screen size:
a. s, sm, mid, lg
b. xs, sm, md, lg
c. x, sm, md, lg
d. xs, sml, mid, lg
Ans: B

57. Which of the following class makes thumbnail image
a. .img-tmbnail
b. .img-thumbnail-image
c. .img-thumb
d. .img-thumbnail
Ans: D

58. .btn-group class will make button group as
a. Vertical
b. Horizontal
c. Menu
d. Dropdown
Ans: B

59. Inthe initial-scale=1 part sets
a. To make zoom in Mobile only
b. To make zoom in Desktop only
c. initial zoom level when the page is first loaded by the browser
d. None of these
Ans: C

60. Which class to be used to create a button as a link in bootstrap
a. .btn-hyperlink
b. .btn-link
c. .btn-url
d. .btn-anchor
Ans: B

61. Which class should be used to indicate a button group?
a. btn-group-buttons
b. btn-group
c. btn-grp
d. btn-buttons
Ans: B

62. Bootstrap’s global default font-size is
a. 10px
b. 12px
c. 13px
d. 14px
Ans: D

63. What is the button class to indicate danger
a. .btn-info
b. .btn-danger-button
c. .btn-danger
d. .btn-warning
Ans: C

64. Which of the following class makes circle image
a. .img-circle-corner
b. .img-crl
c. .img-circle
d. .img-clr
Ans: C

65. The Carousel plugin is a component
a. For getting lot of icons
b. For cycling through elements like slideshow
c. For animation
d. None of these
Ans: B

66. In Bootstrap we can addfor
a. Proper Rendering and Zooming in mobile
b. Make SEO
c. Make proper view of labels
d. None
Ans: A

67. Stacked-to-horizontal grid becomes
a. horizontal on desktops
b. horizontal on mobiles/tablets
c. horizontal on all devices
d. stacked on all devices
Ans: B

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

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

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

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

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

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

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

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

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

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

78. Which of the following class styles a table as a nice basic table with just some light padding and horizontal dividers?
A.table
B.table-striped
C.table-bordered
D.table-hover

79. Which of the following class styles a table as a nice basic table with stripes on rows?
A.table
B.table-striped
C.table-bordered
D.table-hover

80. Which of the following class styles a table with borders surrounding every element and rounded corners around the entire table?
A.table
B.table-striped
C.table-bordered
D.table-hover

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

82. Which of the following class applies the hover color to a particular row or cell of a table?
A.active
B.success
C.warning
D.danger

83. Which of the following class indicates a successful or positive action?
A.active
B.success
C.warning
D.danger

84. Which of the following class indicates a warning that might need attention?
A.active
B.success
C.warning
D.danger

85. Which of the following class indicates a dangerous or potentially negative action?
A.active
B.success
C.warning
D.danger

86. Which of the following class can be used to create a responsive table?
A.table-responsive
B.responsive
C.active
D.table

87. Which of the following is the default layout of a bootstrap form?
A.vertical
B.inline
C.horizontal
D. None of the above.

88. Which of the following class is required to be added to form tag to make it inline?
A.inline
B.form-inline
C.horizontal
D. None of the above.

89. Which of the following class is required to be added to form tag to make it horizontal?
A.horizontal
B.form-horizontal
C.horizontal
D. None of the above.

90. Which of the following is true about bootstrap help text?
A. Bootstrap form controls can have a block level help text that flows with the inputs.
B. To add a full width block of content, use the .help-block after the <input>
C. Both of the above.
D. None of the above.

91. Which of the following bootstrap style of button creates a default/ standard button?
A.btn
B.btn-primary
C.btn-success
D.btn-info

92. Which of the following bootstrap style of button provides extra visual weight and identifies the primary action in a set of buttons?
A.btn
B.btn-primary
C.btn-success
D.btn-info

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

94. Which of the following class indicates a warning that might need attention?
A.active
B.success
C.warning
D.danger
Answer : C

95. Which of the following bootstrap style of button indicates caution should be taken with this action?
A.btn-warning
B.btn-danger
C.btn-link
D.btn-info
Answer : A

96. Which of the following bootstrap style of image makes the entire image round by adding border-radius:500px?
A.img-rounded
B.img-circle
C.img-thumbnail
D. None of the above.
Answer : B

97. Which of the following bootstrap styles are used to create a justified tabs navigation?
A.nav, .nav-tabs
B.nav, .nav-pills
C.nav, .nav-pills, .nav-stacked
D.nav, .nav-tabs, .nav-justified
Answer : D

98. Which of the following bootstrap style is used to add standard links to .navbar?
A.navbar-link
B.link
C.form-link
D. None of the above.
Answer : A

99. 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 containerwith the class of .jumbotron.
C. Both of the above.
D. None of the above.
Answer : C