Bootstrap interview question set 2/Bootstrap Interview Questions and Answers for Freshers & Experienced

Horizontal Form in Bootstrap

The form-horizonal class is used in Bootstrap for Horizontal form. The labels are aligned horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).

What comes under the Bootstrap package?

A Bootstrap package includes reusable components, plugins, jQuery plugins, etc. Bootstrap is an open source framework for designing responsive websites with HTML, JavaScript and CSS. Developed by Twitter in 2011, it is a front-end framework for easier web development.

Let us see what all comes under the Bootstrap package:

Custom jQuery Plugins
jQuery is a JavaScript library. Bootstrap has 12 custom jQuery plugins, such as Modal, Dropdown, Tab, Tooltip, Alert, Collapse, Affix, etc. You can include these plugins individually or all at once and extend more functionalities to the website.

The global CSS settings are part of the Bootstrap packages. It has extendable classes and enhanced grid system as well.

Bootstrap comes with Grid System, link styles, etc and all this comes under the Bootstrap package.

Reusable Components
Bootstrap has lot of components to add more functionalities to your website. Some of the examples include, navbar, alerts, iconography, navigation, dropdowns, pagination, badges, labels, etc.

Customize Components
Bootstrap allow you to customize components, jQuery plugins etc. Customize them accordingly and work with what you want from the component or plugin.

What contextual classes are used with progress bars in Bootstrap?

The contextual classes used with progress bars are:


What are the advantages of Bootstrap?

There are many advantages of using Bootstrap,
1. Bootstrap Css library takes care of our UI to make interactive mobile + desktop enabled websites, developers can even create a fully furnished jaw dropping website easily.
2. The speed of development can be increased with the help of Bootstrap.
3. With the increase in mobile first, website designers need to work a lot in order to make the UI adapt to all kinds of devices, whereas with the help of bootstrap this overhead has been reduced to quite an extent.
4. Responsive Grid: As you go in depth with Bootstrap and read about Grid you will see that 12 columns are grids and are responsive and you can make them self-adjusting according to the device.
5. There is a huge list of Components -- Dropdown menu, badges etc. A few have been discussed in this article.
6. Easy to read documentation: I personally believe if you want to learn Bootstrap from scratch documentation is easy and great to start with. I personally appreciate their efforts we can go back to the site whenever we something is needed in our View.
7. Themes: Bootstrap provides free colorful themes that can be used in our Web Application.

How can you create Fixed Layout with Bootstrap?

With Bootstrap you can create layouts of web pages based on a fixed number of pixels. To create the fixed yet responsive layout you should start the container with the .container class. Then create the row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be created within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents a grid number.

The following code creates a fixed width responsive layout that is 970px wide on a medium device like desktop and laptop with a screen width ≥992px and 1170px wide on large devices like large desktops with a screen width ≥1200px. However the layout width will be automatically calculated for devices that have a screen width <768px like tablets and cell phones.

Define Kickstrap?

Kickstrap is a product where AngularJS is baked together with Bootstrap in conjunction with JavaScript Package Manager (JSPM). You can leverage the advantage of running an authenticated database-driven web application without the native backend. Kickstrap uses Firebase adhering to a Backend as a Service (BaaS) model.

Define UI Bootstrap?

UI Bootstrap incorporates Bootstrap components written in AngularJS by the AngularUI team. It aims to provide AngularJS directives with the markup and CSS of Bootstrap. It has dependencies on AngularJS and Bootstrap CSS.

What do you understand about Responsive websites?

The first understanding of Responsive websites that comes to a beginner's mind is that responsive means a website that responds to a user. But actually, responsiveness here means that a website is designed in such a way that it can be used on any platform whether it is a large desktop, laptop, tablet or mobile.

So a responsive website actually is one that responds to the changing width and height of a device or screen.

Benefits of a responsive website
1. We all know that in today's world, all of the business work can be done using a small device like a tablet or a mobile. So it makes it easier for the user to access the website using a device, thus, increasing the user base and traffic on a website.
2. When the user base increases, it also adds to the increase in the business of the website and the product sale will also increase.
3. Makes it easy for an organization to analyze the user base and its productivity.
4. Increase in the visibility in search engines. This is the major part of the success of an organization.
5. Save time and cost on mobile development.

Why choose Bootstrap for building websites?

Bootstrap is used for building websites for the following reasons,
Mobile First Approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
Browser Support: It is supported by all popular browsers.
Easy to Get Started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components that are easy to customize. It also provides web based customization.

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

