Web Development Interview Questions and Answers for 2025

All Courses

Introduction

Bootstrap is a free and open-source front-end web development framework allowing developers to quickly and easily create responsive, mobile-first websites and web applications. It provides a set of pre-built HTML, CSS, and JavaScript components, such as navigation menus, buttons, forms, modals, and more. Our set of Bootstrap interview questions and answers is curated for beginners as well as senior roles. This guide of Bootstrap interview questions is an excellent resource for those seeking to progress in their web designer or front-end developer career, as it will equip them with the necessary knowledge to feel confident and well-prepared for their upcoming interview.

Bootstrap Interview Questions and Answers

Beginner

1. Why Bootstrap?

Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Developed by Twitter in 2011, it is a front-end framework for faster web development. Mark Otto and Jacob Thornton released it on GitHub in August 2011.

Let us see the reasons why we should work with Bootstrap for web development:

Browsers Support and Compatibility

Bootstrap is supported by all the modern browsers. Do not worry about compatibility, it is compatible with all the popular web browsers such as Firefox, Chrome, Opera, Safari and Edge.

Open Source

Bootstrap released on GitHub and is free to use. Go to its official website, download and begin with designing of amazing responsive websites. With that, you can also use CDN to work with Bootstrap.

Responsive

Bootstrap allows you to develop and design responsive websites. The website designed with Bootstraps works well for all the devices: Mobile, Desktop and Tablet.

Responsive

Mobile-first

Bootstrap has mobile first styles in its library. The same is part of the Bootstrap core framework and its grid system allows the designers to design websites sites for small screens first and then move and scale designs up from there.

Customizable Components

The components provided by Bootstrap are compatible and you can easily customize them. Some examples include, button groups, iconography, navbar, input groups, alerts, etc.

Here are some of the icons provided by Bootstrap component iconography:

Customizable Components

Simple

It’s not a cumbersome task to work with Bootstrap. A basic working knowledge of the three pillars of web development i.e. HTML, JavaScript and CSS is what you need to begin with Bootstrap.

2. Bootstrap 3 vs Bootstrap 4

Bootstrap 4 released in August 2017 and with that new features introduced. It is an open source framework like Bootstrap 3 for designing responsive websites with HTML, JavaScript and CSS.

Supporting all major and modern browsers, it has the new feature of flex modal for grid system and even added new components. Bootstrap 4 also removed a lot of features.

Let us now see the differences between Bootstrap 3 and Bootstrap 4:

Basis	Bootstrap 3	Bootstrap 4
Definition	Bootstrap 3 is an open source framework for designing responsive websites with HTML, JavaScript and CSS.	Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components
Form Label Size	Bootstrap 3 do not have any class for form label size.	Bootstrap 4 came with .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label and match the size of the relevant form control.
Global Font Size	Bootstrap 3 had Global Form Size of 14px.	Bootstrap 4 introduced Global Form Size of 16px.
Checkboxes and Radio Buttons	The classes for checkbox and radio buttons are .radio, .radio-inline, .checkbox, or .checkbox-inline. Here inline is for displaying them in a line.	For the same purpose, Bootstrap use .form-check, .form-check-label, .form-check-input, and .form-check-inline.
Source CSS file	The source CSS file for Bootstrap 3 is LESS.	The source CSS file for Bootstrap 3 is SCSS.
Offset Columns	For offset columns, Bootstrap 3 use col--offset- classes.	For offset columns, Bootstrap 4 use offset-- classes.
Dark Tables	You cannot add dark tables with Bootstrap 3.	Add dark tables with the .table-dark class in Bootstrap 4
Form Control Size	For increasing or decreasing the input control size, Bootstrap 3 has .input-lg and .input-sm.	For increasing or decreasing the input control size, Bootstrap 4 has .form-control-lg and .form-control-sm classes.
Table Head Styles	Classes for table head styles isn’t supported by Bootstrap 3.	Create table head styles with.thead-light and .thead-dark classes.
Buttons with Outline	You cannot style Button with outline color in Bootstrap 3.	Bootstrap 4 introduced the .btn-outline-* classes for styling buttons with an outline color.
Button Sizes	Classes are available for resize buttons.	Bootstrap 4 only deprecated the .btn-xs class. Rest, .btn-sm and .btn-lg are still available.
Responsive Images	To create responsive images with Bootstrap 3, use the .img-responsive class.	To create responsive images with Bootstrap 4, use .img-fluid class.
Media Objects	Bootstrap 3 came with a lot of classes for Media Objects, such as .media, .media-body .media-object, .media-heading, etc.	Bootstrap 4 only use .media class.
Disabled Menu Items	To disable Menu Items in Bootstrap 3, you need to use the .disabled class. Set the class to the <li> to disable.	To disable Menu Items in Bootstrap 4, you need to use the .disabled class . Set the class to the <a> to disable.
Justified ButtonGroups	The .btn-group-justified class is used in Bootstrap 3 to justify button groups.	The .btn-group-justified class is not supported in Bootstrap 4.
Extra Small ButtonGroups	Bootstrap 3 supported a class for extra small button groups i.e. .btn-group-xs class.	Bootstrap 4 do not support any class for extra small button groups..
Fixed Navbars (Top or Bottom)	The .navbar-fixed-top and .navbar-fixed-bottom is used in Bootstrap 3 to fix navbars to the top or bottom.	To fix navbars to the top and bottom, Bootstrap 4 introduced .fixed-top and .fixed-bottom classes..
Full-Width Jumbotron	For full-width jumbotrons, the .jumbotron-fluid class is not supported in Bootstrap 3.	Bootstrap 4 came with .jumbotron-fluid class for full-width jumbotrons.
Page Header class	The .page-header class introduced with Bootstrap 3.	The .page-header class wasn’t supported in Bootstrap 4.
Bootstrap Cards	Cards weren’t introduced in Bootstrap 3.	Bootstrap 4 introduced Cards to replace the functionality provided by panels and wells in Bootstrap 3.
Panels	Panel introduced in Bootstrap 3.	Introduction of cards in Bootstrap 4 replaced the functionality provided by Panels.
Wells	The concept of Wells wasn’t supported in Bootstrap3.	Bootstrap 4 introduced the concept of Wells. It is a container that adds a rounded border around an element and adds padding and gray background color.
Carousel Item	For creating carousel item with Bootstrap 3, use the .item class.	For creating carousel item with Bootstrap 4, use the .carousel-item class.

3. Is Bootstrap a framework?

Bootstrap is an open source framework for designing responsive websites. Developed by Twitter in 2011, it is popular worldwide for faster web development. Yes, Bootstrap is a front-end framework. While using Bootstrap, you work with HTML, JavaScript and CSS. Mobile-first styles are part of the core framework.

Bootstrap is called a framework since it is the conceptual structure intended to serve as a support or guide for design of responsive websites that expands the structure into something useful. For example, a real-life example is the structure of a building while constructing it.

There has been a lot of debate on whether Bootstrap is a framework or library, but we can consider it as a front-end library. While adding CSS, we include bootstrap.css or bootstrap.min.css. Including a file of the same format itself says that you are adding a framework. These are prewritten and addition of these files makes a new framework. Therefore, Bootstrap is a framework and library in its correct sense.

