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

