Bootstrap Test Upwork

How can you add a footer to a panel?
By adding .panel-footer class to <div> tag
By adding <footer> tag
By adding <footer> tag with .panel class
By adding div tag with .footer class

Which options below will  make font weight bolder than in the parent element?
Note: There may be more than one right answer.
Add class `bold`
Use HTML `bold` tag
Use HTML `strong` tag
Use HTML `b` tag
Add class `strong`
None of these

Which class can be used to create a responsive table?
.table-responsive
.responsive
.active
.table

Which option is correct in regards to the  Bootstrap Grid System?

Rows must be placed within a .container class for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
All of the above.

Which of the following is the correct CSS class which offsets a div by 2 columns in small viewport?

col-sm-offset-2
col-sm-2-offset
offset-col-sm-2
None of the above

Which of the following is correct about the data-backdrop Data attribute of Modal Plugin?

It specifies static for a backdrop if you don't want the modal to be closed when the user clicks outside of the modal.
It closes the modal when the escape key is pressed; set to false to disable.
It shows the modal when initialized.
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.

Which of the following is correct about a data-html Data attribute of Popover Plugin?

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

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

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

Which class is required to be added to form tag to make it inline?

.inline
.form-inline
.horizontal
None of the above.

 How can you make a text fall flush with both the left and right margins  when it is aligned by the left margin, adjusted letter and word spacing?

Add classes .text-left and .text-right to some tag
Add classes .left and .right to some tag
Add classes .t-left and .t-right to some tag
Add class .text-justify to some tag

Which of the following initializes a Bootstrap modal?

$('#myModal').modal()
$('#myModal').modal({ keyboard: false })
$('#myModal').modal('show')
All of the above

Which of the following are available classes for containers in Bootstrap 3? Check all that apply.
Note: There may be more than one right answer.

container-large
container
container-fluid
container-small

How is an uppercase text made by only using bootstrap's classes?

Add .uppercase class to some text element
It's not possible
Add .text-uppercase class to some text element
Add .all-uppercase class to some text element
Add .t-uppercase class to some text element

Which classes should be used if the number of items inside a tab is required to be shown?

Class .count with some tag wrapping the number
Class .number with some tag wrapping the number
Class .badge with some tag wrapping the number
Class .info with some tag wrapping the number

Which of the following Bootstrap styles of button provides extra visual weight and identifies the primary action in a set of buttons?

.btn
.btn-primary
.btn-success
.btn-info

How is an interactive table made, where the user can hover the row and the row gets different background?

Add .table and .table-interactive classes to <table> tag
Add .table and .table-hover classes to <table> tag
Add .table and .interactive classes to <table> tag
Add .table and .table-modern classes to <table> tag

Which class applies the hover color to a  row or cell of a table?

.active
.success
.warning
.danger

Which Bootstrap style makes a set of buttons appear vertically stacked rather than horizontally?

.btn-group
.btn-toolbar
.btn-group-lg
.btn-group-vertical

How can you make a paragraph stand out?
     By adding .stand class to <p> tag
     By adding .out class to <p> tag
     By adding .bigger class to <p> tag
     By adding .lead class to <p> tag

How are striped rows for the table using bootstrap classes to support IE8+, Chrome, Firefox and Safari made?
     By adding .table class to <table>
     By adding .table and .table-striped classes to <table>
     By adding .table-striped class to <table>
     Not possible

Which of the following should be included inside the head of an html document for proper rendering and touch zooming?
     <meta name="viewports" content="width=device-width, initial-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="viewsport" content="width=device-width, initial-scale=1">
     None of the above

How can you make a smaller text inside an h1 tag?
Note: There may be more than one right answer.
     Wrap some text inside h1 with <small> tag
     Wrap some text inside h1 with <s> tag
     Wrap some text inside h1 with <span> tag and add class .small
     Wrap some text inside h1 with <smaller> tag

How can you make a footer for blockquote?
     By adding <p> tag with class .footer inside blockquote
     By adding <footer> tag inside blockquote
     By adding <p> tag with class .blockquote-reverse inside blockquote
     By adding <cite> tag inside blockquote