How is the tabbed navigation menu created in Bootstrap?

Tabbed navigation can be created by using an unordered list along with the base class of .nav. Afterward, .nav-tabs class is added.

Where are the .media and .useful classes used in Bootstrap? class lets a media object, such as images, audio, or video, to move to the right or left of a content block. Generally, for putting a content thread or to add a list of articles in an unordered list, the .useful class is used.

What do responsive utility classes do in bootstrap?

These sets of classes are used to conceal HTML elements depending on screen resolution that separates by a media query. For Example: ‘hidden-md-down', It hides

Where tag and tag used in bootstrap?

tag- It is used when there is a need to show the code inline. tag- It is used when there is a need to show code with multiple lines.

Explain the various types of lists supported by Bootstrap?

Three types of lists supported by Bootstrap are:

Definition Lists – It has both the and the elements. The stands for definition term, which is used to define a term or phrase. The element is used to define the element.

Ordered Lists – This list uses numbers as a prefix to set a sequential order.

Unordered Lists – This type of list does not follow any order and is generally styled with bullets. By using the .list-unstyled class, the bullet-style can be removed from the unordered list. the .list-inline class is used to list all the items in a single line.

What is the class used to give a Bootstrap 4 table a dark color?

We can use the .table-dark class to give a Bootstrap 4 table a dark color.

What is flexbox in Bootstrap 4?

Flexbox is a flexible box layout module. You can easily build a flexible layout design using flexbox without using float or positioning.

Name some alternatives to Bootstrap.

There are lots of alternatives. Some of them are shown in the below list.

1. Foundation
2. Bulma
3. Materialize
4. Material Design Lite
5. Skeleton
6. Pure CSS
7. Semantic UI
8. Uikit

Can we learn Bootstrap without learning CSS?

The simple answer is no. We cannot learn it without learning CSS as it is a CSS framework. Therefore, knowledge of CSS is essential to understand the basic concepts of Bootstrap.

What are the different options for adding Bootstrap to your project?

There are several options to add Bootstrap to your project.

They are:

Using ready-to-use compiled CSS and JS code.
Using source files.
Installing via Bootstrap CDN.
Installing via package managers such as NPM, Yarn, RubyGems, Composer, etc.

If a button has disabled class applied on it, can it still be tapped or clicked on?

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links.

Explain the concept of creating a basic form in Bootstrap.

First, add a <form> element. Then, inside the form element, wrap labels and controls in a <div> element with the .form-group class. Next, the .form-control class to text input elements like <input>, <textarea> and <select> elements.

What is a toast and what are the main components of a toast?

It is like an alert box that appears for a small time. The main components of a toast are the toast header and the toast body.

Explain the function of the following code segment.

<a href="#">Home <span class="badge badge-primary">36</span></a>

This code will produce a link with an inline badge which will give an important notification to the user like number received, messages received, or the number of requests, etc. Further, the .badge-primary class will add a blue color to the badge.

What are the dependencies required to work Bootstrap properly?

jQuery is the only dependency required to work Bootstrap properly.

What Bootstrap class would you use to create a striped table?

The .table-striped class adds zebra-stripes to a table. This can be used in combination with .table-dark class to get a dark-striped table.

What is a tooltip and how would you create one in Bootstrap?

The Tooltip component is a small pop-up box that appears when the user moves the mouse pointer over an element.

To create a tooltip, we add the data-toggle="tooltip" attribute to an element and we use the title attribute to specify the text that should be displayed inside the tooltip.

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

How would you change the case of the text in Bootstrap?

In Bootstrap, we use the classes text-lowercase, text-uppercase and text-capitalize to change the case of the text as and when required. Here is an example of the three classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

lowercased text.


CapiTaliZed Text.

Give an idea about responsive utility classes in Bootstrap?

To render a mobile-friendly website structure, one can use responsive utility classes. These are also useful for depicting, hiding content as well as toggling content.

Which are the contextual classes in Bootstrap?

With contextual classes, you can alter the color of the background of table rows and cells. The classes are.

a) Active - add the hover color to a specific cell or row
b) Success - Signifies a successful act
c) Danger - specifies a particular warning
d) Warning - shows dodgy action

How to create vertical forms in Bootstrap?

1. Firstly, add a role form to the parent component.
2. Then use class. form-group to cover labels and controls
3. Lastly, add a class of .form-control to all texts.