4. What comes under the Bootstrap package?

Expect to come across this popular question in Bootstrap interview questions for freshers.

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.

CSS

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

Structure

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 examples include navbar, alerts, iconography, navigation, dropdowns, pagination, badges, labels, etc.

Customize Components

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

5. How to setup Bootstrap with CDN?

Use Bootstrap CDN, if you don’t wish to do the cumbersome task of downloading Bootstrap and hosting it on your system or server. CDN is Content Delivery Network, wherein the Bootstrap is hosted and with just the CDN link, we can add it to our website. We will be using MaxCDN to provide CDN support for Bootstrap CSS and JavaScript.

Using CDN will lead to faster loading time since once you have requested a file from it from your website, it will be served from the server closest to them.

Let us now see how we can setup Bootstrap 4 with CDN.

Use the following CDN for CSS and JS. Include it in the <head> tag:

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.13/js/bootstrap.min.js"></script>

Now, include jQuery and Popper if you are using the components like tooltips, popovers, etc.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

Let us now see a simple example to implement what we saw above. In the below example, we have included .container-fluid class to provide a full width container that spans the entire width of the viewport. We have included the Bootstrap CDN in the <head> tag:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Demo</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
 <h1>Demo Page</h1>
 <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           
</div>

</body>
</html>

The following is the output after running the above Bootstrap code:

Output for bootstrap code

6. New features of Bootstrap 4

It's no surprise that this one pops up often in Bootstrap technical interview questions.

Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components.

Let us see them one by one based on new features, improved and deprecated:

New Features

Bootstrap 4 came with .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label and match the size of the relevant form control.
For offset columns, Bootstrap 4 use offset-*-* classes.
Add dark tables with the .table-dark class in Bootstrap 4
For increasing or decreasing the input control size, Bootstrap 4 has .form-control-lg and .form-control-sm classes.
Create table head styles with .thead-light and .thead-dark classes.
Bootstrap 4 introduced the .btn-outline-* classes for styling buttons with an outline color.
To disable Menu Items in Bootstrap 4, you need to use the .disabled class . Set the class to the <a> to disable.
To fix navbars to the top and bottom, Bootstrap 4 introduced .fixed-top and .fixed-bottom classes.
Bootstrap 4 came with .jumbotron-fluid class for full-width jumbotrons.
For creating carousel item with Bootstrap 4, use the .carousel-item class.

Enhanced

Bootstrap 4 updated Global Form Size of 16px.
To create responsive images with Bootstrap 4, use .img-fluid class. The .img-responsive class was used in Bootstrap 3 for creating responsive images.
Introduction of cards in Bootstrap 4 replaced the functionality provided by Panels.
For checkbox and radio button, Bootstrap 4 use .form-check, .form-check-label, .form-check-input, and .form-check-inline. Bootstrap 3 used .radio, .radio-inline, .checkbox, or .checkbox-inline classes.
Bootstrap 4 introduced Cards to replace the functionality provided by wells in Bootstrap 3.

Deprecated (Not Supported)

Bootstrap 4 do not support any class for extra small button groups.
The .page-header class isn’t supported in Bootstrap 4.
The .btn-group-justified class is not supported in Bootstrap 4.
Bootstrap 4 deprecated the .btn-xs class. Rest, .btn-sm and .btn-lg are still available to resize buttons.

10. Differentiate between Bootstrap and Foundation

Bootstrap

Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Mark Otto and Jacob Thornton released it on GitHub in August 2011.

Let us see the reasons why we should work with Bootstrap for web development:

Browsers Support and Compatibility

Bootstrap is supported by all the modern browsers. Do not worry about compatibility, it is compatible with all the popular web browsers such as Firefox, Chrome, Opera, Safari and Edge.

Open Source

Bootstrap released on GitHub and is free to use. Go to its official website, download and begin with designing of amazing responsive websites. With that, you can also use CDN to work with Bootstrap.

Responsive

Bootstrap allows you to develop and design responsive websites. The website designed with Bootstraps works well for all the devices: Mobile, Desktop and Tablet.

Mobile-first

Foundation

It is a front-end framework designed by ZURB in September 2011. They claim to be the most advanced responsive front-end framework. It is readable, flexible, and completely customizable.

Let us see some of its features:

Front-end Framework

It is a family of responsive front-end frameworks that make it easy to design responsive websites, apps and emails.

Mobile First

Build for small devices first and the scale to larger devices and create responsive design.

Foundation for Sites

It helps you in creating responsive website with HTML, CSS, and JavaScript.

Foundation for Emails

Create responsive emails with Foundation, which are readable on almost any device.

Let us now see the differences:

Features	Bootstrap	Foundation
Definition	Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Mark Otto and Jacob Thornton released it on GitHub in August 2011.	Foundation is a front-end framework designed by ZURB in September 2011. This is the most advanced responsive front-end framework. It is readable, flexible, and completely customizable.
Grid System	Botstrap support responsive grids and flexible breakpoints.	Foundation supports whatever Bootstrap has, but also provides responsive gutters.
Collapsible Gutters	Do not provide by Bootstrap.	Foundation has collapsible gutters.
Inline Forms	Bootstrap has .form-inline class which is to be added to the <form> tag to create Inline Forms. These are the forms in which the elements are inline and left-aligned.	With Foundation, you cannot create Inline Forms.
Performance Compatibility	More compatible than Foundation. Performance is also better.	Foundation has enhanced performance, but not better than Bootstrap.
Customizable	Design can be customized in Bootstrap.	Design can be customized in Foundation, but not better than Bootstrap.
Normalization	reboot.css	normalize.css

15. Form Control states in Bootstrap

Different form control states are available in Bootstrap such as input focus, disabled input, readonly input, etc. It also includes validation styles for errors, warnings, and success messages.

Let us see them one by one:

States	Description
Disabled Input	The disabled attribute disables an input field.
Disabled Fieldset	The disabled attribute added to a <fieldset> disable all the controls within the <fieldset>
Input Focus	On receiving focus, the outline is removed and box-shadow is applied.
Error - Validation State	Add .has-error to parent element to set validation style for error.
Warning - Validation State	Add .has-warning to parent element to set validation style for error.
Success - Validation State	Add .has-success to parent element to set validation style for error.
Readonly Inputs	To set readonly inputs and prevent user from any input, use readonly attribute.

The following is an example that displays some of the states:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form Control States</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control states</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">Focused</label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text" value="Click to focus...">
      </div>
    </div>

    <div class="form-group">
      <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled>
      </div>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label" for="inputSuccess">Input with success</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSuccess">
      </div>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="col-sm-2 control-label" for="inputWarning">Input with warning</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputWarning">

      </div>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="col-sm-2 control-label" for="inputError">Input with error</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputError">
      </div>
    </div>
  </form>
</div>

</body>
</html>

The output displays the different states:

Form Control States

19. What is a Bootstrap Navbar?

Add navigation header on your website using the Bootstrap Navbar component. A navigation bar can extend or collapse, depending on the screen size. On mobile, you may have seen navigation bar collapsing. However, on increasing the viewport size (browser size), the same responsive navigation bar appears horizontally.

To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:

