Bootstrap Interview Questions Part 2

What are the advantages of Bootstrap?

The following are some advantages of Bootstrap:

Bootstrap is simple to use and anyone with a basic understanding of HTML and CSS can get started.
Features that adapt to phones, tablets, and desktops: Bootstrap’s responsive CSS adapts to phones, tablets, and desktops.
A mobile-first strategy: Mobile-first styles are built into the Bootstrap framework.
Bootstrap 4 is compatible with all modern browsers, including Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera.

What are the default Bootstrap text settings?

The default font size in Bootstrap 4 is 16px, with a line-height of 1.5.

The default font family is “Helvetica Neue,” which includes Helvetica, Arial, and other sans-serif fonts.

Margin-top: 0 and margin-bottom: 1rem are also set on all <p> elements (16px by default).

What do you know about the Bootstrap Grid System?

The Bootstrap Grid System is a mobile-first, responsive grid system that scales up to 12 columns as the device or viewport size grows. Predefined classes for quick layout options and powerful mix-ins for creating successful semantic layouts are included in the system.

There are five classes in the Bootstrap 4 grid system:

.col- for extra small devices, whose screen width is less than 576px.
.col-sm- small devices, whose screen width is equal to or greater than 576px.
.col-md- medium devices, whose screen width is equal to or greater than 768px.
.col-lg- large devices, whose screen width is equal to or greater than 992px.
.col-xl- extra large devices, whose screen width is equal to or greater than 1200px.

The classes listed above can be combined to build layouts that are more dynamic and adaptable.

Bootstrap Interview Questions

What is the difference between Bootstrap 4 and Bootstrap 5

PARAMETER	BOOTSTRAP 4	BOOTSTRAP 5
Grid System	5 tier grid system(xs, sm, md, lg, xl).	6 tier grid system(xs, sm, md, lg, xl, xxl).
Color	It has limited colors.	Extra colors have been added with the looks.
Jquery	It has jQuery along with all the related plugins.	Jquery is removed and it has switched to vanilla JS with some working plugins.
Internet Explorer	Bootstrap 4 supports both IE 10 and 11.	Bootstrap 5 doesn’t support IE 10 and 11.
Form elements	Radio buttons and checkboxes look different in different OS and browsers.	The look of form elements does not change on different OS or browsers.
Utilities API	Utilities cannot be modified in Bootstrap 4.	Bootstrap 5 allows us to modify and also create our own utility.
Vertical Classes	Relative positioning of columns is allowed.	Relative positioning of columns is not allowed.
Bootstrap Icons	Bootstrap 4 doesn’t have its own SVG icons.	Bootstrap 5 has its own SVG icons.
Jumbotron	Bootstrap 4 supports the jumbotron.	Bootstrap 5 doesn’t support the jumbotron.
Card deck	The card deck class, used to create a set of cards with equal width and height, is available in bootstrap 4.	Card deck class has been removed in bootstrap 5.
Navbar	We have the inline-block attribute, and the default for the dropdown-menu-dark class is a white dropdown.	The inline-block property has been removed, and the dropdown-menu-dark class now uses a black dropdown as the default.
Static Site Generator	Jekyll software is used by Bootstrap 4.	Hugo software is used by Bootstrap 5.

What is the difference between Bootstrap 3 and Bootstrap 4

