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