.navbar-expand -xl: Stack navbar vertically on extra large screen
.navbar-expand -lg: Stack navbar vertically on large screen
.navbar-expand -md: Stack navbar vertically on medium screen
.navbar-expand -sm: Stack navbar vertically on small large screen

Now, in a navbar, you have links, which a user can click and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below:

<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Two</a>
    </li>
   </ul>

Let us see what we discussed above in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark">
    <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Two</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Three</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Four</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Five</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Six</a>
    </li>
   </ul>
  </nav>
</body>
</html>

The following is the output that display the navigation bar with 6 links:

The navigation bar with 6 links

21. How to wrap flex items on different screens in Bootstrap?

To wrap items on different screens in Bootstrap, use the flex-wrap class. Let us see how to use this class for different screens:

For small screen:

Use flex-sm-wrap for small screen:

<div class="d-flex flex-sm-wrap bg-primary">

For medium size screen:

Use flex-md-wrap for medium screen:

<div class="d-flex flex-md-wrap bg-primary">

For large screen:

Use flex-lg-wrap for large screen:

<div class="d-flex flex-lg-wrap bg-primary">

For extra large screen:

Use flex-xl-wrap for extra large screen:

<div class="d-flex flex-xl-wrap bg-primary">

The following is an example that wraps flex items on different screen size:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Flex Wrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
     <div class="container mt-3">
       <h3>Books</h3>
       <div class="d-flex flex-wrap bg-primary">
         <div class="p-2 border">Book1</div>
         <div class="p-2 border">Book2</div>
         <div class="p-2 border">Book3</div>
         <div class="p-2 border">Book4</div>
         <div class="p-2 border">Book5</div>
         <div class="p-2 border">Book6</div>
         <div class="p-2 border">Book7</div>
         <div class="p-2 border">Book8</div>
         <div class="p-2 border">Book9</div>
         <div class="p-2 border">Book10</div>
       </div>
       <br>
       <p>Wraps on Small Screen (>576px)</p>
       <div class="d-flex flex-sm-wrap bg-primary">
         <div class="p-2 border">Book1</div>
         <div class="p-2 border">Book2</div>
         <div class="p-2 border">Book3</div>
         <div class="p-2 border">Book4</div>
         <div class="p-2 border">Book5</div>
         <div class="p-2 border">Book6</div>
         <div class="p-2 border">Book7</div>
         <div class="p-2 border">Book8</div>
         <div class="p-2 border">Book9</div>
         <div class="p-2 border">Book10</div>
       </div><br>
        <p>Wraps on Medium sized screen (>768px)</p>
       <div class="d-flex flex-md-wrap bg-primary">
         <div class="p-2 border">Book1</div>
         <div class="p-2 border">Book2</div>
         <div class="p-2 border">Book3</div>
         <div class="p-2 border">Book4</div>
         <div class="p-2 border">Book5</div>
         <div class="p-2 border">Book6</div>
         <div class="p-2 border">Book7</div>
         <div class="p-2 border">Book8</div>
         <div class="p-2 border">Book9</div>
         <div class="p-2 border">Book10</div>
       </div><br>
       <p>Wraps on Large Screen (>992px)</p>
       <div class="d-flex flex-lg-wrap bg-primary">
         <div class="p-2 border">Book1</div>
         <div class="p-2 border">Book2</div>
         <div class="p-2 border">Book3</div>
         <div class="p-2 border">Book4</div>
         <div class="p-2 border">Book5</div>
         <div class="p-2 border">Book6</div>
         <div class="p-2 border">Book7</div>
         <div class="p-2 border">Book8</div>
         <div class="p-2 border">Book9</div>
         <div class="p-2 border">Book10</div>
         <div class="p-2 border">Book11</div>
         <div class="p-2 border">Book12</div>
         <div class="p-2 border">Book13</div>
       </div><br>

       <p>Wraps on Extra Large Screen (>1200px)</p>
       <div class="d-flex flex-xl-wrap bg-primary">
         <div class="p-2 border">Book1</div>
         <div class="p-2 border">Book2</div>
         <div class="p-2 border">Book3</div>
         <div class="p-2 border">Book4</div>
         <div class="p-2 border">Book5</div>
         <div class="p-2 border">Book6</div>
         <div class="p-2 border">Book7</div>
         <div class="p-2 border">Book8</div>
         <div class="p-2 border">Book9</div>
         <div class="p-2 border">Book10</div>
         <div class="p-2 border">Book11</div>
         <div class="p-2 border">Book12</div>
         <div class="p-2 border">Book13</div>
         <div class="p-2 border">Book14</div>
         <div class="p-2 border">Book15</div>
         <div class="p-2 border">Book16</div>
         <div class="p-2 border">Book17</div>
         <div class="p-2 border">Book18</div>
         <div class="p-2 border">Book19</div>
       </div><br>
    </div>

 </body>
</html>

The output for screen size above 576px. The flex-sm-wrap wraps on small screen size:

The flex-sm-wrap wraps on small screen size

The output for screen size above 768px. The flex-md-wrap wraps on medium screen size:

The flex-md-wrap wraps on medium screen size

The output for screen size above 1200px. The flex-xl-wrap wraps on extra-large screen size:

The flex-xl-wrap wraps on extra-large screen size

22. How to make a link unclickable in Bootstrap Navbar?

In a NavBar, if you want to make a link unclickable, then use the .disabled class.

Let’s say we have a Navbar with some items and out of which you want to disable the “Entertainment” link and make unclickable. For that, use the .disabled class like this:

<li class="nav-item">
   <a class="nav-link disabled" href="#">Tech</a>
</li>

Now, let us see how we can create more items in Navbar and disable one of them. For the second Navbar, we have made the link “Tech” unclickable:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Disable Navbar</h3>
</div>

<nav class="navbar navbar-expand-sm bg-danger navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Tech</a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tech</a>
    </li>
  </ul>
</nav>

</body>
</html>

The output:

23. What is a Bootstrap Container?

Bootstrap needed something to wrap elements and contain its grid system, therefore that leaded to introduction of container, which can be fixed or fluid.

Fixed Container

Use the container class when you want fixed-width which is responsive. Include it like this:

<div class="container">
…
</div>

The following is an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Demo Page</h1>
  <p>The .container class provides a fixed width container.</p>
</div>

</body>
</html>

Fluid Container

Use the container-fluid element to provide a full width container that spans the entire width of the viewport:

Include it like this:

<div class="container-fluid">
…
</div>

Let us see an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Demo Page</h1>
  <p>The .container-fluid class provides a full width container that spans the entire width of the viewport.</p>          
</div>

</body>
</html>

24. Bootstrap Collapse example?

It's no surprise that this one pops up often in Bootstrap interview questions and answers.

The Bootstrap collapse is used to show and hide content. The following are used for Collapsible:

.collapse: hides content
.collapse.show: to show content

Bootstrap collapse with .collapse class

Let us see an example of Bootstrap collapse with .collapse class. It shows the content hidden by default:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Bootstrap Collapsible</h2>
  <p>Show or hide the content:</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button>
  <div id="mydiv" class="collapse">
    This is the content which is toggled on button click.
  </div>
</div>
</body>
</html>