PARAMETER	BOOTSTRAP 3	BOOTSTRAP 4
Grid System	4 tier grid system (xs, sm, md, lg).	5 tier grid system (xs, sm, md, lg, xl).
CSS File	LESS	SASS
Button Size	Bootstrap 3 supports .btn-xs class.	Only .btn-sm and .btn-lg are available in bootstrap 4.
Horizontal Form	We do not need a .row class using a grid in forms.	.row class is needed when using the grid in form.
Inverse/dark Table	.table-inverse class is not supported.	.table-inverse class is supported.
Primary Unit	Primary unit is px.	Primary unit is rem
Table Head Styles	Table head styles are not supported.	In bootstrap 4, table head styles with the .thead-light and .thead-dark classes.
Condensed Tables	It supports .table-condensed.	It supports .table-sm.
Responsive Image	.img-responsive class is to be used.	.img-fluid class is to be used.
Image Alignment	Use the .pull-right and .pull-left class.	One can use .pull-right, .pull-left and other such classes like .text-left and .text-center.
Structure	In order to apply dropdown list, we use <ul>, <li>	In order to apply .dropdown-item, we use <a>, <button>.
Color	Limited colors are available; it supports inverse navbars but not other classes.	There are many colors; .bg-dass or .navbar-light, .navbar-dark classes are supported.
Jumbotron	.jumbotron-fluid class is not required for full-width.	.jumbotron-fluid class is required for a full-width jumbotron.
Show content	.in is used to expand content when the page loads.	.show is used to expand content when the page loads.
Glyphicons	Supported.	Not supported.
Breadcrumb class	.breadcrumb class is used against the <ul> tag.	.breadcrumb class is used against the <li> tag.
Affix	Supported.	Not supported.
Flexbox	Not supported.	Supported.
Carousel Item	It uses the .item class.	It uses the .carousel-item class.
Dividers	.divider class is applied to <li> element.	.dropdown-divider class is applied to <div> element.
Panels, Wells and Thumbnails	Supported.	Not supported. Cards are used instead.

What is a Button Group, and what is the class for a basic Button Group?

Multiple buttons can be placed together on a single line using button groups. You can use this to group objects together, such as alignment buttons.

The .btn-group class is used for basic button groups. You can use the class .btn to wrap a set of buttons in .btn-group.

Advance Bootstrap Interview Questions

Breadcrumbs are a wonderful way to display a site’s hierarchy-based information. Breadcrumbs can show the dates of publication, categories, and tags in the case of blogs. They show where the current page is in the navigational hierarchy.

In Bootstrap, a breadcrumb is essentially an unordered list with the class .breadcrumb. CSS adds the separator for you automatically

How can you use Bootstrap to make thumbnails?

To make thumbnails with Bootstrap, go through the steps below:

Wrap an image in an <a> tag with the class .thumbnail. It will add a grey border and four pixels of padding. An animated light will now outline the image when it has hovered over.

In Bootstrap, what are the two codes for displaying code?

In Bootstrap, there are two straightforward ways to display code:

The <code> element is used to showcase a piece of inline code.
You can use the <pre> tag to display a code that has multiple lines or even a block element.

Bootstrap Interview Questions

In Bootstrap 4, what is flexbox?

Flexbox is a layout module for flexible boxes. Without using float or positioning, you can quickly create a flexible layout design with flexbox.

In Bootstrap, how do you make navigation elements?

The navigation elements in Bootstrap can be styled in a variety of ways. The markup and base class are the same in all of these .nav. To build tabular navigation or tabs, execute the following steps:

Begin by creating an unordered list using the base class of .nav. The .nav-tabs class should be added.

What contextual classes can be used to style the panels?

Use the .spinner-border class to make a spinner/loader.

<div class= "spinner-border" ></div>

If you want the spinner/loader to grow instead of “spin”, use the .spinner-grow class.

<div class= "spinner-grow" ></div>

Advance Bootstrap Interview Questions

Explain input groups in Bootstrap.

The .input-group class is a container for enhancing an input by adding a “help text” icon, text, or button in front or behind the input field.

To add the help text in front of the input, use .input-group-prepend, and to add it behind the input, use .input-group-append.

Finally, style the provided help text with the .input-group-text class.

Discuss Bootstrap table and various classes that can change the appearance of the table.

A basic Bootstrap 4 table features horizontal divisions and light padding.
The .table class gives a table some basic styling.
The .table-striped class gives zebra stripes to the table.
The .table-bordered class adds borders to the table and cells on all sides.
On table rows, the .table-hover class adds a hover effect (grey background color).

