All The Useful Bootstrap Interview Questions & Answers

Q 1. What is Bootstrap framework and why it is used?
Bootstrap is the set of codes written in HTML, CSS, and Javascript. Bootstrap is an open source framework. Bootstrap framework is used for developing the website and the web applications.

Bootstrap is one of the most essential tools for the front end developers because of bootstrap help in creating complete websites in a short period. With the help of Bootstrap, developers do not have to write long CSS code, and they get more time to design the web pages.

Q 2. Why is Bootstrap used for Mobile Web Development? Explain.
Bootstrap 3 redesigned the components to use flat design & mobile first approach
Bootstrap provides the grid system for defining the layouts. The grid system has 12 columns, and many device sizes like Extra small devices(Phones), Small devices(Ipad, Tablet), Medium Devices(Desktop) and Large Devices(Desktop) and the sizes of each of the devices are pre-defined, and these pre-defined classes take the responsibility of the responsive aspects, therefore, no CSS is required.
The layout system of Bootstrap is percentage based which keeps the mobile device support at the forefront.

Q 3. When we can use <code>tag and <pre>?
<code> the tag is used for displaying the code inline and <pre> the tag is used if the system has to be presented as a standalone block element or if the law has multiple lines. While using the <pre> and <code> tags,unicode variants for the opening and closing tags − < and > should be used.

Example:
                                                   
<code><header></code> wrapped as an inline element.

To display the code as a standalone block element use <pre> tag as:

<pre>
  <article>
     <h1>The Article Heading</h1>
  </article>
</pre>
                                               
Q 4. What are the different button styles in Bootstrap? Explain.
Bootstrap has many predefined button styles, and each button reflects either a message to the user or an action to be performed.

The different button styles are: 

Primary
Success
Danger
Warning
Info

Classes for buttons are as follows: 

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger

Q 5. What is bootstrap carousel? Explain.
The Carousel plugin is like a slideshow which is cycling through a series of content. The

content can be images or text. It has been built by CSS 3D transforms and a bit of

JavaScript."carousel.js"

Q 6. What is navbar in bootstrap and why it is used?
Bootstrap Navbar is a navigation bar which is located at the top of the web page.

Q 7. What is Glyphicons used in Bootstrap?
Glyphicons are the icon fonts that can be used in the web projects. It gives us 260 glyphicons from the Glyphicons Halflings set and these Glyphicons can be used in the text, buttons, toolbars, navigation, forms and many more. Glyphicons are available free of cost for the Bootstrap projects.

Syntax

Example:
                                                   
<span class="glyphicon glyphicon-name"></span>

Q 8. What is form control in bootstrap?
Form control in bootstrap automatically recieves the global styling.All the textual <input>,

<textarea>, and <select> elements with class .form-control have a specific width of 100%.

Q 9. What is accordion bootstrap? Explain.
The bootstrap accordion is a component which organizes the content within the collapsible

items. Bootstrap Accordion shows only one collapsed piece at the same time. For

examples: FAQ Page, Multiple Choice Questions and the Data tables.

Q 10. What is Maxcdn bootstrap?
BootstrapCDN is a public content delivery network. It enables users to load CSS, JavaScript and images remotely from its servers.

Q 12. When we click outside of modal popup, it will close, how to resolve it?
We can resolve this problem in two ways.

1. We can add $('#myModal').modal({backdrop: 'static', keyboard: false})

OR

2.We cam add data-backdrop="static" data-keyboard="false" in <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">

Q 13. What is the difference between bootstrap 3 and bootstrap 4?

Difference between Bootstrap 3 and Bootstrap 4:  

Basis off     - Bootstrap 3 -      Bootstrap 4

Grid System    It is based on 4 tier grid system (xs, sm, md, lg).    It is based on 5 tier grid system (xs, sm, md, lg, xl).
CSS File    LESS    SASS
Button Size    .btn-xs class is supported.    In which their is only .btn-sm and .btn-lg is available.
Horizontal Form    .row class is not required using grid in forms.    .row class is required when using grid in form.
Inverse Table    Not supported.    In which we can add inverse table with the help of .table-inverse class.
Primary Unit    px    rem
Font Size    14px    16px
Responsive Table    In Bootstrap 3, .responsive-table class added to <div> element.    In bootstrap 4, .responsive-table class added using <table> element.
Condensed Table    It support .table-condensed.    It support .table-sm.
Responsive Image    Use .img-responsive class.    Use .img-fluid class.
Image Alignment    Use .pull-right and .pull-left class.    You can use .pull-right, .pull-left and various other classes like .text-left and .text-center.
Structure    For applying dropdown list, we use <ul>, <li>    For applying .dropdown-item we use <a>, <button>.
Color    Limited colors are available it support inverse navbars but not other classes.    There are many colors option .bg-dass or .navbar-light, .navbar-dark classes.
Jumbotron    .jumbotron-fluid class is not required on full-width.    .jumbotron-fluid class for full-width jumbotron.
Label Pill    .label-pill is not available.    .label-pill class for making the corner round.
Pager    It uses .next or .previous.    In which we use .pager-next or .pager-previous.
Class    Use .breadcrumb class against the <ul> tag.    Use .breadcrumb class against the <li> tag.
Afflix    Yes    No
Flexbox    No    Yes
Carousel Item    It uses .item class.    It uses .carousel-item class.
Dividers    Apply .divider class to <li> element.    Apply .dropdown-divider class to <div> element.

