Frequently asked - Bootstrap Interview Questions and Answers

1. Explain Bootstrap?

Bootstrap is a free and open source front end development framework for the creation of responsive and mobile-first websites and web apps. It is fast, easy and has multiple templates designed using HTML, and CSS. These templates are used for forms, tables, buttons, typography, modals, tables, navigation, carousels and images.

2. What is the difference between Bootstrap 4 and Bootstrap 5?

Bootstrap 4:

5 tier grid system(xs, sm, md, lg, xl).
It has limited colors.
It has jQuery along with all the related plugins.
Bootstrap 4 supports both IE 10 and 11.
Utilities cannot be modified in Bootstrap 4.
Relative positioning of columns is allowed.
Bootstrap 4 doesn’t have its own SVG icons.
Bootstrap 4 supports the jumbotron.
The card deck class, used to create a set of cards with equal width and height, is available in bootstrap 4.
Jekyll software is used by Bootstrap 4.

Bootstrap 5:

6 tier grid system(xs, sm, md, lg, xl, xxl).
Extra colors have been added with the looks.
Jquery is removed and it has switched to vanilla JS with some working plugins.
Bootstrap 5 doesn’t support IE 10 and 11.
Bootstrap 5 allows us to modify and also create our own utility.
Relative positioning of columns is not allowed.
Bootstrap 5 has its own SVG icons.
Bootstrap 5 doesn’t support the jumbotron.
Card deck class has been removed in bootstrap 5.
Hugo software is used by Bootstrap 5.

3. What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
Fixed Layout: For a standard screen you will use fixed layout (940 px) option

4. Explain why to choose Bootstrap for building the websites?

There are few reason why we choose Bootstrap for building websites

Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.
Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.

5. What are the key components of Bootstrap?

There are five key components of Bootstrap:

CSS comes with multiple CSS files
Scaffolding essential for the basic system that consist of Grid system, background and link styles
Layout Components: which shares a list of all layouts
JavaScript Plugins includes jQuery and JavaScript plugins
Customization which allows customization of all components for a desired framework

6. What are class loaders in Bootstrap?

Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.

7. Why do we use Jumbotron in Bootstrap?

Jumbotron has a very basic function in bootstrap i.e. highlighting a content. It could either be a slogan/uvp (unique value proposition) or probably a headline. It increases the heading size and gives a margin for content of the landing page. In order to implement Jumbotron in a Bootstrap use:

 <div class=”jumbotron”>

Jumbotron can have any valid HTML along with other functions and classes.

8. What global styles are applied as a part of Bootstrap’s default typography?

Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica and Arial with sans serif fallback.

All these styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height, which is 10px by default.

9. What is the procedure to create Nav elements in Bootstrap?

There are several styling navigation elements available on bootstrap and every style uses the same function i.e. class .nav. In order to create tabs or a tabular navigation, you can begin with a simple or rather basic unordered list using the function class .nav. To add the tabs the function class .nav-tabs can be used.

10. What are Glyphicons?

Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.

<span class="glyphicon glyphicon-search"></span>

11. When to use “lead” in Bootstrap?

To add some emphasis to a paragraph, add class .lead. This will give you larger font size, lighter weight, and a taller line height.

12. Explain the typography and links in Bootstrap.

Bootstrap sets a basic global display (background), typography, and link styles:

Basic Global display − sets background-color: #fff; on the
Typography − uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
Link styles − sets the global link color via attribute @link-color and apply link underlines only on :hover.

13. How do you make images responsive?

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

14. What do you mean by Bootstrap collapsing elements?

Bootstrap collapsing elements is a way in which you can collapse any specific element without developing any JavaScript code or even an accordion markup. In order to implement this element, you need to add data-toggle=”collapse”in controller element.

To automatically assign the control of the collapsible element, you can use data-target or href along with data-toggle=”collapse”. There are other options also available such as collapse (‘hide’), .collapse (‘show’).

15. What is a list group in Bootstrap and where does it finds its application?