Write the HTML code to create a basic toast.

When something happens, the toast component acts as an alert box that only appears for a few seconds (i.e. when the user clicks on a button, submits a form, etc.).

<div class= "toast" >
 <div class= "toast-header" >
   Toast Header
 </div>
 <div class="toast-body">
   Toast Body Text
 </div>
</div>

Bootstrap Interview Questions

What is the media object in Bootstrap and what are their types?

Bootstrap’s media objects allow you to position media objects such as images, videos, and audio to the left or right of content blocks. Media elements can be constructed using the class .media and the source is specified by using the class .media-object. There are two types of media objects:

.media
.media-list

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="ap.jpg" alt="Apple">
     <div class="carousel-caption">
       <h3>APPLE</h3>
     </div>
   </div>
  
       <div class="carousel-item">
     <img src="or.jpg" alt="Orange">
     <div class="carousel-caption">
       <h3>ORANGE</h3>
     </div>
   </div>
   
   <div class="carousel-item">
      <img src="kw.jpg" alt="Kiwi">
      <div class="carousel-caption">
        <h3>KIWI</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.

What do you mean by the Bootstrap well?

The Bootstrap well is simply a container that makes the content appear sunken. It can also produce an inset effect on the webpage. With the aid of <div> and class, a developer may create a well and also wrap the content in the well. The content will be displayed according to your preferences.

Advance Bootstrap Interview Questions

What are glyph icons?

Glyph icons are icon fonts that you can use on your website. Their developer has made them freely available for Bootstrap projects.

To utilize the icons, simply copy and paste the following code anywhere in your code. To ensure adequate padding, leave a space between the icon and the text.

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

Note: Bootstrap 4 lacks an icon library of its own (Glyphicons from Bootstrap 3 are not supported in BS4).

What do you understand by column ordering in Bootstrap?

One of the most intriguing properties of bootstrap is column ordering. The columns can be readily written in a specific order by utilizing relevant functions. You might alternatively put them in a different column. Use the push and pull column classes to easily rearrange or rearrange the order of the columns. These classes are used in conjunction with the .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# Bootstrap grid classes.

.col-xs-push-# and .col-xs-pull-# are the push and pull classes for the Bootstrap grid. This also works well for sm, md, and lg. The pull class moves columns to the left, whereas the push class moves them to the right.

Explain the affix plugin?

The affix plugin allows you to affix a <div> to a particular location on the page. You may also use this plugin to turn on and off the pinning. Social icons are a good example of this. They’ll start in one position, but when the page reaches a certain point, the <div> will be frozen in place and will no longer scroll with the rest of the page.

Bootstrap Interview Questions

What are Bootstrap collapsing elements?

You may collapse any element with Bootstrap collapsing elements without creating any JavaScript code or accordion markup. To automatically delegate control of a collapsible element in bootstrap, add data-toggle= “collapse” to the controller element along with a data-target or ref. You may also do the same thing with .collapse (options), .collapse (‘show’), or .collapse (‘hide’).

In Bootstrap, what is a scroll spy?

It’s an auto-updating nav component that allows you to grab sections of the page based on where you’re scrolling. Based on the scroll position, the .active class will update from one nav item to the next.

Why is Jumbotron used in Bootstrap?

In Bootstrap, Jumbotron is used to highlight contents. It enlarges the headline and provides a margin for the landing page’s content. In order to implement Jumbotron in Bootstrap, create a container div with the .jumbotron class.

Advance Bootstrap Interview Questions

When the user moves the mouse pointer over an element, the Tooltip component appears as a little pop-up box. The Popover component is a pop-up box that emerges when the user clicks on an element. The popover may hold a lot more information.

The popover will show on the right side of the element by default. To position the popover on the top, bottom, left, or right side of the element, use the data-placement attribute.

When you click on the element again, the popover closes by default. However, the data-trigger=”focus” attribute can be used to close the popover when the user clicks outside the element.

