Top Bootstrap Interview Questions and Answers

1. What do you understand by Bootstrap?

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter, is free and open source front end Javascript web framework for designing the rich, sleek, intuitive web applications with minimal effort. This framework is more useful for building mobile based web applications. It uses HTML, Javascript and CSS based design templates and other interface components. It also has optional JavaScript extensions.

2. Why would you use Bootstrap? Tell me about its benefits.

The major benefits of using Bootstrap are-

  • It is a free and open-source Web Designing Framework
  • It has support of all the web browsers like Internet Explorer, Google Chrome, Firefox, Opera, Safari etc.
  • It is a very powerful mobile first front-end framework
  • It is very easy to start as one needs to have idea of HTML and CSS only to work with it
  • We can design responsive website through it which adjust to desktop, tablet and mobile
  • It comprises functional built-in components which are easy to customize
3. Which components are there in Bootstrap?

Main components of Bootstrap are-

  • Reusable Components : It contains plenty of reusable layout components
  • CSS : It contains lots of CSS files
  • jQuery & JavaScript Plugins: It comprises many jQuery and JavaScript plugins
  • Scaffolding : It comes with a basic structure with link styles, grid system and background
  • Customization: You have a freedom to customize components as per your wish
4. Tell me about different layouts available in Bootstrap.

Two layouts are available in Bootstrap-
1. Fluid Layout-Its design automatic adjusts to the browser size.
2. Fixed Layout-Its design doesn’t adjust automatically to different browsers but it can be responsive.

5. Could you explain me about responsive layout?

Responsive layout’s design automatic adjusts to the browser size but when resizing, the number of columns changes according to the space available.

6. Would you differentiate between Fluid Layout & Responsive Layout?

Yes, sure. The main difference is that Fluid Layout are built using widths percentages and they are based on proportionally laying out the website so elements take up the same percent of space on different screen sizes. Responsive Layout is built on a fluid grid and here CSS Media Queries are used to present different layouts based on different screen sizes.

7. How the images are made responsive?

In order to make the images responsive, we need to add a class .img-responsive to the  tag. This class sets maximum width equal to 100%, and height to auto adjustable to the image.

8. Tell me about Bootstrap Media Queries?

Bootstrap Media Queries are CSS techniques which are introduced in CSS3 that allow the designer to show, hide and move contents according to the size of viewport. @media is used to include a bunch of CSS properties if a certain condition is true.

9. Would you explain Bootstrap Grid System?

Bootstrap Grid System is used for creation of page layout in rows & columns to store the contents. It can adjust up to 12 columns according to increase in the size of the device or viewport. Predefined grid classes have been included in Bootstrap 3 for designing different grid layouts for different devices like mobiles, tablets, desktops and laptops.

10. Do you have an idea as to why Modal Plugin is used in Bootstrap?

Modal Plugin is used to create modal window to add more functionalities for the user. A modal is a child window that is layered over its parent window. We can create Bootstrap Modal using a custom jQuery Plugin.

11. What do you understand by a list group in Bootstrap and its use?

List group is a powerful and flexible component to display simple and complex elements together with custom contents. A simple list group is created using class .list-group to address the list with usage of <ul> element, and class .list-group-item to address individual item with usage of <li> elements.

12. What do you mean by button group and which class is used for basic button group?

We can group multiple buttons on a single line using Button groups. We can add on optional JavaScript radio or checkbox style behaviour with our buttons plugin. .btn-group class is used for a basic button group.

13. Can you explain about bootstrap alerts and how to create them?

We can create style messages for users with the help of Bootstrap Alerts. They provide feedback in the form of context message against specific user actions. Basic alerts can be created through a wrapper <div> and adding a class of .alert following by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger.

14. Would you tell me something about Glyphicons and how are they written in our code?

Glyphicons are symbols and icon fonts which are created for providing simplicity and easy orientation in your web projects. Glyphicons Halflings are normally not available for free use and they require licensing but their creator has made them cost free for Bootstrap projects. Bootstrap includes more than 250 glyphs from the Glyphicon Halflings set. To use the icons, we need to write <span class = “glyphicon glyphicon-search”></span> code anywhere in our program.

15. How would you define Bootstrap Pagination?

Whenever a web site has lots of pages, we need to do pagination to each page. In Bootstrap, we can create a basic pagination by adding the .pagination class to an <ul> element.

16. How would you to classify pagination in bootstrap?

We need to add a class “pagination” on our page. We can add .pagination-lg class for larger blocks, and .pagination-sm class for smaller blocks to get different sizes.

17. Could you describe Bootstrap caraousel?

We can add a slider to our web site using Bootstrap carousel. It is a flexible, handy and responsive way to add a caraousal or slideshow to our site. Carousel plugin is a component which is used for the same.

18. Why Bootstrap Container is used in Bootstrap?

Bootstrap container is a class used for creating a centred area in the page for display.

19. Would you define Bootstrap Well?

Bootstrap .well is a container class which makes rounded border around the content with a gray background colour and some padding. There is the option to change the size of the well by adding the .well-sm class for small wells and .well-lg class for large wells. Default well size is normal.

20. Describe Bootstrap Panel?

Whenever there is a need of putting the contents in a bordered box with some padding around, panel components are used. They can be created with the .panel class and content inside the panel has a .panel-body class. For creating a basic panel, add class .panel to the <div> element and add class .panel-default to this element.