The following is the output that shows toggled content (show or hide) on button click. First, let us see the result on running:

Bootstap Collapsible

After that, click the above button that toggles content. On clicking, the collapsed content will be visible:

Bootstap Collapsible

Bootstrap collapse with .collapse show

Let us see an example of .collapse with .show class. It hides the content by default:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Bootstrap Collapsible</h2>
  <p>Show or hide the content:</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button>
  <div id="mydiv" class="collapse show">
    This is the content which is toggled on button click.
  </div>
</div>
</body>
</html>

The following is the output that displays the content by default since we used the show class as well:

Bootstap Collapsible

26. Why Bootstrap has a Grid System?

Bootstrap has a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. This states that firstly Bootstrap targets mobile devices and then expands to other devices such as tablet and desktop. The Bootstrap Grid System displays 12 columns in a page. These columns will rearrange on its own, since the Grid system is responsive.

Bootstrap provides the following classes:

Class	Devices	Example
.col-	<576px i.e. Extra Small Devices	<div class="col-3">Example</div>
.col-sm-	>=576px i.e. Small Devices	<div class="col-sm-1> Example </div>
.col-md-	>=768px i.e. Medium Devices like iPad	<div class="col-md-1> Example </div>
.col-lg-	>=992px i.e. Large Devices	<div class="col-lg-1> Example </div>
.col-xl-	>=1200px i.e. Extra Large Devices	<div class="col-xl-1> Example </div>

Let us now understand this using an example.

For four equal columns, use four .col-sm-3 classes like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h2>Grid System in Bootstrap</h2>
  <p><strong>Note:</strong> Resize the browser window to see the effect. The columns stack on top of each other when the screen is &lt; 576px.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:green;color:white;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:orange;color:gray">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:violet;color:white">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:black;color:white">.col-sm-3</div>
  </div>
</div>
</body>
</html>

The output when screen size is more than 576px:

Grid system in bootstrap

The output when screen size is less than 576px. As you can see the columns stack on top of each other:

Grid system in bootstrap

38. Pagination in Bootstrap?

With Bootstrap, you can easily add Pagination on any web page. This is useful if you have a lot of linked posts and pages.

Some classes in Bootstrap are useful in creating a basic pagination. Let us see them below:

To create a basic pagination, you need to use the <ul> tag. Include the .pagination class to this <ul> and then add the .page-item to each <li> tag.

The following pagination has active post as 2nd. We have active using the “.active” class to display the current post/ page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  <h2>Post 2</h2>
  <p>The following is a demo line.</p>    
  <p>The following is a demo line.</p>                  
  <p>The following is a demo line.</p>                  
  <p>The following is a demo line.</p>   
               
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
 </div>
</body>
</html>

The output below displays demo content and pagination with next/ previous links as well:

pagination with next/ previous

48. How to create a responsive navbar in Bootstrap?

Responsive feature can be easily added to a navbar. Create a default navbar and make it responsive.

Under “navbar-header”, use the data- attribute twice. First data-toggle to inform JS that what is to be done with the button. However, the second one i.e. data-target indicates the element to be toggled:

<button type = "button" class = "navbar-toggle"
         data-toggle = "collapse" data-target = "#demo">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>

Now, wrap the content in a <div> with collapse and navbar-collapse classes:

<div class = "collapse navbar-collapse" id = "demo">
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">AboutUs</a></li>
       <li><a href="#">Company</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
    </div>

Let us now see an example to create a responsive navbar following the above steps:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Responsive Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type = "button" class = "navbar-toggle"
         data-toggle = "collapse" data-target = "#demo">
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">New Website</a>
    </div>
    <div class = "collapse navbar-collapse" id = "demo">
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">AboutUs</a></li>
       <li><a href="#">Company</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
    </div>
</nav>
</body>
</html>

The output shows the responsive menu:

Responsive navbar in Bootstrap

50. How to create Navbar in Bootstrap?

To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:

.navbar-expand -xl: Stack navbar vertically on extra large screen

.navbar-expand -lg: Stack navbar vertically on large screen

.navbar-expand -md: Stack navbar vertically on medium screen

.navbar-expand -sm: Stack navbar vertically on small large screen

Now, in a navbar, you have links, which a user can click and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below:

<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Two</a>
    </li>
   </ul>

Let us see what we discussed above in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Technology</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Research</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Festivals</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
   </ul>
  </nav>
</body>
</html>

The following is the output that display the navigation bar with 6 links:

Navigation bar with 6 links

Intermediate

1. Can a Progress Bar be created with different colors?

Yes, we can easily create a Progress Bar with different colors using the contextual classes. The following are the contextual classes available for Progress Bar in Bootstrap:

.progress-bar-success: Indicates success or positive action for a Progress Bar (Green)
.progress-bar-info: Indicates informative action
.progress-bar-warning: Indicate warning action (Orange)
.progress-bar-danger: Indicates danger action (Red)

For our example, let us create a green colored Progress Bar:

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80"
  aria-valuemin="0" aria-valuemax="100" style="width:80%">
    <span class="sr-only">80%</span>
  </div>
</div>

The above displays the following green colored Progress Bar:

Let us now create multiple Progress Bars with different colors. Here, we are displaying information about an app based on its performance, crashes and errors. For all this information, we have used three Progress Bars:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>App Information</h1>
  <h2>App Performance</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
  aria-valuemin="0" aria-valuemax="100" style="width:90%">
      90%
    </div>
  </div>
  <h2>App Crashes</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10"
  aria-valuemin="0" aria-valuemax="100" style="width:10%">
      10%
    </div>
  </div>
  <h2>App Errors</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20"
  aria-valuemin="0" aria-valuemax="100" style="width:20%">
      20%
    </div>
  </div>
</div>

</body>
</html>

The output displays Progress Bars with different colors:

App information

2. Three types of Form Layouts in Bootstrap

Form Layout in Bootstrap has the following three forms:

Vertical Form
Horizontal Form
Inline Form

Let us learn about them one by one:

Vertical Form

This is the default form in Bootstrap. Let us see a code snippet to understand it:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical Form in Bootstrap</h2>
  <div class="form-group">
    <label for="email">UserId (Email):</label>
    <input type="email" class="form-control" id="useremail">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
</div>

</body>
</html>

The above displays the following vertical form as the output:

Vertical Form In bootstrap

Horizonal Form

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

Let us see a code to understand it:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal Form in Bootstrap</h2>
  <form class="form-horizontal" action="">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">UserId(Email):</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="useremail" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
</form>
</div>

</body>
</html>

Here is the output when the screen size is below 767 px:

Horizontal form in bootstrap

Here is the output when the screen size is above 767 px:

Horizontal form in bootstrap

Inline Form

Inline forms are the forms in which the elements are inline and left-aligned. For using it, add class .form-inline to the <form> tag.

Let us see an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Inline Form in Bootstrap</h2>
 <form class="form-inline" action="">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

</body>
</html>

Here is the output when the screen size is below 767 px:

Inline form in bootstrap

Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned

Inline form in bootstrap

3. Why Media Object used in Bootstrap?

To set an aligned object with content, use the Media Object. These objects can be image or video. The usage of media objects can be seen in the comment section of a website/ blog.