Which of the following Bootstrap styles can be used to to get different sized items of .pagination?
     .lg, .sm
     .pagination-lg, .pagination-sm
     .menu-lg, .menu-sm
     None of the above.

Which of the following Bootstrap styles can be used to create a Stacked progress bar?
     .progress-stacked
     .progress
     .progress-stack.
     None of the above.

How is an underlined text made?
     By adding <underline> tag around the text
     By adding .underlined class to tag around the text
     By adding .u class to tag around the text
     By adding <u> tag around the text

How can you make a notification element with blue background and text?
     By using <div> tag with classes .alert .alert-blue
     By using <div> tag with classes .alert .alert-info
     By using <div> tag with classes .info-box .blue
     By using <div> tag with classes .info .blue

Which of the following is correct about Bootstrap Media Query?
     Media query is a really fancy term for "conditional CSS rule".
     It simply applies some CSS, based on certain conditions set forth. If those conditions are met, the style is applied.
     Both of the above
     None of the above.

Which one of the following is not true?
     Adding "lead" class to a p element makes the text standout.
     Adding "text-left" class to a p element makes the text align to the left.
     Adding "text-justify" class to a p element makes the text justified.
     Adding "text-capitalized" class to a p element makes the text capitalized.

Which of the following bootstrap classes can be used to create navigation bar?
       .navbar .navbar-default
       .navigation-bar .navigation-bar-default
       .nb .nb-default
       None of the above

Which class is used to create a button group?
       .btn-group
       .button-group
       .group-button
       .group-btn

Bootstrap grid system is based on how many columns?
       3
       12
       6
       9

Which of the following classes will make table responsive?
       .table-scrollable
       .table-condensed
       .table-responsive
       .table-striped

Which of the following is the default value of @btnBackground?
       @red
       @white
       @dark
       @black

Which of the following is the correct description about .offset* class?
Note: There may be more than one right answer.
       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.

Which of these list types exist in Bootstrap?
Note: There may be more than one right answer
       .list-aligned
       .list-unstyled
       .list-inline
       .list-block

Which of the following classes can be used to make a form inline?
       .make-form-inline
       .form-inline
       .inline-form-element
       None of the above

Which of the following meta tags is important to ensure proper rendering and touch zooming?
       <meta content="text">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta charset="utf-8">
       <meta http-equiv="refresh" content="30">

Which of the following code can be used to produce sticky footer?
       <div class="footer">
       <div class="footer sticked">
       <div class="footer navbar-fixed">
       <div class="footer navbar-fixed-bottom">

Which tag can be used for quoting blocks of content from another source within your document?
       <blockquote>
       <quote>
       <mark>
       None of the above

Which Bootstrap class is used to create responsive tables?
       table-responsive
       table-bootstrap
       responsive-table
       bootstrap-table

Which button class is used to create a large button?
       .btn-lg
       .btn-large
       .btn-l
       .btn-xl

Which of the following colors is the default color for progress bar?
       #286090
       #cc2929
       #167ac6
       None of the above.

Which of the following correctly describes .dropup class functionality?
       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

Which dynamic style sheet language are supported for Bootstrap?
       Less
       Sass
       Both of the above
       None of the above

Which of the following sizes is minimum width for .container on the large device?
       640px
       768px
       1170px
       1200px

Which tag can be used to highlight the text?
       <tag>
       <span>
       <hover>
       <mark>

What is the use of media queries in CSS and in Bootstrap?
       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

The default Bootstrap grid system utilizes ___ columns.
       6
       9
       12
       16

Which of the following classes will wrap a page content?
       .wrapping
       .wrap
       .wrapper
       .container

Which of the following variables is not available for changing the default Scaffolding settings using LESS?
       @body-bg
       @text-color
       @base-color
       @link-color

What will be the color of the button with btn-primary class?
       Blue
       Red
       White
       Black

How to wrap form set of label and input?
       .form-set
       .form-group
       .from-element
       .form-item

Which class is used to create a big box for calling extra attention?
       .bigbox
       .jumbotron
       .container
       .attention

