By providing a number of templates and ready-made solutions, Bootstrap makes it easier to create layouts. In modern browsers and different devices, Bootstrap-designed websites are displayed the same. Thus, it is highly recommended to learn Bootstrap in 2021.

1) Explain what Bootstrap is?

Bootstrap is a framework that enables developers to create interactive web applications with minimal effort. Specifically, this framework focuses more on mobile web applications. It uses HTML, CSS, and Javascript.

2) What are the core components of Bootstrap?

The key components of Bootstrap are:

• CSS: Lots of CSS files included.

• Scaffolding: It includes a grid system, link styles, and a background.

• Layout Components: List of layout components.

• JavaScript Plugins: It contains many javascript and jQuery plugins.

• Customize: For your own version of the framework, you can customize your components.

3) What are the different types of layouts in Bootstrap?

Bootstrap provides two types of layouts:

• Fixed Layout: You will use the fixed layout (940 px) option for a standard screen.

• Fluid Layout: If you wish to create an app that covers the entire screen, then you'll use a fluid layout.

4) Explain what class loaders are in Bootstrap?

Classloader is a part of JRE (Java Runtime Environment), which loads Java classes into the Java virtual environment. In addition, class loaders convert named types into their equivalent binary forms.

5) Why should we use Bootstrap to build websites?

Here are a few reasons why we should use Bootstrap to build websites.

• Mobile Support: It provides full support in one single file for mobile devices rather than a separate file. It supports responsive design, which means that you can adjust CSS according to the type of device, size of the screen, etc. It reduces the extra effort for developers.

• Easy To Learn: Bootstrap is easy to learn if you are familiar with HTML and CSS.

• Browser Support: It offers support for all popular web browsers like Opera, Firefox, IE, Safari, etc.

6) What are offset columns in Bootstrap?

For more specialized layouts, offsets are a helpful feature. They can be pushed over to create more spacing. For instance, .col-xs=* classes do not support offset but can be easily duplicated using an empty cell.

7) Explain what Bootstrap Grid System is?

Bootstrap includes a flexible, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. In addition to pre-defined classes, it provides powerful mixins for generating a more semantic layout.

8) What function can you use to wrap a page's content?

To wrap page content, you can use .container, and using that; you can also center the content.

9) Explain what pagination in Bootstrap is and how they are classified?

Pagination is how Bootstrap handles unordered lists. The following classes are used to handle pagination:

• .pagination: You should add this class to your page to get pagination.

• .disabled, .active: Use .disabled for unclickable links and .active to indicate the current page.

• .pagination-Ig, .pagination-sm: Use these classes for different-sized items.

10) What is the use of Jumbotron in Bootstrap?

In Bootstrap, Jumbotron is generally used to enlarge headings' size and add a margin for landing page content. In other words, it is used to highlight certain content, such as a slogan or marketing headline. To use the Jumbotron in Bootstrap:

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

11) How does Bootstrap differ from Foundation?

Bootstrap

• Bootstraps uses pixels.

• Bootstrap encourages design for both desktop and mobile.

• Bootstrap supports LESS as its preprocessor.

• Bootstrap offers an unlimited number of UI elements.

Foundation

• Foundation uses REMs.

• Foundation encourages to design mobile-first.

• Foundation supports Sass and Compass as its preprocessor.

• In Foundation, the options for UI elements are limited.

12) What are the Contextual classes of a table in Bootstrap?

Class:

• .active - Applies the hover color to a particular row or cell

• .success - Indicates a successful or positive action

• .warning - Identifies a warning that might need attention

• .danger - Indicates a dangerous or potentially damaging action

13) In Bootstrap, which two codes are used to display code?

In Bootstrap, you can display code in two simple ways:

<code> tag: This tag is used to display an inline code.

<pre> tag: You can insert this into your code if it includes more than one line or a block element.

14) Describe the typography and links in Bootstrap.

Bootstrap provides a simple graphical presentation, typography, and link style.

• Basic Global display − This sets background-color: #fff; on the element.

• Typography − Font-family, font-size, and line-height attributes are used as the typographic basis.

• Link styles − The attribute link color sets the global link color and underlines the link only on :hover.

15) Describe the types of lists supported by Bootstrap.

Bootstrap supports three types of lists:

• Ordered Lists - An ordered list consists of items in a certain order that are prefixed by numbers.

• Unordered Lists - The unordered list is a list without any particular order. It has traditionally been styled with bullets, but you can remove that style using the class .list-unstyled.

• Definition Lists - Definition lists consist of both the dt> element and the dd> element. The dt> element stands for the definition term, while the dd> element is the definition of the dt> element.

16) How do you create navigation elements in Bootstrap?

Bootstrap offers several options for styling navigation elements. They all share the same markup and base class .nav. You need to follow these steps to create Tabular Navigation or Tabs.

• Create an unordered list with the base class of .nav.

• Add class .nav-tabs

17) What do you mean by Bootstrap Well?

Bootstrap wells are simply containers that make content appear to sink. In some cases, it can also create an inset effect on the webpage. Therefore, a developer can create a well and also wrap content using div> and class .well.

18) What are the input groups in Bootstrap?

With input groups, you can easily prepend and append text or buttons to form fields. You can also add common elements to a user's input. For instance, you can add the dollar symbol or the @ sign for a Twitter handle.

A .form-control element can be prepended or appended by using the following syntax:

• Wrap it in a div> with the class .input-group

• In the next step, place your extra content inside a with class .input-group-addon.

• Now place this either before or after the element.

19) What is Bootstrap Breadcrumb?

An excellent way to display hierarchy-based information on a site is through breadcrumbs. When used on a blog, breadcrumbs can display dates of publication, categories, and tags. Breadcrumbs indicate the current link's location in the navigation structure.

In Bootstrap, a breadcrumb is simply an unordered list with the class .breadcrumb. The separator is automatically added by CSS.

20) What is a Bootstrap Container?

Bootstrap containers create a central area on the page where you can place our site content. The bootstrap .container has the advantage of being responsive and will place all our other HTML code.

21) Name some Bootstrap alternatives?

Even though Bootstrap has been one of the most popular front-end frameworks, some other frameworks or bootstrap alternatives; which are equally good and may suit your requirement better. Here are some alternatives for Bootstrap:

• Foundation by Zurb
• Bulma
• Skeleton
• Pure
• Groundwork
• Cardinal
• Powertocss
• Mueller
• Bootflat
• Materialize

If you have made it this far, then certainly you are willing to learn more. Here are some more topics related to interviewing questions that we think will be interesting for you.

• 21 PHP Interview Questions & Answers You Should Prepare In 2021
• 20 Most-Asked CSS Interview Questions & Answers You Should Know In 2021
• 15 Frequently Asked HTML Interview Questions You Must Know About