Bootstrap MCQs
Bootstrap MCQs
These Bootstrap multiple-choice questions and their answers will help you strengthen your grip on the subject of Bootstrap. You can prepare for an upcoming exam or job interview with these Bootstrap MCQs.
So scroll down and start answering.
Which Bootstrap class is used to create responsive tables?
A. table-responsive
B. table-bootstrap
C. responsive-table
D. bootstrap-table
Which of the following button classes do not exist? (check any that apply)
A. .btn-default
B. .btn-primary
C. .btn-secondary
D. .btn-warning
E. .btn-error
Which class is used to create a button group?
A. .btn-group
B. .button-group
C. .group-button
D. .group-btn
Which of the following is not contextual class?
A. .active
B. .danger
C. .success
D. .failure
Which class adds zebra-stripes to a table?
A. .table-zebra
B. .table-bordered
C. .even and .odd
D. .table-striped
Which of these list types exist in Bootstrap? (check any that apply)
A. .list-aligned
B. .list-unstyled
C. .list-inline
D. .list-block
Which of the following class can be used to create a breadcrumb?
A. .menu
B. .navbar
C. .items
D. .breadcrumb
Which tag can be used to highlight the text?
A. tag>
B. <span>
C. <hover>
D. <mark>
Which of the following classes will make table responsive?
A. .table-scrollable
B. .table-condensed
C. .table-responsive
D. .table-striped
What is "sr-only" class needed for in Bootstrap?
A. the class is used to hide only service rules
B. the class is used to show only service rules
C. the class is used to show information intended only for screen readers from the layout of the rendered page.
D. the class is used to hide information intended only for screen readers from the layout of the rendered page
Which of the following is the correct way to do the pagination with Bootstrap?
A. 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>
B. 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>
C. 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>
D. None of the above
Which of the following classes is used to make a paragraph stand out?
A. s-out
B. big
C. lead
D. first
How to add badge into button?
A. button class="btn btn-primary btn-with-badge"> Messages <span>4</span> </button>
B. <button class="btn btn-primary"> Messages <span class="badge">4</span> </button>
C. <button class="btn btn-primary"> Messages <span class="btn-badge">4</span> </button>
D. <button class="btn btn-primary">Messages</button> <span class="btn-badge">4</span>
How do you wrap form set of label and input?
A. .form-set
B. .form-group
C. .from-element
D. .form-item
Which button class is used to create a large button?
A. .btn-lg
B. .btn-large
C. .btn-l
D. .btn-xl
Which class can be used to make an inline list?
A. .list-within-line
B. .list-by-line
C. .list-line
D. .list-inline
What is the right way to place link into alert box?
A. div class="alert alert-warning"> Warning! <a href="#">Read documentation.</a> </div>
B. <div class="alert alert-warning alert-highlight-links"> Warning! <a href="#">Read documentation.</a> </div>
C. <div class="alert alert-warning"> Warning! <a href="#" class="alert-link">Read documentation.</a> </div>
D. <div class="alert alert-warning"> Warning! <a href="#" class="alert-warning-link">Read documentation.</a> </div>
What is the right way to create a page header with subtext inside?
A. h1 class="page-header">Ruby on Rails <small>by Matz</small></h1>
B. <h1 class="page-header">Ruby on Rails <small class="header-subtext">by Matz</small></h1>
C. <div class="page-header"> <h1>Ruby on Rails <small>by Matz</small></h1> </div>
D. <div class="page-header"> <h1>Ruby on Rails <small class="header-subtext">by Matz</small></h1> </div>
What is the right way to create checkbox with using Bootstrap?
A. label class="checkbox"> <input type="checkbox" value="checked"> Accept terms </label>
B. <div class="checkbox"> <label> <input type="checkbox" value="checked"> Accept terms </label> </div>
C. <div class="checkbox"> <input type="checkbox" value="checked"> <label>Accept terms</label> </div>
D. <div class="checkbox"> <label>Accept terms</label> <input type="checkbox" value="checked"> </div>
What will be the color of the button with btn-primary class?
A. Blue
B. Red
C. White
D. Black
Which of the following image helpers do not exist?
A. .img-rounded
B. .img-circle
C. .img-bordered
D. .img-thumbnail
Which of the following bootstrap classes can be used to create tabs?
A. .navigation .navigation-tabs
B. .nav .nav-tabs
C. .nav-tabs-navigation .nav-tabs-children
D. None of the above
Which class is used to create a big box for calling extra attention?
A. .bigbox
B. .jumbotron
C. .container
D. .attention
Which class can be used for the page header element?
A. .page-title
B. .page-header
C. .header
D. None of the above
Why Normalize.css is used in Bootstrap framework?
A. To optimize the size of Bootstrap source files
B. To improve cross-browser rendering
C. To import google fonts directly to Bootstrap css
D. None of the above
Which class shapes an image to a circle?
A. .img-thumbnail
B. .img-round
C. .img-circle
D. .img-rounded
How to create block level button which span all width of its parent element?
A. .btn-wide
B. .btn-full
C. .btn-container
D. .btn-block
Which of the following CSS codes can be used to add asterisks to required fields in a form?
A. .form-group.required .control-label:after { content:"*"; color:red; }
B. .form-group:required{ content:"*"; color:red; }
C. .form-group:after{ content:"*"; color:red; }
D. None of the above
Which of the following classes makes table look like "zebra"?
A. .table-break
B. .table-zebra
C. .table-strap
D. .table-striped
Which of the following meta tags is important to ensure proper rendering and touch zooming?
A. meta content="text">
B. <meta name="viewport" content="width=device-width, initial-scale=1">
C. <meta charset="utf-8">
D. <meta http-equiv="refresh" content="30">
Which of the following tags is used to show keyboard combinations?
A. section>
B. <code>
C. <keyboard>
D. <kbd>
Which class provides a full width container, spanning the entire width of the viewport?
A. .container-fluid
B. .container-fixed
C. .container-fullwidth
D. .container
Which class provides a responsive fixed width container?
A. .container-fixed
B. .container-fluid
C. .container
D. .container-fullwidth
What is default way to have red button?
A. button type="button" class="btn btn-default">Default</button>
B. <button type="button" class="btn btn-default-red">Default as red</button>
C. <button type="button" class="btn" color="red">Red</button>
D. <button type="button" class="btn btn-red">Red</button>
E. <button type="button" class="btn btn-danger">Danger</button>
F. <button type="button" class="btn btn-alert">Danger</button>
Is it possible to disable zooming on mobile devices while using Bootstrap?
A. No, bootstrap is mobile-first and mobile sites must have ability to zoom in or out
B. Yes, but you must have enabled JS and add `data-zoom="off"` on body tag
C. Zoom will be disabled only if `width=device-width` is in meta tag with `name="viewport"`
D. Zoom will be disabled only if `initial-scale=1, maximum-scale=1` is in meta tag with `name="viewport"`
You can Enable Carousel Controls using the following code snippet?
A. $(".item").click(function(){ $("#idCarousel").carousel(0); });
B. $("#idCarousel").carousel();
C. $(".item").click(function(){ $("#idCarousel").carousel(1); });
D. $(".left").click(function(){ $("#idCarousel").carousel("prev"); });
What is Jumbotron?
A. Such thing does not exist in bootstrap, it's some word used to describe big TV sets
B. It's element to showcase key content
C. It's container element to hold grid layout
D. It's container element to hold images in full-screen mode
Bootstrap provides you with following types of form layouts: (choose all that apply)
A. Horizontal form
B. Inline form
C. Outline form
D. Vertical (default) form
Responsive utilities are currently only available for block and table toggling in the following classes:
A. .visible-sm-block : Small devices (more than 767px and less than 992px in width) visible
B. .visible-md-block : Medium devices (up to 768px in width) visible
C. .visible-md-block : Medium devices (768px to 980px in width) visible
D. .visible-lg : Larger devices (992px and above in width) visible
What browsers are supported?
A. All browsers are supported.
B. All versions of Chrome, Firefox, Opera, IE and Safari.
C. Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are partly supported.
D. Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are supported only with old IE compatibility modes.
Which code will create bootstrap button?
A. button type="button" class="button success">Button</button>
B. <button type="button" class="btn btn-success">Button</button>
C. <btn class="success">Button</btn>
D. <button type="button" class="btn-flat">Button</button>
In Bootstrap, collapsing elements enables you to collapse any element without using external __?
A. LESS
B. CSS
C. JavaScript
D. Modal
What is true about icons in Bootstrap?
A. 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.
B. If icon is needed after the text of div, icon can be added simply like this: `<div class="glyphicon glyphicon-search">Search</div>`
C. Icon classes can be directly combined with any other elements.
D. Icon classes should be used only with empty elements
E. None of these
The Bootstrap grid system has the following class prefixes? (choose all that apply)
A. col-lg-
B. col-sm-
C. col-em-
D. col-xs-
E. col-sx-
Which code is correct in order to get the previous active tab's text?
A. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).previous(); });
B. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).back(); });
C. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).prev(); });
D. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).text(); });
Which code is correct way to get previous active tab's text?
A. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).previous(); });
B. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).back(); });
C. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).prev(); });
D. $('.nav-tabs a').on('shown.bs.tab', function(event){ var xy = $(event.relatedTarget).text(); });
How can you insert a search icon?
A. span class="glyphicon glyphicon-search"></span>
B. <span class="glyph glyph-search"></span>
C. <span class="glyphicon-search"></span>
D. <span class="glyphicon search"></span>
A. .navbar-inverse
B. .navbar-black
C. .navbar-default
D. .navbar-dark
What is Twitter Bootstrap?
A. It's CSS API to build user interfaces while prototyping
B. It's HTML, CSS and JavaScript framework to build user interfaces
C. It's JS and ECMAScript framework which allows quick CSS changes
D. It's part of Twitter UI API
E. It's new way to build interfaces
Bootstrap provides the following classes that can be used to apply some simple styles to images? (choose all that apply)
A. .img-thumbnail: adds a bit of padding and a gray border
B. .img-rounded: adds border-radius: 6px to give the image rounded corners
C. .img-circle: makes the entire image round by adding border-radius: 50%
D. .img-rounded: adds border-recat: 6px to give the image react corners
E. .img-circle: makes the entire image radius by adding border-rounded
The affix plugin toggles among the following classes? (choose all that apply)
A. .affix
B. affix-bottom
C. .affix-top
D. None of the above
The following event is fired immediately when the hide instance method has been called?
A. $('#popoverExample').on('show.bs.popover', function () { // do something... })
B. $('#popoverExample').on('shown.bs.popover', function () { // do something... })
C. $('#popoverExample').on('hidden.bs.popover', function () { // do something... })
D. $('#popoverExample').on('hide.bs.popover', function () { // do something... })
Which of the following Bootstrap styles can be used to to get different sized items of .pagination?
A. .lg, .sm
B. .pagination-lg, .pagination-sm
C. .menu-lg, .menu-sm
D. None of the above.
Which Bootstrap style makes a set of buttons appear vertically stacked rather than horizontally?
A. .btn-group
B. .btn-toolbar
C. .btn-group-lg
D. .btn-group-vertical
Which of the following variables is not available for changing the default Scaffolding settings using LESS?
A. @body-bg
B. @text-color
C. @base-color
D. @link-color
Which of the following is correct size of image in default media object?
A. 32x32
B. 64x64
C. 128x128
D. None of these
Which of the following commands is valid to display modal window?
A. $('#welcome-message').modal('display');
B. $('#welcome-message').modal('show');
C. $('#welcome-message').modal('open');
D. $('#welcome-message').modal('render');
How do you create a condensed table which has borders and hover effect on rows?
A. table class="table condensed border row-hover"></table>
B. <table class="table condensed bordered hover"></table>
C. <table class="table table-condensed table-bordered row-hover"></table>
D. <table class="table table-condensed table-bordered table-hover"></table>
Which of the following colors is the default color for progress bar?
A. #286090
B. #cc2929
C. #167ac6
D. None of the above.
Which of these font-icon libraries is included in Bootstrap 3?
A. Fontello
B. FontAwesome
C. Glyphicons
D. IcoMoon
How do you flush left and right sides of text using Bootstrap?
A. .text-justify
B. .text-nowrap
C. .text-flush
D. .text-align-left-right
What is the use of media queries in CSS and in Bootstrap?
A. To specify the size of the browser view
B. To specify which media files can be loaded on the page
C. To move, show and hide content based on the viewport size
D. None of the above
What icon package is officially included in Bootstrap?
A. Flaticon
B. Plusicons
C. Font-awesome
D. Glyphicons
What CSS class is needed to display form inputs one after the other in single row?
A. `form-inline-mobile` if viewport is smaller than 768px in width
B. `form-inline` if viewport is at least 768px wide
C. `form-inline-desktop` if viewport is at least 768px wide
D. `form-as-row` if viewport is at least 768px wide
E. `form-in-row` if viewport is at least 768px wide
F. Can't be done because Bootstrap is mobile first and on mobile form elements are displayed in columns
What preprocessor is used to build Bootstrap?
A. LESS
B. SASS
C. TcSS
D. TwitterCSS
What will happen if viewport with resolution of 500x800 will rotate to landscape of site which uses custom build of bootstrap?
A. items with class `.visible-xs-*` will hide
B. Result depends on Less configuration
C. items with class `.visible-md-*` will stay hidden
D. items with class `.visible-lg-*` will stay hidden
What scaffolding variables are available to use in classic CSS to override default values?
A. body-bg, gray-dark, brand-primary, link-hover-color, link-hover-decoration
B. It's not possible to override Less variables in a classic CSS file.
C. body-bg, text-color, link-color, link-hover-decoration, link-hover-color
D. gray-dark and brand-primary
What will happen if sr-only class is added to some div element?
A. div will be visible only for small resolution devices
B. div will be visible only for screen readers
C. div will slide only to right side
D. div will only stay on right side of screen
None. Bootstrap does not support flexbox yet.-- Bootstrap v4 will do.
A. None. Bootstrap does not support flexbox yet.-- Bootstrap v4 will do.
B. only class `row-flex` and `column-flex`
C. Any
D.
- What flexbox model css options can be used together with bootstrap?
A. 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>
B. Scroll spy can be used which is JS plugin
C. You will need some 3rd party lib to make it happen. E.g. jQuery or ReactJS
D. Just add navigation with e.g. `data-rel="navigation"` attribute and same div with `data-rel-bind="navigation"`
What is visual difference between <del>text A</del> and <s>text B</s> for end users?
A. With `del` tag text looks like deleted text and with `s` tag is used to make strikethrough text
B. No visual difference
C. There is slight difference for Safari users on Mac, while no difference for any other
D. `del` and `s` represent different things and `del` text is also red, while `s` text is just striked through
What media queries breakpoints are available as Less options to make better UI for mobile devices? (choose all that apply)
A. width-medium
B. media-query-mobile
C. screen-xs
D. screen-phone
E. small-up
F. None of these
Which of the following is the correct description about .offset* class?
A. It`s off column and save place.
B. It`s off column and not save place.
C. It`s increase right margin in column.
D. It`s increase left margin in column.
What are options to make font weight bolder than in parent element?
A. Add class `bold`
B. Use HTML `bold` tag
C. Use HTML `strong` tag
D. Use HTML `b` tag
E. Add class `strong`
F. None of these
A. <ul class="nav nav-pills">...</ul>
B.
C.
D.
E.
F.
G.
What is needed to be used to make marked text?
A. Add class `mark` to some html tag
B. with <mark> html tag
C. Add class `marked` to some html tag
D. Add class `is-marked` to some html tag
E. Add class `marked-text` to some html tag
Which of the following Bootstrap styles 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
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.
Which of the following Bootstrap styles can be used to create a Stacked progress bar?
A. .progress-stacked
B. .progress
C. .progress-stack.
D. None of the above.
Which of the following is correct about Bootstrap wells?
A. A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.
B. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.
C. Both of the above.
D. None of the above.
Which of the following should be included inside the head of an html document for proper rendering and touch zooming?
A. meta name="viewports" content="width=device-width, initial-scale=1">
B. <meta name="viewport" content="width=device-width, initial-scale=1">
C. <meta name="viewsport" content="width=device-width, initial-scale=1">
D. None of the above
Is it possible to create a responsive image?
A. Yes, using helper class: `responsive`
B. Yes, using class: `img-responsive`
C. Yes, using class `img-responsive` but it will require JavaScript plugins enabled
D. Yes, using class `img-rounded` so it's width will be rounded to closest integer by width of viewport
E. yes, using class `img-fluid`
F. Yes, using class `image-responsive`
G. None of these
Which one of the following is not true?
A. Adding "lead" class to a p element makes the text standout.
B. Adding "text-left" class to a p element makes the text align to the left.
C. Adding "text-justify" class to a p element makes the text justified.
D. Adding "text-capitalized" class to a p element makes the text capitalized.
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.
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.
Which class applies the hover color to a particular row or cell of a table?
A. .active
B. .success
C. .warning
D. .danger
Which of the following class can be used to create a responsive table?
A. .table-responsive
B. .responsive
C. .active
D. .table
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.
Which of the following is correct about data-backdrop 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. It shows the modal when initialized.
C. Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is
D. added, it will load that content.
How is a tabbed content with bootstrap made?
A. Using .nav and .tabbed classes on <ul> tag
B. Using .nav and .tabs classes on <ul> tag
C. Using .navigation and .tabs classes on <ul> tag
D. Using .nav and .nav-tabs classes on <ul> tag
How can you make a paragraph stand out?
A. By adding .stand class to <p> tag
B. By adding .out class to <p> tag
C. By adding .bigger class to <p> tag
D. By adding .lead class to <p> tag
A. By adding
tag with class .footer inside blockquote
B. By adding
C. By adding
tag with class .blockquote-reverse inside blockquote
D. By adding tag inside blockquote
How do you remove a list styling for nested lists?
A. By adding .list-unstyled class to parent element
B. By adding .list-unstyled class to all list elements
C. By wrapping list with tag
D. By wrapping list with tag
How is an uppercase text made by only using bootstrap's classes?
A. Add .uppercase class to some text element
B. It's not possible
C. Add .text-uppercase class to some text element
D. Add .all-uppercase class to some text element
E. Add .t-uppercase class to some text element
A. $('a[data- toggle="tab"]').on('opened.bs.tab', function (e) { e.target e.relatedTarget })
B. $('a[data- toggle="tab"]').on('open.bs.tab', function (e) { e.target e.relatedTarget })
C. $('a[data- toggle="tab"]').on('show.bs.tab', function (e) { e.target e.relatedTarget })
D. $('a[data- toggle="tab"]').on('shown.bs.tab', function (e) { e.target e.relatedTarget })
How many columns does bootstrap grid have?
A. 8
B. 10
C. 12
D. 14
Bootstrap grid system is based on how many columns?
A. 3
B. 12
C. 6
D. 9
What is the default line-height while using twitter bootstrap?
A. 1
B. 1.428
C. 1.5
D. 2
E. 2.428
Can Bootstrap plugins be included individually?
A. Yes
B. No
C. Yes, but only Tab and Tooltip
D. No, except Modal
A. $('#Tooltipexample').on('shown.bs.tooltip', function () { // do something... })
B. $('#Tooltipexample').on('hide.bs.tooltip', function () { // do something... })
C. $('#Tooltipexample').on('activate.bs.scrollspy', function () { // do something... })
D. $('#Tooltipexample').on('hidden.bs.tooltip', function () { // do something... })
E. $('#Tooltipexample').on('show.bs.tooltip', function () { })
List of Bootstrap MCQs Multipl...
Available in:
Bootstrap MCQs
Начальная загрузка вопросы на русском языке
Preguntas Oreja en idiomas españoles
日本語でのブートストラップの質問
Domande bootstrap in lingua italiana
Questions bootstrap en langues françaises
Questões de bootstrap em línguas portuguesas
Bootstrap-Fragen in deutschen Sprachen
中文引导问题
أسئلة التمهيد باللغات العربية
Soal bootstrap bahasa indonesia
türkçe dilinde bootstrap soruları