Use the data-trigger attribute with the value “hover” if you want the popover to appear when you move the mouse cursor over the element.

Explain why Bootstrap is preferred for website development.

Bootstrap has better features as compared to other web development platforms. It provides extensive browser support for almost every known browser such as Opera, Chrome, Firefox, Safari, etc. If you are well-acquainted with CSS and HTML, web development becomes easy on Bootstrap.

Also, it supports mobile applications with the help of responsive design and can adjust CSS as per the device, screen size, etc. Instead of creating multiple files, it creates only a single file reducing the work of a developer.

Bootstrap Interview Questions

What are the key components of Bootstrap?

The key components of Bootstrap include:

CSS: It consists of various CSS files
Scaffolding: It provides a basic structure with the Grid system, link styles, and background
Layout Components: This gives the list of layout components
JavaScript Plugins: It contains many jQuery and JavaScript plugins
Customize: To get your own version of the framework, you can customize your components

List some features of Bootstrap.

Some of the features of Bootstrap are:

It provides an open-source for use
Bootstrap has Compatibility with all browsers
It has Responsive designs
Easy to use and fast

What are Class loaders in Bootstrap?

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

Advance Bootstrap Interview Questions

What is Contextual classes of table in Bootstrap?

Class	Description
.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 negative action

How many types of layout are available in Bootstrap?

There are two major layouts for Bootstrap:

Fluid Layout- This layout is necessary for creating an app that is 100 % wider and covers all the screen width.
Fixed Layout- It is used only for a standard screen (940px). Both layouts can be used for creating a responsive design.

What is Bootstrap Grid System?

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Bootstrap Interview Questions

Give an example of a basic grid structure in Bootstrap.

Example of a basic grid structure:

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

Why do we use Jumbotron in Bootstrap?

Jumbotron is used for highlighting content in bootstrap. It could either be a slogan or probably a headline. It increases the heading size and gives a margin for the content of the landing page. To implement Jumbotron in a Bootstrap, you have to use:

Create a container <div> with the class of .jumbotron
For example, use <div class=”container”> if you don’t want Jumbotron to reach the screen’s edge.

What are the two codes used for code display in Bootstrap?

There are two simple ways to display code in Bootstrap:

<code> tag: This tag is used to display an inline code.
<pre> tag: If you have a code with several lines or even a block element, you can display it using this.

Advance Bootstrap Interview Questions

Explain the typography and links in Bootstrap.

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

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

What is a progress bar in bootstrap?

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

How do you make images responsive?

Bootstrap 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.

Bootstrap Interview Questions

What is the difference between Bootstrap and Foundation?

Bootstrap	Foundation
Bootstrap offers an unlimited number of UI elements	In Foundation UI element options are very limited in numbers
Bootstraps uses pixels	Foundation use REMs
It encourages to design for both desktop and mobile	Foundation encourages to design mobile first
Bootstrap support LESS as its preprocessor	It supports Sass and Compass as its preprocessor

What are the steps for creating basic or vertical forms?

The steps for creating basic or vertical forms include:

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

What is Bootstrap collapsing elements?

Bootstrap collapsing elements enable you to collapse any particular element without writing any JavaScript code or the accordion markup. To apply collapsing elements in bootstrap, you need to add data-toggle= “collapse” to the controller element along with a data-target or ref to automatically assign control of a collapsible element. Also, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’) for the same.

Advance Bootstrap Interview Questions

Explain types of lists supported by Bootstrap

Bootstrap supports three types of lists such as:

Ordered lists − An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
Unordered lists − An unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear then you can remove the styling by using the class .list-unstyled.
Definition lists − In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term. Subsequently, the <dd> is the definition of the <dt>.

What is media object in Bootstrap and what are their types?

Media objects in Bootstrap help 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 specified in using the class .media-object. Media-objects are of two types.

The two types of media object are:

.media
.media-list

