Top 23 Bootstrap Interview Questions & Answers in 2022

1. Explain what is Bootstrap?

Bootstrap is a CSS, HTML and JS framework for developing the web applications with less effort. This framework emphasis on developing mobile web applications.

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

We choose Bootstrap for building websites due to the following reasons:

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

3. What are the key components of Bootstrap?

The key components of Bootstrap are:

• CSS: It comes with plenty of CSS files
• Layout Components: List of layout components
• JavaScript Plugins: It contains many jQuery and JavaScript plugins
• Scaffolding: It gives a basic structure with link styles, Grid system and background
• Customize: To get your own version of framework you can modify your components

4. Explain what are class loaders in Bootstrap?

Class loader is a portion of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also do the process of changing a named class into its equal binary form.

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

There are two types of Layout available in Bootstrap:

Fluid Layout: It is used when you want to build an app that is 100% wide and use up all the width of the screen

Fixed Layout: It is used for a standard screen.

6. Explain what is Bootstrap Grid System?

Bootstrap grid system is used for creating page layout through a series of rows and columns.

7. What are offset columns in Bootstrap?

Offset columns are used for more specialized layouts. For more spacing they can be used by pushing column over.

For example, .col-xs=* classes do not support offset but they are easily simulated using an empty cell

8. What is column ordering in Bootstrap?

Column ordering is one of the features available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and .col-md-pull-* the order of the column can be easily changed.

9. What function you can use to wrap a page content?

The function “.container” is used to wrap a page content and using that you can also center the content.

10. Explain what pagination in bootstrap is and how they are classified?

Pagination is the handling of an unordered list by bootstrap. To handle pagination bootstrap provides following classes

• .pagination: To get pagination on your page you have to add this class
• .disabled, .active: Customize links by .disabled for unclick able links and .active to indicate the current page
• .pagination-Ig, .pagination-sm: Use these classes to get different size item

11. What is the use of Jumbotron in Bootstrap?

Jumbotron is mostly used for content that you want to highpoint like some slogan or headline etc. in other words it is used to expand the size of the headings and to add a margin for landing page content

To use the Jumbotron in Bootstrap

• Create a container <div> with the class of .jumbotron

12. What is the difference between Bootstrap and Foundation?

13. In Bootstrap what are the two ways you can display the code?

In bootstrap you can display code in two ways:

• <code> tag: If you are going to display code inline, you should use <code> tag
• <pre> tag: If you want to display the code as a standalone block element or it has several lines then you should use <pre> tag

14. Explain what are the steps for creating basic or vertical forms?

The steps for creating basic or vertical forms are:

• Add a role form to the parent <form> element
• Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed
• Add a class of .form-control to all texturl <input> , <textarea> and <select> elements

15. Explain what is Modal plugin used for in Bootstrap?

A modal is a child window that is covered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal is created. To improve user experience and to add functionality to users, modal windows are made with the help of Modal plugin.

16. Explain what is Bootstrap Container?

Bootstrap container is a class which creates a centered area within the page where our site content can be put within. The benefit of the bootstrap .container is that it is responsive and will place all our other HTML code.

17. Explain what is a Bootstrap collapsing element?

Bootstrap collapsing elements allows you to collapse any particular element without writing any JavaScript code. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)

18. Explain what a list group in Bootstrap is and what is the use of it?

List groups are components to display both simple and complex element with custom content

For example, a simple list group is created using class .list-group to address the list, and class .list-group-item to address individual item.

19. How you can add badge to list group in Bootstrap?

To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.

20. Explain what media object in Bootstrap is and what are their types?

Media objects in Bootstrap allow you to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the class .media and the source is identified in using the class .media-object. Media-objects are of two types,

They are of two types:

• .media
• .media-list

21. Explain what is Bootstrap well?

Bootstrap well is a container that makes the content to seem sunken or an inset effect on the page. In order to create a well, wrap the content that you would like to appear in the well with a <div> containing the class of .well.

22. Explain how you can create Nav elements in Bootstrap?

Bootstrap provides several options for styling navigation elements all of them use the same markup and base class .nav.

To create Tabular Navigation or Tabs

• Start with a basic unordered list with the base class of .nav
• Then add class .nav-tabs

23. Explain what is the use of Bootstrap Carousel plugin?

Bootstrap Carousel plugin is used to add a slider to your site. It is useful in the situation where you want to display a large amount of contents within a small space on the web pages. Some of the standard carousels are:

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