Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

101.

What is a Bootstrap Navbar?

Answer»

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:
Discussion
102.

Horizontal Form in Bootstrap

Answer»

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&GT; <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:

Here is the output when the screen size is above 767 px:
Discussion
103.

Why should we use Button Groups in Bootstrap?

Answer»

If you want a SERIES of buttons on your website, then use the Button Groups in Bootstrap. It allows you to stack more than one button on a single line.

The Button Groups component in Bootstrap has some classes to create Button group, resize them, stack them VERTICALLY, etc. Let us see them first:

.btn-group class: Create a Button Group .btn-group-lg: Larger buttons in Button Groups .btn-group-sm: Smaller buttons in Button Groups

Let us now see a simple example to create Button Groups in Bootstrap. The example displays 5 buttons in the same button group:

<!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">  <p>DISPLAYING Button Groups in Bootstrap:</p>   <div class = "btn-group">    <button type = "button" class = "btn btn-default">Button 1</button>    <button type = "button" class = "btn btn-default">Button 2</button>    <button type = "button" class = "btn btn-default">Button 3</button>    <button type = "button" class = "btn btn-default">Button 4</button>    <button type = "button" class = "btn btn-default">Button 5</button>    <button type = "button" class = "btn btn-default">Button 6</button>   </div> </div> </body> </html>

The following is the output that displays buttons in a single Button Group:
Discussion
104.

Why do we need a static Control in Bootstrap

Answer»

While creating a form, you may sometimes need to include a plain text next to a form label within a horizontal form. For that, use the class .form-CONTROL-static.

The example displays the role of static control in Bootstrap:

<!DOCTYPE html> <html lang="EN"> <head>   <title>Bootstrap Static Control</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>Admissions</h2>   <form class = "form-horizontal" role = "form">    <div class = "form-group">       <label class = "col-sm-2 control-label">Student Email</label>       <div class = "col-sm-10">          <p class = "form-control-static">example@demo.com</p>       </div>    </div>    <div class = "form-group">       <label for = "pwd" class = "col-sm-2 control-label">Password</label>       <div class = "col-sm-10">          <input type = "password" class = "form-control" id = "pwd" placeholder = "ENTER Password">       </div>    </div> </form> </div> </body> </html>

The OUTPUT:
Discussion
105.

Form Control states in Bootstrap

Answer»

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 FieldsetThe 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: 
Discussion
106.

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

Answer»

STRETCH a flex item on SMALL screen USING the align-self-sm-stretch CLASS used in BOOTSTRAP.
Discussion
107.

Striped Progress Bar in Bootstrap

Answer»

With Bootstrap, you can create a Striped progress Bar. A Progress Bar with stripes looks like this:

Bootstrap provides .progress-bar-striped class to create a striped Progress Bar.

Let us now see an EXAMPLE to ADD stripes to Progress Bar:

&LT;!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>Android App Information</h2>   <h3>App Performance</h3>   <div class="progress">     <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="90"   aria-valuemin="0" aria-valuemax="100" style="width:90%">       90%     </div>   </div>   <h3>App Crashes</h3>   <div class="progress">     <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="10"   aria-valuemin="0" aria-valuemax="100" style="width:10%">       10%     </div>   </div>   <h3>App Errors</h3>   <div class="progress">     <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="20"   aria-valuemin="0" aria-valuemax="100" style="width:20%">       20%     </div>   </div> </div> </body> </html>

The output:
Discussion
108.

What is a Tooltip component in Bootstrap?

Answer»

You may have seen a small pop-up box appearing when the user hovers over an element. The same box is what we can add using the Tooltip component in Bootstrap.

Use the data-toggle="tooltip" attribute to create a tooltip in Bootstrap. To work with tooltips, you need to initialize them with jQuery.

You can also position the tooltip using the data-placement attribute. Let us now see an example that creates a tooltip:

&LT;!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">   <h3>Tooltip Example</h3>   <a href="#" data-toggle="tooltip" data-placement="right" title="This is a tooltip!">Keep mouse cursor here</a>     <p>Above is a tooltip on the right</p><BR> </div> <script> $(document).ready(FUNCTION(){   $('[data-toggle="tooltip"]').tooltip();   }); </script> </body> </html>

Here is the output. We have used the title attribute for text to be displayed inside the tooltip. The tooltip is on the right:

For positioning tooltip on left, top and bottom, use the following values for data-placement attribute:

<div class="container-fluid">   <a href="#" data-toggle="tooltip" data-placement="left" title="This is a tooltip!">Keep mouse cursor here</a>   <a href="#" data-toggle="tooltip" data-placement="top" title="This is a tooltip!">Keep mouse cursor here</a>   <a href="#" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip!">Keep mouse cursor here</a> </div>
Discussion
109.

What is an Alert component in Bootstrap?

Answer»

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

The alert class also has some contextual classes associated with it for action on alert box:

.alert-success: Successful or POSITIVE action .alert-info: Informative action .alert-warning: .alert-danger: Dangerous action .alert-PRIMARY: Important action .alert-secondary: Less important action .alert-light: Light grey .alert-dark: Dark grey

Let us now see how we can use them:

<!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>Learning about Alerts</h2>   <div class="alert alert-success">     <strong>Success! You cracked it!</strong>   </div>   <div class="alert alert-info">     <strong>Information! More Info!</strong>   </div>   <div class="alert alert-warning">     <strong>Warning! Close PROGRAM to prevent system failure!</strong>   </div>   <div class="alert alert-danger">     <strong>Danger! Malware ahead!</strong>   </div>   <div class="alert alert-primary">    <strong>Primary!</strong>   </div>   <div class="alert alert-secondary">     <strong>Secondary!</strong>   </div>   <div class="alert alert-dark">    <strong>Dark alert!</strong>   </div>   <div class="alert alert-light">    <strong>Light alert!</strong>   </div> </div> </body> </html>

The following is the output displaying different forms of alerts:
Discussion
110.

Differentiate between Bootstrap and Foundation

Answer»

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

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.

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
BootstrapFoundation
DefinitionBootstrap 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 SystemBotstrap support responsive grids and flexible breakpoints.Foundation supports whatever Bootstrap has, but also provides responsive gutters.
Collapsible GuttersDo not provide by Bootstrap.Foundation has collapsible gutters.
Inline FormsBootstrap 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 CompatibilityMore compatible than Foundation. Performance is also better.
Foundation has enhanced performance, but not better than Bootstrap.
CustomizableDesign can be customized in Bootstrap.
Design can be customized in Foundation, but not better than Bootstrap.
Normalizationreboot.cssnormalize.css
Discussion
111.

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

Answer»

Align a flex item on the BASELINE USING the align-self-*-baseline class used in Bootstrap. Let’s SAY you need to align it on LARGE SCREEN. For that, use:

align-self-lg-baseline
Discussion
112.

What is the role of Jumbotron in Bootstrap?

Answer»

Jumbotron is a component that allow you to set landing page content design. A big grey box is seen as Jumbotron for including special content with increase in size of headings. Including it will also add a lot of margins that would make the box and its content catchier.

Let us now see how to create a Jumbotron in Bootstrap. For that, use the class .jumbotron:

&LT;DIV class="jumbotron">   <h1>My Website</h1>   <p>We provide freelancers for content, responsive website design, business writing, etc.</p> </div>

Let us see the 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">   <div class="jumbotron">     <h1>My Website</h1>     <p>We provide freelancers for content, responsive website design, business writing, etc.</p>   </div>   <p>Text outside Jumbotron</p>       </div> </body> </html>

The following is the output:
Discussion
113.

Types of Layouts in Bootstrap?

Answer»

Bootstrap has different layouts to adjust with wide range of devices such as desktops, TABLETS, mobile.

Let us see what all layouts are PART of Bootstrap:

  • Container

Use the container element when you want fixed-width which is responsive. Include it 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">  <h1>Demo Page</h1>  <p>The .container class PROVIDES a fixed width container.</p> </div> </body> </html>
  • Container Fluid

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

Include it 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">  <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 describes the difference between both the layouts:
Discussion
114.

New features of Bootstrap 4

Answer»

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.
Discussion
115.

How to setup Bootstrap with CDN?

Answer»

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:
Discussion
116.

What comes under the Bootstrap package?

Answer»

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

  • Customize Components

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

Is Bootstrap a framework?

Answer»

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.
Discussion
118.

Bootstrap 3 vs Bootstrap 4

Answer»

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.
Discussion
119.

Why Bootstrap?

Answer»

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.

  • 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:

  • 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.
Discussion