Explain the uses of carousel plugin in Bootstrap.

Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are several carousel plugins that are used in bootstrap to display large contents within a small space by adding sliders.

Examples: .carousel(options), .carousel(‘pause’), .carousel(cycle’), .carousel(‘prev’), .carousel(‘next’).

Bootstrap Interview Questions

How can you create Nav elements in Bootstrap?

Bootstrap offers various options for styling navigation elements. All of these use the same markup and base class .nav. You need to perform the following steps to create Tabular Navigation or Tabs:

Start with a basic unordered list with the base class of .nav
Add class .nav-tabs

What are glyph icons? How to use them?

Glyph icons are icon fonts which can be used in your web projects. Glyph icons Halflings are not free and require licensing. However, their creator has made them available for Bootstrap projects without any cost.

To use the icons, you just have to 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>

What are the steps to create basic or vertical forms?

The steps involved in creating vertical or basic forms are:

Firstly, a role form can be added to the parent <form> element.
Next, you have to add appropriate spacing by wrapping labels and control in <div> and using the function ‘class .form-group’.
Finally, apply the function ‘class .form-control’ to different elements such as text url <input> , <text area> and <select>

Advance Bootstrap Interview Questions

What do you mean by Bootstrap well?

Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage. Thus, a developer can create a well and also wrap the content in the well with the help of <div> and class .well. The content would appear as per your wish.

What are the input groups in Bootstrap?

Input groups are extended Form Controls. You can easily prepend and append text or buttons to the text-based inputs with the help of input groups. Also, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

To prepend or append elements to a .form-control you need to do the following:

Wrap it in a <div> with class .input-group
In the next step, place your extra content inside a <span> with class .input-group-addon.
Now place this <span> either before or after the <input> element.


Bootstrap Part 1		Bootstrap Part 3

What are the advantages of Bootstrap?

What are the default Bootstrap text settings?

What do you know about the Bootstrap Grid System?

What is the difference between Bootstrap 4 and Bootstrap 5

What is the difference between Bootstrap 3 and Bootstrap 4

What is a Button Group, and what is the class for a basic Button Group?

What is a breadcrumb in Bootstrap?

How can you use Bootstrap to make thumbnails?

In Bootstrap, what are the two codes for displaying code?

In Bootstrap 4, what is flexbox?

In Bootstrap, how do you make navigation elements?

What contextual classes can be used to style the panels?

Explain input groups in Bootstrap.

Discuss Bootstrap table and various classes that can change the appearance of the table.

Write the HTML code to create a basic toast.

What is the media object in Bootstrap and what are their types?

How would you implement a carousel in bootstrap?

What do you mean by the Bootstrap well?

What are glyph icons?

What do you understand by column ordering in Bootstrap?

Explain the affix plugin?

What are Bootstrap collapsing elements?

In Bootstrap, what is a scroll spy?

Why is Jumbotron used in Bootstrap?

How is tooltip different from popover?

What classes can help you change the default settings of positioning a popover and closing a popover?

Explain why Bootstrap is preferred for website development.

What are the key components of Bootstrap?

List some features of Bootstrap.

What are Class loaders in Bootstrap?

What is Contextual classes of table in Bootstrap?

How many types of layout are available in Bootstrap?

What is Bootstrap Grid System?

Give an example of a basic grid structure in Bootstrap.

Why do we use Jumbotron in Bootstrap?

What are the two codes used for code display in Bootstrap?

Explain the typography and links in Bootstrap.

What is a progress bar in bootstrap?

How do you make images responsive?

What is the difference between Bootstrap and Foundation?

What are the steps for creating basic or vertical forms?

What is Bootstrap collapsing elements?

Explain types of lists supported by Bootstrap

What is media object in Bootstrap and what are their types?

Explain the uses of carousel plugin in Bootstrap.

How can you create Nav elements in Bootstrap?

What are glyph icons? How to use them?

What are the steps to create basic or vertical forms?

What do you mean by Bootstrap well?

What are the input groups in Bootstrap?