The .media class and .media-body class is used in Bootstrap to work with media objects. Float a media object using .media class, whereas .media-body class place media content inside a child container.

The following is an example that creates a media object to align image with content:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Learn</h2>
  <p>Here comes the article content...</p>
  <div class="media border p-3">
    <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/dfbac927-789d-4780-acdb-0eeceab17a17.jpg" alt="John Doe" class="mr-3 mt-3 rounded-square" style="width:90px;">
    <div class="media-body">
      <h4>Dev Ops</h4>
      <p>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</p>      
    </div>
  </div>
</div>

</body>
</html>

The following is the output that displays an image aligned on the left with content:

aligned on the left with content

If you want to align media object on the top, bottom, or middle position, then you can use the flex. Nested media objects are also feasible in Bootstrap.

4. How to display flex items horizontally in Bootstrap?

With Bootstrap, it’s possible to display flex items horizontally using the .flex-row class.

You need to use the following:

<div class="d-flex flex-row bg-secondary mb-3">

Above, we have used the contextual class “bg-secondary” for background color.

Now, we will work on an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>Student Name</h1>
  <div class="d-flex flex-row bg-primary mb-3">
    <div class="p-2 bg-danger">Sehral</div>
    <div class="p-2 bg-primary">Fara</div>
    <div class="p-2 bg-dark">Kelly</div>
    <div class="p-2 bg-secondary">Gemma</div>
    <div class="p-2 bg-warning">Jessica</div>
    <div class="p-2 bg-primary">Lauren</div>
  </div>
</div>
</body>
</html>

The above aligns the flex items horizontally:

aligns the flex items horizontally

OR

To display flex items horizontally, use the flex-*-row class in Bootstrap. For difference screens, replace the * in the class name with the following:

For large screen:

flex-lg-row

For medium size screen:

flex-md-row

For small screen:

flex-sm-row

5. How to center Pills in Bootstrap?

The .nav-justified class is used in Bootstrap to center pills.

The following is an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Pills</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Centered Pills</h3>
  <p><strong>Note:</strong> Resize the browser window to see the effect. Items look stacked if the screen size if less than 768px</p>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">AboutUs</a></li>
    <li><a href="#">Company</a></li>
  </ul>
</div>

</body>
</html>

The output when the screen size is less than 768px. The pills look stacked:

The output when the screen size is less than 768px

The output when the screen size is more than 768px:

The output when the screen size is more than 768px

7. How to create responsive table in Bootstrap?

Expect to come across this popular question in Bootstrap interview questions for experienced professionals.

With Bootstrap, you can easily create a responsive table using the table-responsive class. The example below displays a responsive table that adds a horizontal scrollbar for screen less than 992px wide. It looks the same above 992px.

Note: Resize the web browser to check the effect

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Contextual Classes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Match Timings Data</h2>
  <p>The following are the details of the match timings for individuals:</p>            
  <table class="table table-responsive">
    <thead class="thead-dark">
      <tr>
        <th>Event</th>
        <th>Timings</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>Entry</td>
        <td>9AM</td>
      </tr>
      <tr class="table-primary">
        <td>Session1</td>
        <td>9:30AM - 11:30AM</td>
      </tr>
      <tr class="table-primary">
        <td>Lunch</td>
        <td>11:45AM - 12:15PM</td>
      </tr>
      <tr class="table-primary">
        <td>Session2</td>
        <td>12:30PM - 2:30PM</td>
      </tr>
      <tr class="table-primary">
        <td>Tea</td>
        <td>2:45PM - 3:00PM</td>
      </tr>
      <tr class="table-primary">
        <td>Session3</td>
        <td>3:15PM - 5:15PM</td>
      </tr>
      <tr class="table-success">
        <td>Presentation</td>
        <td>5:20PM - 5:45PM</td>
      </tr>
      <tr class="table-primary">
        <td>Exit</td>
        <td>After 5:45PM</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

The above displays the following responsive table:

Match Timings data

10. How can I animate a Progress Bar in Bootstrap?

The .active class is used in Bootstrap to create an animated Progress Bar. To your already created ProgressBar, include the .active class with the other Progress Bar classes like:

<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
    90%
</div>

The animation would only be visible if you have already set the Progress Bar to have strip lines as shown in the following example. Here, we have 4 Progress Bars and all are animated:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>App Performance</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90"
  aria-valuemin="0" aria-valuemax="100" style="width:90%">
      90%
    </div>
  </div>
  <h2>App Crashes</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10"
  aria-valuemin="0" aria-valuemax="100" style="width:10%">
      10%
    </div>
  </div>
  <h2>App Errors</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20"
  aria-valuemin="0" aria-valuemax="100" style="width:20%">
      20%
    </div>
  </div>
   <h2>App Success Rate</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="75"
  aria-valuemin="0" aria-valuemax="100" style="width:75%">
      75%
    </div>
  </div>
</div>

</body>
</html>

The output displayed is animated:

Progress Bar in Bootstrap

11. Why do we use badges in Bootstrap?

If you want to add additional information to your content, then use Badges in Bootstrap. Badges looks like labels, but the corners of Badges are more rounded.

If you have a newly launched product and you add the same on your website, then you can add a Badge there as it is “NEW”.

To add a Badge, just add the following with the content of the Badge:

<span class ="badge">
Content
</span>

Or you can also use it for count of posts in a blog:

<span class ="badge">
20
</span>

Let us see an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Products</h2>
  <h3>Trousers<span class="badge badge-primary">New</span></h3>
</div>

</body>
</html>

The output displays a blue colored Badge, since we have used .badge-primary contextual class:

Badge-primary contextual class

We can change the color of Badge by adding other contextual classes like .badge-secondary, badge-info, badge-danger, .badge-warning, .badge-light, .badge-dark, etc.

Let us see another example of colored badges:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Products</h2>
  <h3>Trousers<span class="badge badge-primary">New</span></h3>
  <h3>Laptop<span class="badge badge-secondary">New</span></h3>
  <h3>Headphone<span class="badge badge-info">New</span></h3>
  <h3>Bags<span class="badge badge-warning">Sold</span></h3>
</div>

</body>
</html>

The output: colored badges

12. How to display code with Bootstrap?

A staple for Bootstrap interview questions for advanced professionals, be prepared to answer this one.

To display code with Bootstrap, work with the <code> tag. With that, we can also use the <pre> tag.

The <code> tag

For inline code, use the <code> tag. Here, we are displaying a header file code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Code</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>C Programming</h2>
  <p>The following is the header file for C language:</p>
  <code>#include &lt;stdio.h&gt;</code>
  <p>The following is the header file for C++ language:</p>
  <code>#include &lt;iostream&gt;</code>
</div>

</body>
</html>

The output displays code. In our case, it is only a header file:

code with Bootstrap

The <pre> tag

If the code has multiple lines, then use the <pre> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Code</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Codes </h2>
  <p>The following is the header file for C language:</p>
  <code>#include &lt;stdio.h&gt;</code>
  <p>The following is the usage of fieldset element:</p>
  <pre>
  &lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend>Details:&lt;/legend&gt;
  Name: &lt;input type="text"&gt;&lt;br&gt;
  Email: &lt;input type="text"&gt;&lt;br&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </pre>