Which of the following LESS variables related for buttons?
       @btnFailBackground
       @btnDangerBackground
       @btnInfoColor
       @btnDangerColor

Can Bootstrap badges be used inside other elements?
       Yes
       No

How to attach navbar to top of window which scrolls away with the page?
       <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>

How to wrap series of buttons?
       <div class="btn-group-set">
  <button class="btn btn-default">One</button>
  <button class="btn btn-default">Two</button>
</div>

       <button class="btn btn-default btn-group-item">One</button>
<button class="btn btn-default btn-group-item">Two</button>

       <div class="btn-group">
  <button class="btn btn-default">One</button>
  <button class="btn btn-default">Two</button>
</div>

       <div class="btn-wrap">
  <button class="btn btn-default">One</button>
  <button class="btn btn-default">Two</button>
</div>

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

Which class adds a heading to a panel?
       .panel-header
       .panel-footer
       .panel-head
       .panel-heading

Which of the following is the correct way to do the pagination with Bootstrap?
       <nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</nav>

       <nav aria-label="Page navigation">
  <ul class="pagination">
    <p><a href="#">1</a></p>
    <p><a href="#">2</a></p>
    <p><a href="#">3</a></p>
    <p><a href="#">4</a></p>
    <p><a href="#">5</a></p>
  </ul>
</nav>

       <nav aria-label="Page navigation">
  <ul class="pagination">
    <i><a href="#">1</a></i>
    <i><a href="#">2</a></i>
    <i><a href="#">3</a></i>
    <i><a href="#">4</a></i>
    <i><a href="#">5</a></i>
  </ul>
</nav>

       None of the above

What is the right way to place link into alert box?
       <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>

Which of these following statements are true?
Note: There may be more than one right answer.
       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)

Which of the following bootstrap style is used to create a .navbar that scrolls with the page?
       .navbar-static-top
       .navbar-fixed
       .navbar-fixed-top
       None of the above.

Which of the following bootstrap classes can be used to create an animated progress bar?
       .progress-active
       .active
       .progress-striped
       None of the above.

What is the size of Bootstrap h1 header?
       34px
       36px
       38px
       40px

How to create a progress bar using Bootstrap 3?
       <div class="progress-bar">
  <div class="progress-line" style="width: 60%;">60%</div>
</div>

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

       <div class="progress">
  <div class="progress-bar" data-progress="60">60%</div>
</div>

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

Which option should be set to make modal window closable on pressing ESC key?
       Set the option “keyboard” to true
       Set the option “esc” to true
       Set the option “quit” to true
       None of the above

A standard navigation bar is created with:
       <nav class="navigationbar navbar-default">
       <nav class="nav navbar">
       <nav class="navbar default-navbar">
       <nav class="navbar navbar-default">

Which plugin is used to create a modal window?
       Modal
       Dialog Box
       Window
       Popup

Which of the following LESS variables does not exist?
       @placeholderText
       @inputDisabledBackground
       @inputBorderColor
       @inputBorder


Which class indicates uppercased text?
       .text-capitalize
       .ucase
       .text-uppercase
       .uppercase

Which contextual class indicates a dangerous or potentially negative action?
       .text-warning
       .text-info
       .text-primary
       .text-danger

What icon package is officially included in Bootstrap?
       Flaticon
       Plusicons
       Font-awesome
       Glyphicons

Which of the following classes do not exist?
Note: There may be more than one right answer.
       .col-xs-6
       .col-s-6
       .col-md-6
       .col-l-6
       .col-lg-6