When there is a need for displaying a simple element as well as a complex element along with a custom content, a list group can be used. You can use the function class .list-group to create a simple list that helps in addressing the entire list and class .list-group-item to refer only to an individual item in that list.

16. Explain Modal plugin in Bootstrap?

When there is a need to cover a parent window, a child window can be created using a modal.

Developers generally use a custom Jquery Plugin to create a Modal on Bootstrap. Modal windows are best when it comes to improving the experience of a user and also adding more functionality.

17. What is a Bootstrap Container?

Bootstrap .container is again a class that is used for creating an area in the center of the webpage to place the content. There are row elements which act as containers for columns thereby making a grid system. Rows are used for creating horizontal column groups.

Using the .container, you can get a responsive design, which will include all the other HTML code.

18. Why do we use Bootstrap Carousel plugin?

The Carousel plugin is responsible for adding a slider on the site. The developers usually use it when the web space is limited but the content is huge. Some of the common carousels includes:

.carousel (‘pause’)
.carousel (‘prev’)
.carousel (‘next’)
.carousel (‘number’)
.carousel (‘cycle’)

19. How would you implement a carousel in bootstrap?

Here is an example with a detailed explanation:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ul class="carousel-indicators">
   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
   <li data-target="#myCarousel" data-slide-to="1"></li>
   <li data-target="#myCarousel" data-slide-to="2"></li>
 </ul>
 <!-- Wrapper -->
 <div class="carousel-inner">
   <div class="carousel-item active">
     <img src="img01.jpg" alt="Tomato">
     <div class="carousel-caption">
       <h3>TOMATO</h3>
     </div>
   </div>
  
       <div class="carousel-item">
     <img src="img02.jpg" alt="Potato">
     <div class="carousel-caption">
       <h3>POTATO</h3>
     </div>
   </div>
   
   <div class="carousel-item">
      <img src="img03.jpg" alt="Onion">
      <div class="carousel-caption">
        <h3>ONION</h3>
      </div>
    </div>
 </div>

 <!-- Left and Right Controls -->
 <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
   <span class="carousel-control-prev-icon"></span>
 </a>
 <a class="carousel-control-next" href="#myCarousel" data-slide="next">
   <span class="carousel-control-next-icon"></span>
 </a>
</div>

The outermost <div> is as follows:

For carousel controls to work properly, they must have an id (in this case, id="myCarousel"). This <div> has the class="carousel" to indicate that it contains a carousel. When a new item is displayed, the .slide class adds a CSS transition and animation effect that causes the objects to slide. If you don’t want this effect, leave this class out. When the page loads, the data-ride= "carousel" attribute tells Bootstrap to start animating the carousel right away.

The section on “Indicators” is as follows:

Each slide’s indicators are the small dots at the bottom (which indicates how many slides there are in the carousel, and which slide the user is currently viewing). With the class .carousel-indications, the indicators are supplied in an ordered list. The data-target attribute refers to the carousel’s id. When a user clicks on a given dot, the data-slide-to attribute defines the slide they should go to.

The “Wrapper” section is as follows:

A div with the class .carousel-inner specifies the slides. Each slide’s content is defined by a div with the class .item. This can be in the form of text or visuals. One of the slides must have the .active class applied to it. The carousel will not be viewable otherwise. To generate a caption for each slide, a <div class="carousel-caption"> is added within each <div class="item">.

The section on “Left and Right Controls” is as follows:

This code adds “left” and “right” buttons, allowing the user to manually navigate between slides. The data-slide attribute takes the keywords “prev” or “next,” which change the position of the slide in relation to its current location.

20. What is a progress bar in bootstrap?

Progress bar is used with HTML tag style in HTML element using progress keyword. In bootstrap we used html5 progress with CSS classes that have special features in bootstrap, that is only made for the progress bar.

Bootstrap Interview question and answers - Part 02

Frequently asked - Bootstrap Interview Questions and Answers - Part 01

Related Articles