</div>

</body>
</html>

The output shows the code in multiple lines:

code in multiple lines

13. How to change the background color of table rows or individual cells in Bootstrap

The contextual classes are used to change the background color of table rows or individual cells in Bootstrap 4. The following are the classes with the colors they represent:

.table-success class: A positive action (Green)
.table-warning class: A warning (Orange)
.table-danger class: A negative action (Red)
.table-primary class: An important action (Blue)
.table-secondary class: A less important action (Grey)
.table-active class: Hover color (Grey)
.table-light class: Light grey table
.table-dark class: Dark grey table

Let us now see an example to change the background color in a table:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Contextual Classes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Investor's Data</h2>
  <p>The following is the Investor's data:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Company</th>
        <th>Investor</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>ABC</td>
        <td>PQ</td>
      </tr>
      <tr class="table-danger">
        <td>GHI</td>
        <td>VW</td>
      </tr>
      <tr class="table-warning">
        <td>JKL</td>
        <td>EF</td>
      </tr>
      <tr class="table-active">
        <td>RST</td>
        <td>IJ</td>
      </tr>
      <tr class="table-success">
        <td>MNO</td>
        <td>KL</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Here is the output:

25. How to create a carousel in Bootstrap?

For carousel controls, we need an id. Here, we have:

id="newCarousel"

The following sets the <div> has a carousel:

class="carousel slide"

The data-ride="carousel" attribute begins animating the carousel when the page loads.

The bottom of each slide has dots that indicates which slide you’re watching right now. The class .carousel-indicators specify it:

<ol class="carousel-indicators">
    <li data-target="#newCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#newCarousel" data-slide-to="1"></li>
    <li data-target="#newCarousel" data-slide-to="2"></li>
</ol>

The slides are set with class .carousel-inner. We have set the next and previous controls as well with the data-slide attribute:

<!--controls -->
    <a class="left carousel-control" href="#newCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#newCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

The following is an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Carousel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>KnowledgeHut Blog</h2>  
  <div id="newCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#newCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#newCarousel" data-slide-to="1"></li>
      <li data-target="#newCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/599e46ac-60e1-429b-a305-e02574081e3c.jpg" alt="How To Pass Leading SAFe® 4 Exam" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/079f81ac-d7f7-4c0c-8919-46cc1602c950.jpg" alt="Top-paying Agile Certifications To Consider In 2018" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/4096881a-05ea-4162-96cf-3e7949ea82a7.jpg" alt="DevOps In 5 letters: Should We Say CALMS or CALMR?" style="width:100%;">
      </div>

    </div>
    <!--controls -->
    <a class="left carousel-control" href="#newCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#newCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>

The output:

Next slide in the carousel:

27. Include links in Alerts in Bootstrap

The .alert-link class is used in Bootstrap to include links in Alerts. You need to use the anchor element:

<a href="#" class="alert-link">

Since we are using contextual classes to color alerts, you need to provide matching colored links within any alert.

The following is an example:

.<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Link in Alerts</h2>
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success! You cracked it!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Information! More Info!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning! Close program to prevent system failure!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger! Malware ahead!</strong>  Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-primary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-secondary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
  <div class="alert alert-dark alert-dismissible">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Dark alert!</strong> Demo <a href="#" class="alert-link"> Link!</a>
  </div>
</div>

</body>
</html>

The output:

Above, you can see the alert links have the same color as alerts. We added color to alerts using contextual classes.

Advanced

1. How to create a tabbed navigation menu in Bootstrap?

If you want to create a tabbed navigation menu, then use the “nav-tabs” class like this:

<ul class="nav nav-tabs">

Let us now see how we can form a tab based navigation menu:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Tabbed Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">AboutUs</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

</body>
</html>

The output looks like tabbed navigation menu as shown below. The Home tab is marked as the current page:

Navigation menu in Bootstrap

2. Can we stack multiple progress bars in Bootstrap

Expect to come across this popular question in Bootstrap interview questions for experienced professionals.

With Bootstrap, we can easily stack multiple progress bars. For that, include only a single .progress class and place all the Progress Bars inside it.

For example, firstly adding only a single Progress Bar in the .progress class:

<div class = "progress">

   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      20%
   </div>
</div>

Now, add another Progress Bar in the same .progress class:

<div class = "progress">

      <div class = "progress-bar progress-bar-success" role = "progressbar"
      aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      20%
   </div>

   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      10%
   </div>
</div>

Let us add more Progress Bars in the same .progress class:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Striped Progress Bar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Level of monosodium glutamate</h2>
  <div class = "progress">

   <div class = "progress-bar progress-bar-success" role = "progressbar"
      aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      20% (Success)
   </div>

   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      10% (High)
   </div>

   <div class = "progress-bar progress-bar-warning" role = "progressbar"
      aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;">
      35% (Very High - Warning)
   </div>

   <div class = "progress-bar progress-bar-danger" role = "progressbar"
      aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;">
      35% (Danger)
   </div>

  </div>

</div>
</body>

The output displays multiple Progress Bars in a single .progress class:

Level of monosodium glutamate

3. How to align a flex item in the center on small screen in Bootstrap 4?

To align a flex item in the center on small screen using the align-self-sm-center class in Bootstrap. This is how you include the class:

<div class="p-2 border align-self-sm-center">
  Flex item name
</div>

4. Why the flex-lg-column-reverse class used in Bootstrap 4?

Display flex items vertically with reversed order on large screen using the flex-lg-column-reverse class in Bootstrap.

5. Add Badges to List Groups in Bootstrap

To add badges to List Groups in Bootstrap, you need to add the following in <li class = "list-group-item">:

<span class = "badge">

Let us now add:

<ul class = "list-group">
   <li class = "list-group-item"><span class = "badge">New</span>One</li>
   <li class = "list-group-item"><span class = "badge">New</span>Two</li>
   <li class = "list-group-item"><span class = "badge">New</span>Three</li>
   <li class = "list-group-item"><span class = "badge">New</span>Four</li>
  <li class = "list-group-item"><span class = "badge">New</span>Five</li>
</ul>

The following is an example:

<!DOCTYPE html>
<html>
<head>
   <title>Try v1.2 Bootstrap Online</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Add Badges to List Groups</h2>
  <ul class = "list-group">
    <li class = "list-group-item"><span class = "badge">New</span>One</li>
    <li class = "list-group-item"><span class = "badge">New</span>Two</li>
    <li class = "list-group-item"><span class = "badge">New</span>Three</li>
    <li class = "list-group-item"><span class = "badge">New</span>Four</li>
    <li class = "list-group-item"><span class = "badge">New</span>Five</li>
  </ul>
</div>
</body>
</html>

The output: Add Badges to list gropus

10. How to build a dismissal alert in Bootstrap?

To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose.

The dismissal alert provided user with an option to close the alert message. For this purpose, use the .alert-dismissible class. After that include class="close" and data-dismiss="alert".

Here, we will use × HTML character to display the close sign for closing alert buttons.

Let us see an example:

.<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dismissible Alerts</h2>
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success! You cracked it!</strong>
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Information! More Info!</strong>
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning! Close program to prevent system failure!</strong>
  </div>
  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger! Malware ahead!</strong>
  </div>
  <div class="alert alert-primary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong>
  </div>
  <div class="alert alert-secondary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong>
  </div>
  <div class="alert alert-dark alert-dismissible">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Dark alert!</strong>
  </div>
</div>
</body>
</html>

The output displays dismissible alerts:

Dismissible Alerts

12. Which class is used to create a grid of cards that are of equal height and width?

The .card-deck is used in Bootstrap to create a grid of cards of equal height and width. Let us first see how we can set two cards inside the .card-deck class:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Grid of Cards</h2>
  <div class="card-deck">
    <div class="card bg-secondary">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
        <p class="card-text">This is example text3.</p>
        <p class="card-text">This is example text4.</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
      </div>
    </div>
 </div>
</div>
</body>
</html>

The above sets two cards of equal height and width:

Grid of cards

Let us now add more cards to the grid of cards. This will show how the card align themselves:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Grid of Cards</h2>
  <div class="card-deck">
    <div class="card bg-secondary">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
        <p class="card-text">This is example text3.</p>
        <p class="card-text">This is example text4.</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
        <p class="card-text">This is example text2.</p>
      </div>
    </div>
     <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
        <p class="card-text">This is example text3.</p>
        <p class="card-text">This is example text4.</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">This is example text1.</p>
        <p class="card-text">This is example text2.</p>
        <p class="card-text">This is example text2.</p>
      </div>
    </div>
 </div>
</div>
</body>
</html>

The output displays 4 cards in the deck of cards:

Grid of Cards

20. How to highlight the current link in Bootstrap Navbar?

In a NavBar, if you want to highlight the current link, then use the .active class.

Let’s say we have a Navbar with some items and out of which you want to highlight the “Entertainment” link, which is the current link. For that, use the .active class like this:

<li class="nav-item active">
   <a class="nav-link" href="#">Entertainment</a>
</li>

Now, let us see how we can create more items in Navbar and highlight one of them. For the second Navbar, we have highlighted the item “Tech”:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Highlight Navbar</h3>
</div>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tech</a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Tech</a>
    </li>
  </ul>
</nav>
</body>
</html>

The output:

Form control states

21. How to create colored Navbar in Bootstrap?

To create a colored Navbar, firstly work around the same procedure to create a Navbar. Then, use the .bg-color classes to change the background color. These classes include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light classes.

Let us first begin with creating a blue colored Navbar using .bg-primary color classes:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Colored Navbar</h3>
</div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#" active>Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>    <li class="nav-item">      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
  </ul>
</nav>
</body>
</html>

The output displays a colored Navbar:

Colored Navbar

Now, let us add more navbars with different colors using the classes discussed above:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Colored Navbars</h3>
</div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#" active>Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#" active>Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#" active>Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#" active>Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
</body>
</html>

The output with Navbars in different colors:

Colored Navbars

Want to Know More?

Full Name*

Email*

+91

Phone Number*

United States +1

India +91

Canada +1

Australia +61

Singapore +65

New Zealand +64

Germany +49

United Arab Emirates +971

Hong Kong +852

Ireland +353

Afghanistan +93

Aland Islands +358

Albania +355

Algeria +213

AmericanSamoa +1684

Andorra +376

Angola +244

Anguilla +1264

Antarctica +672

Antigua and Barbuda +1268

Argentina +54

Armenia +374

Aruba +297

Ascension Island +247

Austria +43

Azerbaijan +994

Bahamas +1242

Bahrain +973

Bangladesh +880

Barbados +1246

Belarus +375

Belgium +32

Belize +501

Benin +229

Bermuda +1441

Bhutan +975

Bolivia +591

Bosnia and Herzegovina +387

Botswana +267

Brazil +55

British Indian Ocean Territory +246

Brunei Darussalam +673

Bulgaria +359

Burkina Faso +226

Burundi +257

Cambodia +855

Cameroon +237

Cape Verde +238

Cayman Islands +1345

Central African Republic +236

Chad +235

Chile +56

China +86

Christmas Island +61

Cocos (Keeling) Islands +61

Colombia +57

Comoros +269

Congo +242

Cook Islands +682

Costa Rica +506

Cote d'Ivoire +225

Croatia +385

Cuba +53

Cyprus +357

Czech Republic +420

Democratic Republic of the Congo +243

Denmark +45

Djibouti +253

Dominica +1767

Dominican Republic +1849

Ecuador +593

Egypt +20

El Salvador +503

Equatorial Guinea +240

Eritrea +291

Estonia +372

Eswatini +268

Ethiopia +251

Falkland Islands (Malvinas) +500

Faroe Islands +298

Fiji +679

Finland +358

France +33

French Guiana +594

French Polynesia +689

Gabon +241

Gambia +220

Georgia +995

Ghana +233

Gibraltar +350

Greece +30

Greenland +299

Grenada +1473

Guadeloupe +590

Guam +1671

Guatemala +502

Guernsey +44

Guinea +224

Guinea-Bissau +245

Guyana +592

Haiti +509

Holy See (Vatican City State) +379

Honduras +504

Hungary +36

Iceland +354

Indonesia +62

Iran +98

Iraq +964

Isle of Man +44

Israel +972

Italy +39

Jamaica +1876

Japan +81

Jersey +44

Jordan +962

Kazakhstan +77

Kenya +254

Kiribati +686

Korea, Democratic People's Republic of Korea +850

Korea, Republic of South Korea +82

Kosovo +383

Kyrgyzstan +996

Laos +856

Latvia +371

Lebanon +961

Lesotho +266

Liberia +231

Libya +218

Liechtenstein +423

Lithuania +370

Luxembourg +352

Macau +853

Madagascar +261

Malawi +265

Malaysia +60

Maldives +960

Mali +223

Malta +356

Marshall Islands +692

Martinique +596

Mauritania +222

Mauritius +230

Mayotte +262

Mexico +52

Micronesia, Federated States of Micronesia +691

Moldova +373

Monaco +377

Mongolia +976

Montenegro +382

Montserrat +1664

Morocco +212

Mozambique +258

Myanmar +95

Namibia +264

Nauru +674

Nepal +977

Netherlands +31

New Caledonia +687

Nicaragua +505

Niger +227

Nigeria +234

Niue +683

Norfolk Island +672

North Macedonia +389

Northern Mariana Islands +1670

Norway +47

Oman +968

Pakistan +92

Palau +680

Palestine +970

Papua New Guinea +675

Paraguay +595

Peru +51

Philippines +63

Pitcairn +872

Poland +48

Portugal +351

Puerto Rico +1939

Qatar +974

Reunion +262

Romania +40

Russia +7

Rwanda +250

Saint Barthelemy +590

Saint Helena, Ascension and Tristan Da Cunha +290

Saint Kitts and Nevis +1869

Saint Lucia +1758

Saint Martin +590

Saint Pierre and Miquelon +508

Saint Vincent and the Grenadines +1784

Samoa +685

San Marino +378

Sao Tome and Principe +239

Saudi Arabia +966

Senegal +221

Serbia +381

Seychelles +248

Sierra Leone +232

Sint Maarten +1721

Slovakia +421