14. How to use modal popup in bootstrap?
The Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked.

To see how it is used: https://getbootstrap.com/docs/4.0/components/modal/

15. What are the new features of bootstrap 4?

Replace LESS with Sass. 
New Grid System for Smaller Screens.
Added Outline Buttons.
Brand New Bootstrap Cards.
Convert From Normalize.css to Reboot.css.
Added New Classes for Spacing.
Tooltips and Popovers Powered By Tether.
Improved Media Queries.

Q 16. What is the latest version of Bootstrap?
The latest version of Bootstrap is Bootstrap v5.x. Current major release. Last update was v5.1.1.

Q 17. List the features of Bootstrap.

Here are some of the feature of Bootstrap:

Bootstrap offers LESS or SASS files, and it also includes CSS files
Bootstrap has ready templates which support new developers in making the website.
Bootstrap is an open-source framework
Bootstrap provides grid System.
Bootstrap has some pre styles components like Dropdowns, Navigation Bar, Labels, and Badges, etc.
Bootstrap has many Javascript Plugins.

Q 18. Explain the types of layouts are used in Bootstrap.
There are two types of layouts available in Bootstrap: 

Fluid Layout (.container-fluid): In the Fluid layout, the width is 100 %, this layout changes its width as you are browsing content.
Fixed Layout (.container): In the Fixed layout, the width is adjusted in pixels, it changes in parts (not continuous), and size will be updated at specified intervals.
Both the layouts are responsive, so any of the above two containers can be chosen to create a responsive design website.

Q 19. What is a modal plugin? Explain.
The modal plugin is the small window that is opened over the current page or in other words on the parent window without closing it. This small windows can be called a dialogue box or pop-up window.

If the plugin has to be added individually, then it can be written as modal.js.And when it has to be used as a bootstrap plugin, then bootstrap.js or the minified bootstrap.min.js can be used.

Q 20. What is IMG responsive? Explain.
Bootstrap has inbuilt classes through images can be easily styled like making the image round, circular and effects can also be given to the pictures like thumbnails. in Bootstrap beside styling and giving the effects to the images, images can be made responsive too and for doing that the class .img-responsive is added to the  tag.

<img alt="Night sky" class="img-responsive" />

Q 21. What is bootstrap pagination and how we can use it?
When your site contains a lot of pages, then pagination comes into the picture. Pagination is the handling of the unordered list on your site

To create basic pagination add the .pagination class

Q 22. What is data toggle in bootstrap and how we can use it?
The data-toggle attribute allows us to create a control to collapse/expand a div (block) if we use Bootstrap. The presence of this data-attribute tells Bootstrap to switch between visual or a logical states of another element on user interaction

How to do this: https://getbootstrap.com/docs/5.0/components/collapse/

Q 23. What is grid system and list some grid classes?
The Bootstrap grid System has a limit of 12 columns across the entire page. If a developer does not want to use the 12 columns individually then, it can be merged to create a more full column.

The grid system has the following four classes-

xs (for the phones - screens less than 768px wide)
sm (for the tablets - screens equal to or greater than 768px wide)
md (for the small laptops - screens equal to or greater than 992px wide)
lg (for the laptops and the desktops - screens equal to or greater than 1200px wide)

Q 24. What is the underlying grid structure used in Bootstrap?
The basic grid structure used in Bootstrap is: 

Example:
                                                   
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
</div>

Q 25. What is input groups in Bootstrap?
Its class is a container to enhance an input by adding a button, icon, or text in the frontend. It extended Form Controls.

In Short, using these input groups classes you can easily prepend and append text or buttons.

We have listed some of the most common bootstrap interview questions and answers for experienced developers as well as for freshers.

Example:
                                                   
<div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>

Q 26. What is breadcrumb in bootstrap and how we can use it?
The Bootstrap breadcrumb is a navigator that indicates the current web page's location to the user within the same website or the application. When there are many pages on the website, then the breadcrumb increases the accessibility.

Q 27. How we can create a progress bar using bootstrap?
Progress bars are used to show the progress of a particular task or the specific action to the user.

Here is the example of creating a progress bar with the vertical gradient: 

Example:
                                                   
<div class="progress">
<div class="progress-bar" style="width: 50%;">
<span class="sr-only">50% Complete</span>
</div>
</div>

Q 28. Can you use bootstrap With react js?
You can now use Bootstrap classes with ReactJS code after the Bootstrap stylesheet is successfully integrated into a React app. To best use ReactJS, it would be ideal to import Bootstrap classes as React components. Luckily, this is done by utilizing third-party libraries like react-bootstrap and reactstrap, to do so.

Q 29. Can we use bootstrap without jQuery?
The new Bootstrap removes jQuery. 

JavaScript replacements from jQuery’s most popular features. Here are some examples.

Selecting DOM elements using the # or . notation: document.querySelector('.button')
Waiting for page DOM to load: document.addEventListener("DOMContentLoaded", () => { ... })
Executing AJAX requests: fetch('/api.json').then(response => response.text()).then(body => console.log(body))

Q 30. Explain bootstrap theme.
A Bootstrap theme is a package containing CSS, HTML, and JavaScript code used for styling. Bootstrap themes also feature various UI components and page layouts that can be employed to create websites. You can think of them as website templates created with Bootstrap in mind.