How would you specify border radius in Bootstrap?

We can use the following classes to get rounded borders.

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

What is a card in Bootstrap?

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace the old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

What are the global styles that are used in Bootstrap 4 default typography?

These are as follows:

1. Font family – Native font stack
2. Font size – Default root font size of the browser that is usually 16px
3. Line height – 1.5

What are badges in Bootstrap4?

Badges are small count and labelling components. We use the .badge class and a contextual class (.badge-*) to create a badge.

Why is bootstrap vital for mobile web development?

Bootstrap is vital for mobile web development for 3 reasons.

a) It redesigns the elements to employ flat design and also the first approach of mobiles
b) As the Bootstrap layout depends on percentage, it helps in keeping the mobile support in the front position.
c) It offers grid systems to describe layouts. This system consists of 12 columns along with different sizes of various devices like mobiles, tablets, IPad, laptops, and desktops. All these devices have pre-decided sizes that are capable of taking the accountability of responsive components. Thus, you need not use CSS.

What are alternatives to Bootstrap?

If asked for alternatives to Bootstrap, you can mention any of the following programs:


How do you draw a toolbar of buttons?

Here, you can explain that the class of .btn-toolbar combines unique sets of button groups to create more complex components.

What is a button group in Bootstrap?

Here, you can answer that a button group is an item that allows more than one button on a single line, such as in the header of a website.

Define lead body copy in Bootstrap?

A lead body copy in Bootstrap is used for the addition of various ascents to the paragraph. It can be applied using the class="lead" and will help in enlarging the font size as well as increasing height.

Explain briefly how a navbar works.

A navbar is an eminent feature to make a responsive meta component that works as navigation headers for your application and site. In the mobile view, the navbar collapses and becomes horizontal as the available viewport width increases.

How can you create a tabbed navigation menu?

We can create a tabbed navigation menu by making a basic unordered list with the .nav base class and the .nav-tabs class.

How can we customize links to pagination?

We can customize the links by using the .disabled class for unclickable links and the .active class for indicating the current page.

Explain the uses of the carousel plugin in Bootstrap.

The carousel plugin in Bootstrap is used to make sliders on the web pages or your site. Several carousel plugins are used in Bootstrap to display large contents within a small space by adding sliders.

What are responsive utility classes in Bootstrap?

Responsive utility classes in Bootstrap are a set of classes that are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in Bootstrap.

Example: “hidden-md-down”

What is a progress bar?

A progress bar is an indicator to show the progress of a particular process.

What are Bootstrap panels? Explain how to create a Bootstrap panel with a heading.

Bootstrap panel components are used for putting your DOM component in a box. To get a basic panel, simply add .panel and .panel-default classes to the <div> element. There are two ways of adding panel heading to a Bootstrap panel:

Use any of the <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags with a .panel-title class
You can also use the .panel-heading class

What is the Bootstrap Grid System?

The Bootstrap Grid System is a responsive, mobile-first system that scales up to 12 columns as per the increase in the device or viewport size. The system features predefined classes for easy layout options and powerful mix-ins for generating effectively semantic layouts.

What do you mean by column ordering in Bootstrap?

Column ordering is one of the most interesting features found in bootstrap. By using appropriate functions, the columns can be written easily and also in a defined order. You can also show them in another column. In order to change or alter the order of the column easily, the functions .col-md-push-* and .col-md-pull-* can be used.

What are the steps to create a progress bar using bootstrap?

To create a basic progress bar, you need to do the following:

Add a <div> with a class of .progress.

Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

Add a style attribute with the width expressed as a percentage. For example, style = “40%”; indicates that the progress bar was at 40%.

R4R Team
R4R provides Bootstrap Freshers questions and answers (Bootstrap Interview Questions and Answers) .The questions on website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Bootstrap interview question set 2,Bootstrap Freshers & Experienced Interview Questions and Answers,Bootstrap Objetive choice questions and answers,Bootstrap Multiple choice questions and answers,Bootstrap objective, Bootstrap questions , Bootstrap answers,Bootstrap MCQs questions and answers Java, C ,C++, ASP, C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Bootstrap fresher interview questions ,Bootstrap Experienced interview questions,Bootstrap fresher interview questions and answers ,Bootstrap Experienced interview questions and answers,tricky Bootstrap queries for interview pdf,complex Bootstrap for practice with answers,Bootstrap for practice with answers You can search job and get offer latters by studing .learn in easy ways .