Slovenia +386

Solomon Islands +677

Somalia +252

South Africa +27

South Georgia and the South Sandwich Islands +500

South Sudan +211

Spain +34

Sri Lanka +94

Sudan +249

Suriname +597

Svalbard and Jan Mayen +47

Sweden +46

Switzerland +41

Syrian Arab Republic +963

Taiwan +886

Tajikistan +992

Tanzania, United Republic of Tanzania +255

Thailand +66

Timor-Leste +670

Togo +228

Tokelau +690

Tonga +676

Trinidad and Tobago +1868

Tunisia +216

Turkey +90

Turkmenistan +993

Turks and Caicos Islands +1649

Tuvalu +688

Uganda +256

Ukraine +380

United Kingdom +44

Uruguay +598

Uzbekistan +998

Vanuatu +678

Venezuela, Bolivarian Republic of Venezuela +58

Vietnam +84

Virgin Islands, British +1284

Virgin Islands, U.S. +1340

Wallis and Futuna +681

Yemen +967

Zambia +260

Zimbabwe +263

By Signing up, you agree to ourTerms & Conditionsand ourPrivacy and Policy

Description

Bootstrap is a free and open-source CSS framework to enable responsive, mobile-first front-end web development. It contains CSS and optionally JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

It is a web framework that focuses on simplifying the development of informative web pages, something that does not happen in web apps. It is added to a web project so that Bootstrap's choices of color, size, font and layout can be applied to that project. It is easy to use, possesses responsive features, takes the mobile-first approach and offers browser compatibility.

Since the last few years, there has been a rise in hiring professionals skilled in Bootstrap. The most sought-after jobs related to Bootstrap are in the roles of Frontend Developers, UI Developers, Web Developers, Graphics Developers and Software Developers, with the major hiring companies being Dell, Wells Fargo, Accenture, Hewlett Packard, and NetApp. Payscale.com states that in the USA, the average annual salary of a Front Developer is $35,339 annually, while a Web Developer’s average annual earning is $55,869. For a Software Engineer, $74,000, $68,870 for a Software Developer and $44,004 for a Web Designer.

All you need to do to get hired by these companies is to get proper planning during the Bootstrap interview.

But how would one possibly get that sort of training, especially dealing with the most tricky and toughest questions on Bootstrap, let alone answering them in a confident manner? We understand that no matter how good you are in Bootstrap, an interview session scenario may make you nervous and dent your confidence for the upcoming question. Enroll in our best full-stack developer course to enhance your skills and knowledge in relevant fields.

This is where we come to your rescue. Our experienced trainers have systematically and sequentially framed these Bootstrap interview questions and answers to boost your confidence and help you remember the key attributes required to answer the interview questions without any sort of anxiety, nervousness or hesitation. These issues bother the freshers and the experienced alike. So you are not the only one who is facing such issues.

Our interview questions and answers get you all geared up for every possible question you may be asked at any of these interviews. Not only that, these common Bootstrap interview questions and answers will also be helpful for experienced software developers who need a better career prospect related to Bootstrap.

So what are you waiting for? Prepare beforehand for your interviews related to Bootstrap with the help of the bootstrap interview questions presented by our experts. Go for your next interview brimming with confidence and clarity. Go and get your dream job, a job that makes you happy and contented. KnowledgeHut offers top-rated web design courses at competitive fees, with expert instructors and hands-on learning for aspiring web designers that will make you more interview ready.

Recommended Courses

Learners Enrolled For

Got more questions? We've got answers.

Book Your Free Counselling Session Today.

Bootstrap

Introduction

Beginner

Intermediate

Advanced

1. Why Bootstrap?

2. Bootstrap 3 vs Bootstrap 4

3. Is Bootstrap a framework?

4. What comes under the Bootstrap package?

5. How to setup Bootstrap with CDN?

6. New features of Bootstrap 4

7. Types of Layouts in Bootstrap?

8. What is the role of Jumbotron in Bootstrap?

9. How to align a flex item on the baseline in Bootstrap?

10. Differentiate between Bootstrap and Foundation

11. What is an Alert component in Bootstrap?

12. What is a Tooltip component in Bootstrap?

13. Striped Progress Bar in Bootstrap

14. Why the align-self-sm-stretch class used in Bootstrap 4?

15. Form Control states in Bootstrap

16. Why do we need a static Control in Bootstrap

17. Why should we use Button Groups in Bootstrap?

18. Horizontal Form in Bootstrap

19. What is a Bootstrap Navbar?

20. How to add inline subheadings in Bootstrap

21. How to wrap flex items on different screens in Bootstrap?

22. How to make a link unclickable in Bootstrap Navbar?

23. What is a Bootstrap Container?

24. Bootstrap Collapse example?

25. Why the .flex-sm-shrink-1 class used in Bootstrap 4?

26. Why Bootstrap has a Grid System?

27. Why the flex-md-row-reverse class used in Bootstrap 4?

28. How to display flex items vertically on small screen in Bootstrap 4?

29. Why the align-items-sm-baseline class used in Bootstrap 4?

30. Can Tabs be centered in Bootstrap?

31. Grid Structure in Bootstrap

32. Why Offset Columns introduced in Bootstrap

33. Column Ordering in Bootstrap?

34. Define Bootstrap Panels

35. What is a Bootstrap Well?

36. Create Inline form in Bootstrap

37. How we can use Glyphicons in Bootstrap?

38. Pagination in Bootstrap?

39. Container-fluid vs Container in Bootstrap

40. What is a card in Bootstrap?

41. Why the d-sm-flex class used in Bootstrap 4?

42. What does a default navbar consist of?

43. What are Carets in Bootstrap?

44. Align components in Bootstrap

45. How can I add footer to panel in Bootstrap

46. Center an element in Bootstrap

47. How do we add outline to Buttons in Bootstrap?

48. How to create a responsive navbar in Bootstrap?

49. How to create striped table with Bootstrap?

50. How to create Navbar in Bootstrap?

1. Can a Progress Bar be created with different colors?

2. Three types of Form Layouts in Bootstrap

3. Why Media Object used in Bootstrap?

4. How to display flex items horizontally in Bootstrap?

OR

5. How to center Pills in Bootstrap?

6. What is a Condensed Table in Bootstrap?

7. How to create responsive table in Bootstrap?

8. Float an element to the right with Bootstrap

9. Which class is used to wrap flex items on medium screen size in Bootstrap?

10. How can I animate a Progress Bar in Bootstrap?

11. Why do we use badges in Bootstrap?

12. How to display code with Bootstrap?

13. How to change the background color of table rows or individual cells in Bootstrap

14. Why the align-content-sm-end class used in Bootstrap 4?

15. How to make responsive image in Bootstrap?

16. Does Bootstrap 3 used Flexbox?

17. Why the d-md-inline-flex class used in Bootstrap 4?

18. How to create unequal columns in Bootstrap

19. How to change the size of Form controls in Bootstrap

20. Create an Image Thumbnail in Bootstrap

21. Pills with Dropdowns in Bootstrap

22. Set a Panel with heading in Bootstrap

23. Which Bootstrap class is used for labels?

24. How Progress Bar work in Bootstrap?

33. What is "multiple" in