Daily updated all Upwork Test Answers, Cover Letter Samples, Interview Tips etc: Bootstrap Test Answer 2019

1. Which of the following will set a modal window to be closed when the escape key is pressed?

Answers:

• Setting the option «backdrop» to true

• Setting the option «backdrop» to static

• Setting the option «keyboard» to true

• Setting the option «escape» to true

2. Which of the following statements are correct with regards passing options?

A) Options can be passed via data attributes or JavaScript.

B) For data attributes, the option name has to be appended to option-, as in option-animation=»».

C) For data attributes, the option name has to be appended to data-, as in data-animation=»».

D) Options can be passed only via JavaScript.

Answers:

• A and B

• A and D

• С

• A and C

3. Which of the following components is used to indicate the current page’s location within a navigational hierarchy?

Answers:

• navs

• breadcrumbs

• pagination

• navbar

• progress bars

4. What does the following HTML code do? <span class=»caret»></span>

Answers:

• It generates a close icon for dismissing content like modals and alerts.

• It utilizes the micro clearfix.

• It indicates dropdown functionality and direction.

• It indicates back button functionality.

5. Which of the following classes will make tables scroll up horizontally when width of the view is under 768px?

Answers:

• .table

• .table-striped

• .table-condensed

• .table-responsive

• .table-scrollable

6. Which of the following colors is the default hover background color of the table row?

Answers:

• #f9f9f9

• #f5f5f5

• #ddd

• #66afe9

7. Which of the following is not a Bootstrap component?

Answers:

• Glyphicons

• Breadcrumbs

• Dropdowns

• Pivottable

8. Which of the following is the correct description of the given table? <table class=»table»> … </table>

Answers:

• It has light padding and only horizontal dividers with an enabled hover state on table rows within a <tbody>.

• It has zebra-striping enabled on any table row within the <tbody>,

• It has light padding and only horizontal dividers.

• It is compacted by cutting cell padding in half.

9. Which of the following will correctly call a dialog prompt?

Answers:

• $(‘#myModal’).modal()

• $(‘#myModal’).modal({ keyboard: false })

• $(‘#myModal’).modal(‘show’)

• All of these

10. How many validation styles for states of on-form controls does Bootstrap have?

Answers:

• 6

• 5

• 4

• 3

11. Which of the following are not options of the method $().tooltip(options)?

Answers:

• animation

• delay

• backdrop

• show

12. Which of the following LESS variables does not belong to the Navbar component?

Answers:

• @navbar-margin-bottom

• @navbar-border-radius

• @navbar-padding-horizontal

• @navbar-default-height

13. Which of the following are helper classes?

Answers:

• .close

• .badge

• .caret

• .clearfix

14. Which of the following classes are contextual classes?

Answers:

• .success

• .warning

• .error

• .danger

15. Which of the following are not Bootstrap plugins?

Answers:

• transition

• tocible

• tooltip

• boilerplate

16. Which of the following will set a modal window to not be closed on click?

Answers:

• Setting the option «backdrop» to true

• Setting the option «backdrop» to static

• Setting the option «keyboard» to true

• None of these

17. What is the default amount of time delay between automatically cycling items in a carousel?

Answers:

• 2000

• 3000

• 5000

• None of these

18. What does the following HTML code do? <span class=»badge»>…</span>

Answers:

• It indicates dropdown functionality and direction.

• It utilizes the micro clearfix.

• It highlights new or unread items.

• It extends the entire viewport.

19. Which type of trigger cannot be used with the «delay» option to show and hide a popover?

Answers:

• click

• hover

• focus

• manual

20. Which of the following statements is correct about using the Collapse plugin? A-The Transitions plugin must be included B-The Popover plugin must be included

Answers:

• Statement A is true while Statement B is false

• Statement B is true while Statement A is false

• Both statements are true.

• Both statements are false.

21. What is the correct way to center align text inside the paragraph?

Answers:

• <p class=»text-center»>Center aligned text.</p>

• <p class=»align-text-center»>Center aligned text.</p>

• <p class=»center»>Center aligned text.</p>

• <p class=»centrify»>Center aligned text.</p>

22. How many columns does bootstrap grid have?

Answers:

• 8

• 10

• 12

• 14

23. Which of the following CSS libraries is used in Bootstrap for improved cross-browser rendering?

Answers:

• Base.css

• Pure.css

• Normalize.css

• html5.css

24. The default Bootstrap grid system utilizes ___ columns.

Answers:

• 6

• 9

• 12

• 16

25. Which of the following classes will wrap a page content?

Answers:

• .wrapping

• .wrap

• .wrapper

• .container

26. Which of the following variables is not available for changing the default Scaffolding settings using LESS?

Answers:

• @body-bg

• @text-color

• @base-color

• @link-color

27. Which of the following correctly describes .dropup class functionality?

Answers:

• Trigger dropdown menus above elements on left side

• Trigger dropdown menus above elements on right side

• Trigger dropdown menus under elements

• Trigger dropdown menus above elements

28. Which dynamic style sheet language are supported for Bootstrap?

Answers:

• Less

• Sass

• Both of the above

• None of the above

29. Which of the following sizes is minimum width for .container on the large device?

Answers:

• 640px

• 768px

• 1170px

• 1200px

30. Which of the following meta tags is important to ensure proper rendering and touch zooming?

Answers:

• <meta content=»text»>

• <meta name=»viewport» content=»width=device-width, initial-scale=1″>

• <meta charset=»utf-8″>

• <meta http-equiv=»refresh» content=»30″>

31. Which of the following code can be used to produce sticky footer?

Answers:

• <div class=»footer»>

• <div class=»footer sticked»>

• <div class=»footer navbar-fixed»>

• <div class=»footer navbar-fixed-bottom»>

32. Which tag can be used for quoting blocks of content from another source within your document?

Answers:

• <blockquote>

• <quote>

• <mark>

• None of the above

33. Which of the following HTML doctypes is required by Bootstrap?

Answers:

• <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

• <!DOCTYPE html>

• <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

• <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

• <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

34. What is the default gutter width set by Bootstrap?

Answers:

• 30px

• 20px

• 15px

• None of the above

35. Which of the following tags is using to show keyboard combinations?

Answers:

• <section>

• <code>

• <keyboard>

• <kbd>

36. What is default grid float breakpoint set by Bootstrap?

Answers:

• 568px

• 668px

• 768px

• 468px

37. What is Bootstrap’s global default font-size?

Answers:

• 10px

• 12px

• 14px

• 16px

38. Which of the following are not Bootstrap plugins?

Answers:

• scrollspy

• datepicker

• modal

• tooltip

39. What are mixins?

Answers:

• Mixins allow document authors to define patterns of property value pairs, which can then be reused in other rulesets.

• Mixins are Bootstrap plugins

• Mixins are used in CSS to define the different background effect

• None of the above

40. Which of the following classes makes table looks like «zebra»?

Answers:

• .table-break

• .table-zebra

• .table-strap

• .table-striped

41. Which tool is used to compile Less styles for Bootstrap?

Answers:

• nodejs

• rake

• grant

• grunt

42. Which class can be used for the page header element?

Answers:

• .page-title

• .page-header

• .header

• None of the above

43. Which of the following bootstrap classes can be used to create tabs?

Answers:

• .navigation .navigation-tabs

• .nav .nav-tabs

• .nav-tabs-navigation .nav-tabs-children

• None of the above

44. Which of the following is a valid method in Carousel plugin?

Answers:

• .carousel(‘cycle’)

• .carousel(’round’)

• .carousel(‘left’)

• .carousel(‘right’)

45. Which of the following is not a default Bootstrap grid system class?

Answers:

• xs

• sm

• md

• lg

• xl

46. Which of the following classes is used to make images responsive in Bootstrap?

Answers:

• img-rounded

• img-fluid

• img-thumbnail

• img-circle

47. Which of the following is correct size of image in default media object?

Answers:

• 32×32

• 64×64

• 128×128

• None of these

48. Which of the following classes do not exist?

Note: There may be more than one right answer.

Answers:

• .col-xs-6

• .col-s-6

• .col-md-6

• .col-l-6

• .col-lg-6

49. Which of the following can be used to call a dialog?

Answers:

• $(‘#myModal’).execute();

• $(‘#myModal’).modal();

• $(‘#myModal’).showModal();

• $(‘#myModal’).show-modal();

50. Which class provides a full width container, spanning the entire width of the viewport?

Answers:

• .container-fluid

• .container-fixed

• .container-fullwidth

• .container

51. Which option should be set to make modal window closable on pressing ESC key?

Answers:

• Set the option “keyboard” to true

• Set the option “esc” to true

• Set the option “quit” to true

• None of the above

52. A standard navigation bar is created with:

Answers:

• <nav class=»navigationbar navbar-default»>

• <nav class=»nav navbar»>

• <nav class=»navbar default-navbar»>

• <nav class=»navbar navbar-default»>

53. Which plugin is used to create a modal window?

Answers:

• Modal

• Dialog Box

• Window

• Popup

54. Which of the following LESS variables does not exist?

Answers:

• @placeholderText

• @inputDisabledBackground

• @inputBorderColor

• @inputBorder

55. Which of the following is the correct way to do the pagination with Bootstrap?

Answers:

• <nav aria-label=»Page navigation»>

</ul>

</nav>

• <nav aria-label=»Page navigation»>

</ul>

</nav>

• <nav aria-label=»Page navigation»>

</ul>

</nav>

• None of the above

56. What is the right way to place link into alert box?

Answers:

• <div class=»alert alert-warning»>

Warning! <a href=»#»>Read documentation.</a>

</div>

• <div class=»alert alert-warning alert-highlight-links»>

Warning! <a href=»#»>Read documentation.</a>

</div>

• <div class=»alert alert-warning»>

Warning! <a href=»#» class=»alert-link»>Read documentation.</a>

</div>

• <div class=»alert alert-warning»>

Warning! <a href=»#» class=»alert-warning-link»>Read documentation.</a>

</div>

57. Which of the following LESS variables does not belong to the Navbar component?

Answers:

• @navbar-margin-bottom

• @navbar-border-radius

• @navbar-padding-horizontal

• @navbar-default-height

58. Which of these following statements are true?

Note: There may be more than one right answer.

Answers:

• Prefix `col-xs-` is using for phone devices

• Prefix `col-md-` is using for tablet devices

• Prefix `col-dt-` is using for desktops

• Prefix `col-lg-` is using for large desktops (≥1200px)

59. Can Bootstrap badges be used inside other elements?

Answers:

• Yes

• No

60. How to attach navbar to top of window which scrolls away with the page?

Answers:

• <nav class=»navbar navbar-default navbar-attach-top»></nav>

• <nav class=»navbar navbar-default navbar-static-top»></nav>

• <nav class=»navbar navbar-default navbar-fixed-top»></nav>

• <nav class=»navbar navbar-default navbar-scrollable-top»></nav>

61. How to wrap series of buttons?

Answers:

• <div class=»btn-group-set»>

</div>

• <button class=»btn btn-default btn-group-item»>One</button>

• <div class=»btn-group»>

</div>

• <div class=»btn-wrap»>

</div>

62. What is the right way to center ⅓ (1/3) block by using Bootstrap grid system?

Answers:

• <div class=»row col-center»>

I’m centered!

</div>

• <div class=»row»>

I’m centered!

</div>

• <div class=»row»>

I’m centered!

</div>

• <div class=»row»>

I’m centered!

</div>

63. How can you insert a search icon?

Answers:

• <span class=»glyphicon glyphicon-search»></span>

• <span class=»glyph glyph-search»></span>

• <span class=»glyphicon-search»></span>

• <span class=»glyphicon search»></span>

64. How to display block only for extra small devices?

Answers:

• .visible-xs-*

• .show-xs-*

• .display-xs-*

• .only-xs-*

65. What is «sr-only» class needed for in Bootstrap?

Answers:

• the class is used to hide only service rules

• the class is used to show only service rules

• the class is used to show information intended only for screen readers from the layout of the rendered page

• the class is used to hide information intended only for screen readers from the layout of the rendered page

66. Which of the following classes makes paragraph stand out?

Answers:

• .stand

• .lead

• .stand-out

• .lead-out

67. When we are adding .img-responsive class to an image, which of the following CSS-properties are applied on that image?

Note: There may be more than one right answer.

Answers:

• height: 100vh

• display: block

• max-width: 100%

• min-height: 100%

68. Bootstrap grid system is based on how many columns?

Answers:

• 3

• 12

• 6

• 9

69. Which of the following classes will make table responsive?

Answers:

• .table-scrollable

• .table-condensed

• .table-responsive

• .table-striped

70. Which class provides a responsive fixed width container?

Answers:

• .container-fixed

• .container-fluid

• .container

• .container-fullwidth

71. Which of the following tags will cross out the word?

Note: There may be more than one right answer.

Answers:

• <s>

• <del>

• <strike>

• <ins>

72. Which of the following command is valid to display modal window?

Answers:

• $(‘#welcome-message’).modal(‘display’);

• $(‘#welcome-message’).modal(‘show’);

• $(‘#welcome-message’).modal(‘open’);

• $(‘#welcome-message’).modal(‘render’);

73. Which is the correct way to create full-width layout with two columns ⅓ (1/3) and ⅔ (2/3) on all devices?

Answers:

• <div class=»container»>

</div>

• <div class=»container-fluid»>

</div>

• <div class=»container»>

</div>

• <div class=»container-fluid»>

</div>

74. Which of the following CSS code can be used to add asteriks to required fields in a form?

Answers:

• .form-group.required .control-label:after {

content:»*»;

color:red;

}

• .form-group:required{

content:»*»;

color:red;

}

• .form-group:after{

content:»*»;

color:red;

}

• None of the above

75. Which of the following is not a Bootstrap component?

Answers:

• Tag

• Script

• Collapse

• Card

76. Which contextual class indicates a successful or positive action?

Answers:

• .text-success

• .text-info

• .text-warning

• .text-primary

77. Which of the following bootstrap classes can be used to create navigation bar?

Answers:

• .navbar .navbar-default

• .navigation-bar .navigation-bar-default

• .nb .nb-default

• None of the above

78. Which class is used to create a black navigation bar?

Answers:

• .navbar-inverse

• .navbar-black

• .navbar-default

• .navbar-dark

79. Which class adds a heading to a panel?

Answers:

• .panel-header

• .panel-footer

• .panel-head

• .panel-heading

80. Which of the following bootstrap style is used to create a .navbar that scrolls with the page?

Answers:

• .navbar-static-top

• .navbar-fixed

• .navbar-fixed-top

• None of the above.

81. Which of the following bootstrap classes can be used to create an animated progress bar?

Answers:

• .progress-active

• .active

• .progress-striped

• None of the above.

82. What is the size of Bootstrap h1 header?

Answers:

• 34px

• 36px

• 38px

• 40px

83. How to create a progress bar using Bootstrap 3?

Answers:

• <div class=»progress-bar»>

</div>

• <div class=»progress»>

</div>

• <div class=»progress»>

</div>

• <div class=»progress-bar» style=»width: 60%;»>60%</div>

84. Which class indicates uppercased text?

Answers:

• .text-capitalize

• .ucase

• .text-uppercase

• .uppercase

85. Which contextual class indicates a dangerous or potentially negative action?

Answers:

• .text-warning

• .text-info

• .text-primary

• .text-danger

86. What icon package is officially included in Bootstrap?

Answers:

• Flaticon

• Plusicons

• Font-awesome

• Glyphicons

87. Why Normalize.css is used in Bootstrap framework?

Answers:

• To optimize the size of Bootstrap source files

• To improve cross-browser rendering

• To import google fonts directly to Bootstrap css

• None of the above

88. A standard navigation tab is created with:

Answers:

• <ul class=»nav tabs»>

• <ul class=»navigation-tabs»>

• <ul class=»nav nav-navbar»>

• <ul class=»nav nav-tabs»>

89. True or False:-

«Use of data attributes from multiple plugins on the same element is not recommended.»

Answers:

• True

• False

90. Which of the following will correctly call collapse?

Note: There may be more than one right answer.

Answers:

• $(‘#myCollapsible).collapse()

• $(‘#myCollapsible).collapse(‘fade’)

• $(‘#myCollapsible).collapse({ toogle: false })

• All of these

91. Which of the following is not a Bootstrap plugin?

Answers:

• Tab

• Tooltip

• Popover

• Menubox

92. Which plugin is used to create a tooltip?

Answers:

• Dialog Box

• Modal

• Tooltip

• Popup

93. Can Bootstrap plugins be included individually?

Answers:

• Yes

• No

• Yes, but only Tab and Tooltip

• No, except Modal

94. Which plugin is used to cycle through elements, like a slideshow?

Answers:

• Orbit

• Scrollspy

• Slideshow

• Carousel

95. Which of the following are valid events in Toggle plugin?

Note: There may be more than one right answer.

Answers:

• fade.bs.dropdown

• shown.bs.dropdown

• show.bs.dropdown

• hide.bs.dropdown

96. How many methods scrollspy plugin has?

Answers:

• 1

• 2

• 3

• 4

97. Which of the following class prefixes are used for tablets?

Answers:

• col-md

• col-sm

• col-lg

• col-xs

98. What is the right way to create checkbox with using Bootstrap?

Answers:

• <label class=»checkbox»>

Accept terms

</label>

• <div class=»checkbox»>

<label>

Accept terms

</label>

</div>

• <div class=»checkbox»>

<label>Accept terms</label>

</div>

• <div class=»checkbox»>

<label>Accept terms</label>

</div>

99. Which class is used to create a button group?

Answers:

• .btn-group

• .button-group

• .group-button

• .group-btn

100. Which of the following is the default value of @btnBackground?

Answers:

• @red

• @white

• @dark

• @black

101. Which of the following is the correct description about .offset* class?

Note: There may be more than one right answer.

Answers:

• It`s off column and save place.

• It`s off column and not save place.

• It`s increase right margin in column.

• It`s increase left margin in column.

102. Which of these list types exist in Bootstrap?

Note: There may be more than one right answer

Answers:

• .list-aligned

• .list-unstyled

• .list-inline

• .list-block

103. Which of the following classes can be used to make a form inline?

Answers:

• .make-form-inline

• .form-inline

• .inline-form-element

• None of the above

104. Which Bootstrap class is used to create responsive tables?

Answers:

• table-responsive

• table-bootstrap

• responsive-table

• bootstrap-table

105. Which button class is used to create a large button?

Answers:

• .btn-lg

• .btn-large

• .btn-l

• .btn-xl

106. Which of the following colors is the default color for progress bar?

Answers:

• #286090

• #cc2929

• #167ac6

• None of the above.

107. Which tag can be used to highlight the text?

Answers:

• <tag>

• <span>

• <hover>

• <mark>

108. What is the use of media queries in CSS and in Bootstrap?

Answers:

• To specify the size of the browser view

• To specify which media files can be loaded on the page

• To move, show and hide content based on the viewport size

• None of the above

109. What will be the color of the button with btn-primary class?

Answers:

• Blue

• Red

• White

• Black

110. How to wrap form set of label and input?

Answers:

• .form-set

• .form-group

• .from-element

• .form-item

111. Which class is used to create a big box for calling extra attention?

Answers:

• .bigbox

• .jumbotron

• .container

• .attention

112. What is the right way to create page header with subtext inside?

Answers:

• <h1 class=»page-header»>Ruby on Rails <small>by Matz</small></h1>

• <h1 class=»page-header»>Ruby on Rails <small class=»header-subtext»>by Matz</small></h1>

• <div class=»page-header»>

<h1>Ruby on Rails <small>by Matz</small></h1>

</div>

• <div class=»page-header»>

<h1>Ruby on Rails <small class=»header-subtext»>by Matz</small></h1>

</div>

113. Which of the following LESS variables related for buttons?

Answers:

• @btnFailBackground

• @btnDangerBackground

• @btnInfoColor

• @btnDangerColor

114. The typographic scale in Bootstrap is based on which of the following Less variables:

Note: There may be more than one right answer.

Answers:

• @font-size-base

• @font-size-var

• @line-height-base

• @line-height-var

115. Which of the following LESS variables can be used to define your own number of columns in the grid?

Answers:

• @grid-columns

• @bootstrap-columns

• @default-columns

• @boostrap-grid

116. Which of the following button classes do not exist?

Note: There may be more than one right answer.

Answers:

• .btn-default

• .btn-primary

• .btn-secondary

• .btn-warning

• .btn-error

117. Which of the following image helpers do not exist?

Answers:

• .img-rounded

• .img-circle

• .img-bordered

• .img-thumbnail

118. Which of the following class can be used to create a breadcrumb?

Answers:

• .menu

• .navbar

• .items

• .breadcrumb

119. How to create block level button which span all width of its parent element?

Answers:

• .btn-wide

• .btn-full

• .btn-container

• .btn-block

120. How to flush left and right sides of text using Bootstrap?

Answers:

• .text-justify

• .text-nowrap

• .text-flush

• .text-align-left-right

121. Which class adds zebra-stripes to a table?

Answers:

• .table-zebra

• .table-bordered

• .even and .odd

• .table-striped

122. Is it possible to change the shape of image file?

Answers:

• Yes

• Only visual output can be changed

• Yes, but it works only with PNG and JPG images

• No

123. When you are using Active tabs which of the following codes is correct to Select tab by name?

Answers:

• $(‘#myTab li:eq(2) a’).tab(‘show’);

• $(‘#myTab a:first’).tab(‘show’);

• $(‘#myTab a[href=”#profile”]’).tab(‘show’);

• $(‘#myTab a:last’).tab(‘show’);

124. Responsive utilities are currently only available for block and table toggling in the following classes:

Answers:

• .visible-sm-block : Small devices (more than 767px and less than 992px in width) visible

• .visible-md-block : Medium devices (up to 768px in width) visible

• .visible-md-block : Medium devices (768px to 980px in width) visible

• .visible-lg : Larger devices (992px and above in width) visible

125. What will happen if viewport with resolution of 500×800 rotates to landscape of the site which uses the custom build of bootstrap?

Answers:

• items with class ‘.visible-xs-*’ will hide

• Result depends on Less configuration

• items with class ‘.visible-md-*’ will stay hidden

• items with class ‘.visible-lg-*’ will stay hidden

126. What scaffolding variables are available to use in classic CSS to override default values?

Answers:

• body-bg, gray-dark, brand-primary, link-hover-color, link-hover-decoration

• It’s not possible to override Less variables in a classic CSS file.

• body-bg, text-color, link-color, link-hover-decoration, link-hover-color

• gray-dark and brand-primary

127. What preprocessor is used to build Bootstrap?

Answers:

• LESS

• SASS

• TcSS

• TwitterCSS

128. Is it possible to change table’s outline color using provided Less variables?

Answers:

• No, because it’s not possible to change Less configuration. It’s used only by core Bootstrap developers.

• Yes, using `table-border-color` variable

• Yes, using `table-outline-color` variable

• Not possible

129. Which of the following variables is not available for changing the default settings using LESS?

Answers:

• @body-bg

• @text-color

• @base-color

• @link-color

130. What code is used to create navigation?

Note: There may be more than one right answer.

Answers:

• <ul class=»nav nav-pills»>…</ul>

• <ul class=»dropdown-menus»>…</ul>

• <ul class=»navigation»>…</ul>

• <ul class=»nav nav-dropdowns»>…</ul>

• <ul class=»nav nav-tabs»>…</ul>

• <ul class=»nav nav-tabs-with-dropdown»>…</ul>

• <ul class=»menu»></ul>

131. What flexbox model css options can be used together with bootstrap?

Answers:

• None. Bootstrap does not support flexbox yet.

• only class `row-flex` and `column-flex`

• Any

• flexbox is provided by 3rd party libraries and can not be used together with bootstrap

132. Bootstrap provides the following classes that can be used to apply some simple styles to images? (choose all that apply)

Note: There may be more than one right answer.

Answers:

• .img-thumbnail: adds a bit of padding and a gray border

• .img-rounded: adds border-radius: 6px to give the image rounded corners

• .img-circle: makes the entire image round by adding border-radius: 50%

• .img-rounded: adds border-recat: 6px to give the image react corners

• .img-circle: makes the entire image radius by adding border-rounded

133. What CSS class is needed to display form inputs one after the other in single row?

Answers:

• `form-inline-mobile` if viewport is smaller than 768px in width

• `form-inline` if viewport is at least 768px wide

• `form-inline-desktop` if viewport is at least 768px wide

• `form-as-row` if viewport is at least 768px wide

• `form-in-row` if viewport is at least 768px wide

• Can’t be done because Bootstrap is mobile first and on mobile form elements are displayed in columns

134. What media queries breakpoints are available as Less options to make better UI for mobile devices? (choose all that apply)

Note: There may be more than one right answer.

Answers:

• width-medium

• media-query-mobile

• screen-xs

• screen-phone

• small-up

• None of these

135. Is it possible to disable zooming on mobile devices while using Bootstrap?

Answers:

• No, bootstrap is mobile-first and mobile sites must have ability to zoom in or out

• Yes, but you must have enabled JS and add `data-zoom=»off»` on body tag

• Zoom will be disabled only if `width=device-width` is in meta tag with `name=»viewport»`

• Zoom will be disabled only if `initial-scale=1, maximum-scale=1` is in meta tag with `name=»viewport»`

136. Is it possible to hide something from print view just using Bootstrap CSS classes?

Answers:

• No, JavaScript plugins are needed to hide elements before sending view to printer.

• Yes

• Yes, just add `visible-print` class to html element

• No

137. Is it possible to create a responsive image?

Answers:

• Yes, using helper class: `responsive`

• Yes, using class: `img-responsive`

• Yes, using class `img-responsive` but it will require JavaScript plugins enabled

• Yes, using class `img-rounded` so it’s width will be rounded to closest integer by width of viewport

• yes, using class `img-fluid`

• Yes, using class `image-responsive`

• None of these

138. Bootstrap provides a basic page structure with __ System

Answers:

• Grid

• Navs

• Breadcrumbs

• Forms

139. The following event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete):

Answers:

• $(‘#Tooltipexample’).on(‘shown.bs.tooltip’,

function () {

// do something…

})

• $(‘#Tooltipexample’).on(‘hide.bs.tooltip’,

function () {

// do something…

})

• $(‘#Tooltipexample’).on(‘activate.bs.scrollspy’,

function () {

// do something…

})

• $(‘#Tooltipexample’).on(‘hidden.bs.tooltip’,

function () {

// do something…

})

• $(‘#Tooltipexample’).on(‘show.bs.tooltip’,

function () {

})

140. How can you create disabled link in the Nav component?

Answers:

• <ul class=»nav nav-pils»>

<li><a href=»#»>About Page</a></li>

<li><a href=»#»>Service Page</a></li>

<li class=»disables»><a href=»#»>Contact Page</a></li>

</ul>

• <ul class=»nav-pills»>

<li><a href=»#»>About Page</a></li>

<li><a href=»#»>Service Page</a></li>

<li class=»false»><a href=»#»>Contact Page</a></li>

</ul>

• <ul class=»nav-pills»>

<li><a href=»#»>About Page</a></li>

<li><a href=»#»>Service Page</a></li>

<li class=»disable»><a href=»#»>Contact Page</a></li>

</ul>

• <ul class=»nav nav-pills»>

<li><a href=»#»>About Page</a></li>

<li><a href=»#»>Service Page</a></li>

<li class=»disabled»><a href=»#»>Contact Page</a></li>

</ul>

141. How does Bootstrap grid work?

Answers:

• It’s done with flexbox, you just use props like `flex=»1″` and `alignItems=»center»`

• Bootstrap provides custom classes to make grid. `row` for rows and `span1, span2, span3 etc.` for columns.

• Bootstrap provides custom classes to make grid. `row` for rows and `col-md-3, col-lg-12 etc.` for columns.

• Bootstrap provides custom classes to make grid. `row` for rows and `col-mobile-3, col-tablet-12 etc.` for columns.

142. What is Jumbotron?

Answers:

• Such thing does not exist in bootstrap, it’s some word used to describe big TV sets

• It’s element to showcase key content

• It’s container element to hold grid layout

• It’s container element to hold images in full-screen mode

143. What will happen if sr-only class is added to some div element?

Answers:

• div will be visible only for small resolution devices

• div will be visible only for screen readers

• div will slide only to right side

• div will only stay on right side of screen

144. What is true about icons in Bootstrap?

Answers:

• Bootstrap don’t provide icons out of the box, but it’s possible to use material design, font awesome or any other icons set together with bootstrap.

• If icon is needed after the text of div, icon can be added simply like this: `<div class=»glyphicon glyphicon-search»>Search</div>`

• Icon classes can be directly combined with any other elements.

• Icon classes should be used only with empty elements

• None of these

145. The Bootstrap grid system has the following class prefixes? (choose all that apply)

Note: There may be more than one right answer.

Answers:

• col-lg-

• col-sm-

• col-em-

• col-xs-

• col-sx-

146. What options are available during initialization of carousel?

Note: There may be more than one right answer.

Answers:

• data-interval

• interval

• key

• active

• data-active

• cycle

• pause

147. What browsers are supported?

Answers:

• All browsers are supported.

• All versions of Chrome, Firefox, Opera, IE and Safari.

• Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are partly supported.

• Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are supported only with old IE compatibility modes.

148. The affix plugin toggles among the following classes? (choose all that apply)

Note: There may be more than one right answer.

Answers:

• .affix

• affix-bottom

• .affix-top

• None of the above

149. What is Twitter Bootstrap?

Answers:

• It’s CSS API to build user interfaces while prototyping

• It’s HTML, CSS and JavaScript framework to build user interfaces

• It’s JS and ECMAScript framework which allows quick CSS changes

• It’s part of Twitter UI API

• It’s new way to build interfaces

150. What is needed to be used to make marked text?

Note: There may be more than one right answer.

Answers:

• Add class `mark` to some html tag

• with <mark> html tag

• Add class `marked` to some html tag

• Add class `is-marked` to some html tag

• Add class `marked-text` to some html tag

151. What are options to make font weight bolder than in parent element?

Note: There may be more than one right answer.

Answers:

• Add class `bold`

• Use HTML `bold` tag

• Use HTML `strong` tag

• Use HTML `b` tag

• Add class `strong`

• None of these

152. Which of these font-icon libraries is included in Bootstrap 3?

Answers:

• Fontello

• FontAwesome

• Glyphicons

• IcoMoon

153. What is needed to create menu which changes active menu item while scrolling contents of div

Answers:

• <ul class=»nav» id=»top_navigation»><li id=»part-1″>part 1</li><li id=»part-2″>part 2</li></ul> and contents must be wrapped with such div: <div data-menu=»top_navigation»><div id=»part-1″>contents</div><div id=»part-2″>contents</div></div>

• Scroll spy can be used which is JS plugin

• You will need some 3rd party lib to make it happen. E.g. jQuery or ReactJS

• Just add navigation with e.g. `data-rel=»navigation»` attribute and same div with `data-rel-bind=»navigation»`

Daily updated all Upwork Test Answers, Cover Letter Samples, Interview Tips etc

A to Z View - All Upwork Test Answers

Bootstrap Test Answer 2019

No comments:

Post a Comment