Navratri Sale: Get Upto 30% OFF on Live Training! Offer Ending in
D
H
M
S
Get Now
Top 20 Most Asked Bootstrap Interview Questions in Detail With Example

Top 20 Most Asked Bootstrap Interview Questions in Detail With Example

09 May 2024
Question
53K Views
16 min read

Bootstrap is a sleek and powerful front-end framework for building the responsive website. It was released in August 2011 by Twitter as an open source project. It is based on HTML, CSS and JavaScript. This article contains most commonly asked interview questions and answers in a Bootstrap or front-end development Interview.

Q1. What is Bootstrap?

Bootstrap is a mobile first front-end framework for easier web development with supporting all virtual devices. It usesHTML,CSS,JavaScript

Q2. Why we should use Bootstrap?

Every browser can support bootstrap features. With the knowledge of HTML, CSS, and JavaScript anyone can start working withBootstrap. Bootstrap responsiveCSSadjusts to Desktops, Mobiles, and Tablets. It provides web-based customization. Bootstrap is open source. It can be used for mobile first design styles using the entire library instead of separate and different files.

Q3. What are Responsive websites?

Responsive means a website can be used on any platform with all types of screen size. A platform like it may be a desktop, laptop, tablet or smartphones. It automatically adjusts with changing the width and height of the screen.

In today’s era, people, as well as business, follow the smartphones for their personal and professional use. So, bootstrap is the best choice to make the website one time and it supports all kinds of devices.

Q4.What are the features of Bootstrap v4?

The initial release ofbootstrap v4.xwas 4.0 and the final release in 2018-2019 is 4.2 ;

  • The toast component is added for showing notifications
  • The spinner component is added for loading
  • The utility class .text-decoration-none is added
  • The bootstrap-grid.css file updates the margin and padding of the grid system
  • The .modal-xl class is used for modals
  • The .font-weight-lighter and .font-weight-bolder are added as utility classes
  • The validation styles for file inputs is added with new features
  • The print feature of dark tables is updated with new quality
  • The new utility class .dropdown-item-text is added for dropdown items
  • The Tooltips supports Shadow DOM
  • The double transitions issue on carousels is improved now

    Q5. What is a Source map file?

    A source map file allows the web debuggers to refer to the original context from where the code was generated. The file has the .map extension.

Q7. How to create responsive images in Bootstrap 4?

  1. Bootstrap 4 works with .img-fluid to build responsive images. Let’s see the code,

    <div class="container">
     <img src="/Satya/Pics/Name.jpg" class="img-fluid" alt="">
    </div>

Q8. How to make images responsive using bootstrap3?

We can make responsive images using .img-responsive class. Let’s see the code,
<div class="container"><img class="img-responsive" src="images/Satya.jpg" alt="Responsive"/><div>

Q9. How to make videos responsive in bootstrap3?

We can create responsive using a .embed-responsive class. Then we will add the.embed-responsive-itemclass to an <iframe> tag. Let’s see the code,

  1. <div class="container">
    <div class="embed-responsive">
    <iframe class="embed-responsive-item"src="https://www.youtube.com/channel/UCrxtdnFenZ5aDVQmHv2iGGg/videos?view_as=subscriber&disable_polymer=1"></iframe>
    </div>
    </div>

Q10. How to make tab component using bootstrap?

  1. We can create nav components such as tabs using Twitter Bootstrap. You can use.nav-tabsclass with the base class.nav.

    <ul class="nav nav-tabs">
    <li class="active"><a href="#">Profile</a></li>
    <li><a href="#">Details</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

Q11. How many types of classes are used in Bootstrap3 to create a responsive page layout?

There are 4 types of bootstrap grid classes. we can create grid column layouts extra small devices like mobile phones to large devices like large desktop screens.

.col-xs-* : This class is used for extra small device like smart phone (Size<768px)

.col-sm-*: This class is used for small device like tablets (size>=768px)

.col-md-*: This class is used for medium device like laptops and small size desktop CRT screen (size >=992px)

.col-lg-* : This class is used for large device like flat screen or large size desktop (size>=1200px)

Q12. How to hide elements in Bootstrap3 based on device?

This can be possible using hidden utility classes. See

hidden-xs-* :Hide the elements only on extra small device

hidden-sm-* :Hide the elements only on small devices

hidden-md-*:Hide the elements only on medium device

hidden-lg-*:Hide the elements only on larger devices.