Which of the following can be used to call a dialog?
       $(‘#myModal’).execute();
       $(‘#myModal’).modal();
       $(‘#myModal’).showModal();
       $(‘#myModal’).show-modal();

Which class provides a full width container, spanning the entire width of the viewport?
       .container-fluid
       .container-fixed
       .container-fullwidth
       .container

Why Normalize.css is used in Bootstrap framework?
       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

A standard navigation tab is created with:
       <ul class=”nav tabs”>
       <ul class=”navigation-tabs”>
       <ul class=”nav nav-navbar”>
       <ul class=”nav nav-tabs”>

True or False:-
"Use of data attributes from multiple plugins on the same element is not recommended."
       True
       False

Which of the following classes is used to make images responsive in Bootstrap?
       img-rounded
       img-fluid
       img-thumbnail
       img-circle

Which of the following is correct size of image in default media object?
       32×32
       64×64
       128×128
       None of these

Which of the following will correctly call collapse?
Note: There may be more than one right answer.
       $(‘#myCollapsible).collapse()
       $(‘#myCollapsible).collapse('fade')
       $(‘#myCollapsible).collapse({ toogle: false })
       All of these

Which of the following is not a Bootstrap plugin?
       Tab
       Tooltip
       Popover
       Menubox

Which class can be used for the page header element?
       .page-title
       .page-header
       .header
       None of the above

Which of the following bootstrap classes can be used to create tabs?
       .navigation .navigation-tabs
       .nav .nav-tabs
       .nav-tabs-navigation .nav-tabs-children
       None of the above

Which of the following is a valid method in Carousel plugin?
       .carousel(‘cycle’)
       .carousel(’round’)
       .carousel(‘left’)
       .carousel(‘right’)

Which of the following is not a default Bootstrap grid system class?
       xs
       sm
       md
       lg
       xl

Which plugin is used to create a tooltip?
       Dialog Box
       Modal
       Tooltip
       Popup

Can Bootstrap plugins be included individually?
       Yes
       No
       Yes, but only Tab and Tooltip
       No, except Modal

What is Bootstrap’s global default font-size?
       8px
       10px
       12px
       14px

Which of the following are not Bootstrap plugins?
       scrollspy
       datepicker
       modal
       tooltip

Which plugin is used to cycle through elements, like a slideshow?
       Orbit
       Scrollspy
       Slideshow
       Carousel

Which of the following are valid events in Toggle plugin?
Note: There may be more than one right answer.
       fade.bs.dropdown
       shown.bs.dropdown
       show.bs.dropdown
       hide.bs.dropdown

What are mixins?
       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

Which of the following classes makes table looks like "zebra"?
       .table-break
       .table-zebra
       .table-strap
       .table-striped

Which tool is used to compile Less styles for Bootstrap?
       nodejs
       rake
       grant
       grunt
|
How many methods scrollspy plugin has?
       1
       2
       3
       4

Which of the following class prefixes are used for tablets?
       col-md
       col-sm
       col-lg
       col-xs

Which of the following tags is using to show keyboard combinations?
       <section>
       <code>
       <keyboard>
       <kbd>

What is default grid float breakpoint set by Bootstrap?
       568px
       668px
       768px
       468px

What is the right way to create checkbox with using Bootstrap?
       <label class=”checkbox”>
<input type=”checkbox” value=”checked”>
Accept terms
</label>

       <div class=”checkbox”>
<label>
<input type=”checkbox” value=”checked”>
Accept terms
</label>
</div>

       <div class=”checkbox”>
<input type=”checkbox” value=”checked”>
<label>Accept terms</label>
</div>

       <div class=”checkbox”>
<label>Accept terms</label>
<input type=”checkbox” value=”checked”>
</div>

The typographic scale in Bootstrap is based on which of the following Less variables:
Note: There may be more than one right answer.
       @font-size-base
       @font-size-var
       @line-height-base
       @line-height-var

Which of the following LESS variables can be used to define your own number of columns in the grid?
       @grid-columns
       @bootstrap-columns
       @default-columns
       @boostrap-grid

Which of the following button classes do not exist?
Note: There may be more than one right answer.
       .btn-default
       .btn-primary
       .btn-secondary
       .btn-warning
       .btn-error

What is the correct way to center align text inside the paragraph?
       <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>

How many columns does bootstrap grid have?
       8
       10
       12
       14

Which of the following CSS libraries is used in Bootstrap for improved cross-browser rendering?
       Base.css
       Pure.css
       Normalize.css
       html5.css

Which of the following image helpers do not exist?
       .img-rounded
       .img-circle
       .img-bordered
       .img-thumbnail

Which of the following class can be used to create a breadcrumb?
       .menu
       .navbar
       .items
       .breadcrumb

How to create block level button which span all width of its parent element?
       .btn-wide
       .btn-full
       .btn-container
       .btn-block

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

How to flush left and right sides of text using Bootstrap?
       .text-justify
       .text-nowrap
       .text-flush
       .text-align-left-right

Which class adds zebra-stripes to a table?
       .table-zebra
       .table-bordered
       .even and .odd
       .table-striped

Which type of trigger cannot be used with the "delay" option to show and hide a popover?
       click
       hover
       focus
       manual

Which class shapes an image to a circle?
       .img-thumbnail
       .img-round
       .img-circle
       .img-rounded

Which of these font-icon libraries included in Bootstrap 3?
       Fontello
       FontAwesome
       Glyphicons
       IcoMoon

How to create a condensed table which have borders and hover effect on rows?
       <table class="table condensed border row-hover"></table>
       <table class="table condensed bordered hover"></table>
       <table class="table table-condensed table-bordered row-hover"></table>
       <table class="table table-condensed table-bordered table-hover"></table>

Which class can be used to make an inline list?
       .list-within-line
       .list-by-line
       .list-line
       .list-inline

How to add badge into button?
       <button class="btn btn-primary btn-with-badge">
  Messages <span>4</span>
</button>

       <button class="btn btn-primary">
  Messages <span class="badge">4</span>
</button>

       <button class="btn btn-primary">
  Messages <span class="btn-badge">4</span>
</button>

       <button class="btn btn-primary">Messages</button>
<span class="btn-badge">4</span>

Which of the following classes is used to make a paragraph stand out?
       s-out
       big
       lead
       first

Which class provides a responsive fixed width container?
       .container-fixed
       .container-fluid
       .container
       .container-fullwidth

Which of the following tags will cross out the word?
Note: There may be more than one right answer.
       <s>
       <del>
       <strike>
       <ins>

Which of the following classes makes paragraph stand out?
       .stand
       .lead
       .stand-out
       .lead-out

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.
       height: 100vh
       display: block
       max-width: 100%
       min-height: 100%

Which of the following command is valid to display modal window?
       $('#welcome-message').modal('display');
       $('#welcome-message').modal('show');
       $('#welcome-message').modal('open');
       $('#welcome-message').modal('render');

Which is the correct way to create full-width layout with two columns ⅓ and ⅔ on all devices?
       <div class=”container”>
<div class=”row”>
<div class=”col-xs-4″>One</div>
<div class=”col-xs-8″>Two</div>
</div>
</div>

       <div class=”container-fluid”>
<div class=”row”>
<div class=”col-xs-4″>One</div>
<div class=”col-xs-8″>Two</div>
</div>
</div>

       <div class=”container”>
<div class=”row”>
<div class=”col-md-4″>One</div>
<div class=”col-md-8″>Two</div>
</div>
</div>

       <div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-4″>One</div>
<div class=”col-md-8″>Two</div>
</div>
</div>

How to display block only for extra small devices?
       .visible-xs-*
       .show-xs-*
       .display-xs-*
       .only-xs-*

What is "sr-only" class needed for in Bootstrap?
       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

Which of the following CSS code can be used to add asteriks to required fields in a form?
       .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

Which of the following is not a Bootstrap component?
       Tag
       Script
       Collapse
       Card

What is the right way to center ⅓ block by using Bootstrap grid system?
<div class="row col-center">
  <div class="col-md-4">
    I'm centered!
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    I'm centered!
  </div>
</div>

<div class="row">
  <div class="col-md-4 align-center">
    I'm centered!
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-md-offset-3">
    I'm centered!
  </div>
</div>

How can you insert a search icon?
       <span class="glyphicon glyphicon-search"></span>
       <span class="glyph glyph-search"></span>
       <span class="glyphicon-search"></span>
       <span class="glyphicon search"></span>

Which contextual class indicates a successful or positive action?
       .text-success
       .text-info
       .text-warning
       .text-primary

Bootstrap Test Upwork 2019