Q13. How to visible elements based on device screen?

This can be possible using hidden utility classes. See the below classes,

visible-xs-*:Visible the elements only on extra small de

visible-sm-*:Visible the elements only on small devices.

visible-md-*:Visible the elements only on medium devi

visible-lg-*:Visible the elements only on larger devices.

Q14. How to show certain elements for printing purpose?

visible-print class is visible for printing purpose. Let’s see the code,

  1. <div class="container">
    <div class="row">
    <div class="col-xs-10 visible-print">
    <!--It is visible when printing.-->
    </div>
    </div>
    </div>

Q15. What is the grid size in Bootstrap 4?

Bootstrap 4 supports 5 tier grid system. The below lists for different screen sizes of device,

Extra small <576px :

  • Width container will be auto.
  • Here class prefix is .col-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

Small =576px :

  • Width container will be 540px.
  • Here class prefix is .col-sm-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

Medium =768px :

  • Width container will be 720px.
  • Here class prefix is .col-md-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

Large =992px:

  • Width container will be 960px.
  • Here class prefix is .col-lg-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

Extra large =1200px :

  • Width container will be 1140px.
  • Here class prefix is .col-xl-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

Q16. How to create a bootstrap tooltip using jQuery?

For setting the tooltip message include the title attribute to the element.

Let’s see the code,

    1. <button class="btn btn-primary" tooltip="The title message is shown"
      data-toggle="tooltip">
       Click Here
      </button>
      
      <script type="text/javascript">
       $(document).ready(function () {
       $('[data-toggle="tooltip"]').tooltip();
       });
      </script>

Q17. How to set alert using JavaScript?

To create an alert, I can use the alert class. Types of alert contextual classes are mentioned below,

  • alert-danger:This can be used for error purpose.
  • alert-success:This can be used for success purpose.
  • alert-danger:This can be used for information purpose.
  • alert-warning:This can be used for warning purpose.

First, create a button element for click event and then create div element with ID and message information.

    1. <button id="btnAlert" class="btn btn-primary">
       Alert
      </button>
      
      <div id="dvAlert" class="alert alert-danger collapse">
      <a href="#" class="close" data-dismiss="alert">×</a>
      <strong>Error!</strong> Check once using unit test.
      </div>
       Next step is to mention div id inside button click event using jquery.
      <script type="text/javascript">
       $(document).ready(function () {
      
       $('#btnAlert').click(function () {
       $('#dvAlert').show('fade');
       });
      
       });
      </script>

Q18. How to toggle a drop-down menu using JavaScript?

Using .dropdown-toggle class of an anchor link or a button using JavaScript.

    1. <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
       Dropdown menu
      <span class="caret"></span>
      </button>
      <script>
       $(document).ready(function () {
       $(".dropdown-toggle").dropdown();
       });
      </script>

Q19. What is the relationship between Sass and bootstrap?

SASS is a stylesheet language andCSSpre-processors. It should be compiled intoCSSand that can be understood by the Web browser. The files are written in SASS that have the. scss extension. The complete Bootstrap 4CSSsource is written in the SASS language.

The Bootstrap 4 CSS files are compiled using a SASS compiler i.e. A.K.A pre-processor. SASS is the best way to way to customize Bootstrap.

Q20. What is the difference between Bootstrap v3 and v4?

Bootstrap 4 is the latest version of Bootstrap. It is the most popular framework including HTML, CSS, and JavaScript. New components are added in Bootstrap 4. The final release in 2018-2019 is 4.2:

    1. COMPONENTS
      BOOTSTRAP v3
      BOOTSTRAP v4
      font size
      The global font size is 14px
      The global font size is 16px
      primary CSS unit
      The primary CSS unit is px
      The primary CSS unit is rem
      source CSS files
      The source CSS files are named as LESS
      The source CSS files are named as SCSS
      grid system
      It has 4 tier grid system(These are xs, sm, md, lg)
      It has 5 tier grid system(These are xs, sm, md, lg, xl)
      offset columns
      It implements col-*-offset-* classes to offset columns
      It uses offset-*-* classes to offset columns
      inverse tables
      The inverse table is not supported
      Uses inverse tables by .table-dark
      condensed tables
      The .table-condensed is used for condensed tables
      The .table-sm is used for condensed tables
      contextual table classes
      It doesn't contain .table- prefix for its contextual classes
      It contains .table- prefix for its contextual classes
      radio buttons
      It uses .radio, .radio-inline to display radio buttons
      It uses .form-check-input, .form-check-inline to display checkboxes
      checkboxes
      It uses .checkbox, .checkbox-inline to display checkboxes
      It uses .form-check, .form-check-label to display radio buttons
      input controls size
      It uses .input-lg and .input-sm to customize the size of an input controls
      It uses form-control-lg and .form-control-sm to customize the size of an input controls
      label size
      It doesn't contain any classes for changing form label size
      It uses .col-form-label-sm and .col-form-label-lg to customize the size of a label
      help text
      It uses .help-block class to show help text
      It uses the .form-text class to show help text
      form legends
      It has no classes for making the form legends
      It uses .col-form-label on legend elements
      validation styles
      It contains validation styles for validating states on form controls(like .has-warning)
      It doesn't contain validation styles
      custom forms
      It doesn't support custom forms
      It supports custom forms
      buttons
      It contains .btn-default and .btn-info classes but .btn-secondary is not found
      It contains the .btn-secondary, .btn-light, and .btn-dark classes
      outline button
      It doesn't contain the outline button
      It supports .btn-outline-* classes for adding styles buttons using an outline colour
      button sizes
      It uses .btn-xs for button sizes
      The .btn-sm and .btn-lg are used but .btn-xs class is no longer available
      responsive images
      It uses .img-responsive class for responsive images
      It uses .img-fluid class for responsive images
      image alignment
      It uses .pull-right, .pull-left for right and left image alignment
      It uses .pull-*-right and .pull-*-left for right and left image alignment
      block level images
      It uses .center-block to align block level images
      It uses .m-x-auto to align block level images
      Dropdown header
      It uses li tags to build dropdowns with .dropdown-header
      It uses to h1 - h2 tags to build dropdowns with .dropdown-header
      Divider in dropdown
      It uses .divider class to the li element to make lists of build dropdowns
      It uses .divider class to the div element to make lists of build dropdowns
      disable menu items
      It uses the .disabled class to the li element to disable menu items
      It uses .disabled class to the <a> element to disable menu items
      Nav inline
      There is no .nav-inline class
      It uses the .nav-inline class for specifying navs to be displayed inline
      navbar alignment
      It uses .navbar-right, .navbar-left for navbar alignment
      It uses .mr-auto for navbar alignment
      Fixed navbar
      It uses .navbar-fixed-top and .navbar-fixed-bottom for setting navbar in top or bottom
      It uses .fixed-top and .fixed-bottom for setting navbar in top or bottom
      glyphicons
      It supports glyphicons
      It doesn’t support glyphicons
      carousel item
      It uses .item class for carousel item
      It uses .carousel-item class
      affix
      It supports affix
      It doesn’t support it
      Thumbnails
      It supports thumbnails
      It doesn’t support it
      Wells and Panels
      It supports both
      It doesn’t support it
      cards
      It doesn’t support it
      It supports cards instead of affix, thumbnails, wells and panels

Q21.What are cards in Bootstrap 4?

Bootstrap 4 uses cards by replacing panels, wells, and thumbnails. Bootstrap 4 uses .card and .card-body classes to an element to make container. It adds .card-title to heading elements and It uses .card-text to text elements.

Let’ see code,

      1. <div class="container-fluid">
         <div class="card card-body">
         <h4 class="card-title">Name</h4>
         <p class="card-text">My name is Satyaprakash</p>
         <a href="#" class="btn btn-primary">More Detilas>></a>
         </div>
        </div>
        
Summary

I hope these questions and answers will help you to crack your Bootstrap Interview. These interview Questions have been taken from our new released eBook Bootstrap Interview Questions & Answers. This book contains more than 220 Bootstrap interview questions.

This eBook has been written to make you confident in Bootstrap with a solid foundation. Also, this will help you to turn your front-end skills into your profession.

Buy this eBook at a Discounted Price!

Bootstrap Interview Questions Answers eBook
Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Angular Certification TrainingOct 13SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Satyaprakash Samantaray (An Author and Blogger)

He is passionate about Microsoft .NET technology and likes to share knowledge with the .NET developer's community. He is a contributor in Microsoft and the ASP.NET developer community.
Self-paced Membership
  • 24+ Video Courses
  • 825+ Hands-On Labs
  • 400+ Quick Notes
  • 125+ Skill Tests
  • 10+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Accept cookies & close this