0% found this document useful (0 votes)
23 views86 pages

WT-Unit 4-BootStrap

Bootstrap is a free and open-source framework for creating responsive websites, initially developed at Twitter and released in 2011. It offers a mobile-first approach, easy customization, and cross-browser compatibility, making it a popular choice among developers. The framework includes essential components like Bootstrap CSS, JavaScript, and glyphicons, and can be used via CDN or local installation.

Uploaded by

akhilakrosuri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views86 pages

WT-Unit 4-BootStrap

Bootstrap is a free and open-source framework for creating responsive websites, initially developed at Twitter and released in 2011. It offers a mobile-first approach, easy customization, and cross-browser compatibility, making it a popular choice among developers. The framework includes essential components like Bootstrap CSS, JavaScript, and glyphicons, and can be used via CDN or local installation.

Uploaded by

akhilakrosuri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 86

UNIT – 4

Bootstrap:
Bootstrap is a free and open-source tool collection for creating responsive websites and web
applications. It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. It solves many problems which we had once, one of which is the
cross-browser compatibility issue

History :
Twitter Blueprint was the first name of Bootstrap and was developed at Twitter by Mr. Mark
Otto and Jacob Thornton. It got released as an open-source product in August 2011 on GitHub. The
framework was mainly designed for encouraging the reliability and uniformity of web pages across
internal tools. Before Bootstrap's existence, for making responsive sites and interface development,
various external libraries were used, which brought inconsistency and gave rise to the heavy
maintenance burden.
Why should developers use Bootstrap?
Here are some of the key usages of Bootstrap listed:
Browser supportive: Every browser supports this Bootstrap Framework.
 Mobile-first approach: In the Bootstrap 3 framework, there is a pre-existing mobile-first style all
through the library and not as separate files.
 Simple and easy to start: If you know HTML and CSS, you can quickly start working with
Bootstrap, and its documentation is provided on the official site.
 Responsive design and looks: Web pages designed using the Bootstrap framework has responsive
CSS that can adjust to the screen size of large desktops, notebooks, tablets, and mobiles.
 Easy customization: It provides some built-in components and functionalities that are easy for
customizing.
 Clean interface or Developers: Bootstrap framework provides a new and consistent result for
building user interfaces in web pages.
 It is an open-source framework with web-based customization

Benefits of bootstrap Framework:

 It produces less cross-browser bugs.


 It is a consistent framework supported by all the browsers plus CSS based compatibility fixes.
 It is a lightweight and hence widely used framework for creating responsive sites.
 Looks, structure, and styles can be customized as per requirement.
 A simple and effective grid system.
Ways of using bootstrap:

There are two ways of using Bootstrap, one using Bootstrap CDN where the Bootstrap code is hosted
somewhere else, and you can use it by simply taking the link and including them in your project. So
the actual Bootstrap functionalities and code is hosted somewhere in the CDN, and so you are simply
using its link to connect your project to implement the responsive features provided by it.
Here, for running the project with Bootstrap implemented, you need to have the internet's proper
connectivity because the Bootstrap feature will work from the CDN, which is residing somewhere in
the server.

In a second way, you need to download the Bootstrap package on your local machine, and with the use
of these downloaded Bootstrap files, you can implement the features of it on your site. For this
approach, internet connectivity during your project run is not required because the bootstrap files are
available on your local machine.

Components of Bootstrap:

The bootstrap consists of three main files. These are:

 Bootstrap CSS: a CSS framework.


 Bootstrap js: a JavaScript / jQuery framework.
 glyphicons: a font (an icon font set).

Also, Bootstrap needs jQuery for functioning. jQuery is an exceptionally admired and commonly used
JavaScript library which simplifies the cross-browser compatible functionality.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2,
minimum-scale=1">
</head>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZ
w1T" crossorigin="anonymous">

<!-- jQuery library -->


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

<!-- Latest compiled Bootstrap JS-->


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<body>

<h1>This is page heading.</h1>


<p>This is my first <strong>paragraph text</strong>.</p>

</body>
</html>

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or
enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):Responsive web
design is not a program or a JavaScript.

Designing For The Best Experience For All Users:

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page
should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit
any device:
Desktop Tablet Phone

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or
move the content to make it look good on any screen.

Bootstrap is the web’s most popular framework for designing responsive web applications. It gives
front end developers the ability to quickly build fluid web pages with a set of common HTML and
CSS components. Its easy to use because it doesn't require learning a different language just a set of
naming conventions applied to HTML class names.
Example.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}

.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}

/* For mobile phones: */


[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {


/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6 col-s-9">


<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
</div>

<div class="col-3 col-s-12">


<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Viewport:

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was
common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were
too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to
fit the screen.

This was not perfect!! But a quick fix.


Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through
the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the
viewport meta tag:

Without the viewport meta tag


With the viewport meta tag

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a
poor user experience.

Grid-View:

Many web pages are based on a grid-view, which means that the page is divided into columns:
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on
the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and
expand as you resize the browser window

Example prg:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{

box-sizing: border-box;

.header {

border: 1px solid red;

padding: 15px;

.menu {

width: 25%;

float: left;

padding: 15px;

border: 1px solid red;

.main {

width: 75%;

float: left;

padding: 15px;

border: 1px solid red;

</style>
</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="main">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>
Grid System:

Bootstrap’s most basic component is the Grid. The bootstrap Grid is used to define the width that each

html component takes up on the page. The Grid divides the screen into 12 equal columns. Content

elements can occupy at the least one column and at most 12. The style of your web page will

determine the sizes that each content element will take up. you can view the code for generating

common grid sizes(shown below) and on this codepen.

common grid styles

Getting started with the Grid.

1. Include bootstrap css stylesheet and jQuery in your web project using the HTML code

below.
<head>
<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.2.1/jquery.min.js"></script>
</head>
2. Use the class name .col-*screensize*-*columnsize* to specify the size of your content element. For

example col-md-4 stands for a column that scales down to medium screen that takes up 4 columns.
<body>
<div class="col-md-4">this width is 1/3 of the screen size</div>
<div class="col-md-8">this width is 2/3 of the screen size</div>
</body>

Screen Sizes:

When designing a responsive web page you must consider the different screen sizes that the web page

will appear on. A good way to think of this, is to consider the web page as existing in multiple states,
where each state is a different screen size. Screen sizes in bootstrap are defined by a range of width

sizes in the following schema.

bootstrap screen sizes

Scaling Content:

A responsive web page should scale so that it still looks good on different screens. The challenge there

is this; the content layout on a large or normal screen size will not be appropriate when applied to a
smaller screen. So content should not only shrink to fit smaller screen sizes, but the content layout

should change! This can be achieved in two ways.

1.specify different column sizes based on screen sizes.


use this when you want to change the ratio of the content element as the screen size changes. For
example if you want two divs to appear on a medium screen with a ratio of 33% to 66% respectively.
But appear on a small screen with a ratio of 50% to 50%. Example
usage:<div class="col-md-4 col-sm-6">
<p>take up 33% the space on a medium screen but 50% on a small screen</p>
</div>
<div class="col-md-8 col-sm-6">
<p>take up 66% of screen on a medium screen but 50% on a small screen</p>
</div>
view full example on this codepen

2.alter the content displayed based on screen sizes.


use this when you want to change the content being displayed as the screen size changes.
Exampleusage:
<div class="hidden-xs">
<p>this is visible on every screen size except on small screens</p>
</div>
<div class="visible-xs">
<p>this is visible only on small screens</p>
</div>

This technique utilizes the key word hidden-* and visible-*. It works in the following way, hidden-*

will hide the element’s content on the specified screen size. Visible will do the opposite and render the

content visible only on the specified screen size. Using these two in combination a you can toggle

different content for different screen sizes.

______________________

Bootstrap 4 provides five classes of the grid system. These are:


Class Name Description

col- It is for other small devices where the screen size is less than 576px.

col-sm- It is for small devices where the screen size is equal to or greater than 576px.
col-md- It is for medium devices where the screen width equal to or greater than 768px.

col-lg- It is for large devices where the screen width equal to or greater than 992px.

col-xl- It is for extra-large devices where the screen width equal to or greater than 1200px.

The grid system in Bootstrap is built with a flexbox broken down into twelve column-like segments
across the page. But there are situations where users do not want to use the 12 column structure, and so
the column grouping, i.e., the grid structure, can be formed in various other ways.
The grid system will adjust its content to rearrange the columns based on the screen size automatically.
That is what works internally when a responsive page is created. It is not mandatory to make use of all
the 12 columns while developing the page. The developers had to make sure that the sum of grids based
on which they are creating the page design should have to be twelve or less.

Example:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2,
minimum-scale=1">
</head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZ
w1T" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9 col-lg-9 col-xl-9 bg-contain bg-white border
mb-4">
<h1 class="h2 px-3 m-0 txt-rblue font-weight-semibold mb-4">Loan For
Your Education</h1>
<div class="text-size px-3 bg-white-transparent">
<p>Exclusive Funding your education could never be this easy.
Online applications, instant offer and get maximum funding for your education with loans of
LoanCap.</p>
<p>We have worked out an exclusive deal for you with our
partner LoanCap.</p>
<ul>
<li>Funding up to 100%</li>
<li>Fast Loan Appraval</li>
<li>Instant Offer</li>
</ul>
</div>
<div class="text-center pb-3">
<button type="button" name="submit_button" class="btn btn-
primary radius-full shadow-small" ng-disabled="processing">Apply Now</button>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 d-none d-sm-block border">
<div class="text-center">Advertisment</div>
</div>
</div>
</div>
</body>

</html>

Example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></
script>
10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></
script>
11. </head>
12. <body>
13.
14. <div class="container-fluid">
15. <h1>Unequal Columns</h1>
16. <p>Resize the browser window to see the effect.</p>
17. <p>The columns will automatically stack on top of each other when the screen is less than 57
6px wide.</p>
18. <div class="row">
19. <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
20. <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
21. </div>
22. </div>
23.
24. </body>
25. </html>

Navigation Bars

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Example explained:

 list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
 Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation
bars, which you will learn more about in the next chapters.

 display: block; - Displaying the links as block elements makes the whole link area clickable
(not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you
want)
 width: 60px; - Block elements take up the full width available by default. We want to specify a
60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width
available when displayed as block elements. This will produce the same result as our previous
example:

Navbar:

I’ll end this discussion by going over the navigation bar. The basic UI consideration for the nav bar is to

have it collapse when the screen size shrinks to ≤ 768px. The web view contains all of the navigation

links aligned horizontally across the page, while as the mobile view is more compact and makes use of
a navigation icon which when clicked displays the navigation links aligned vertically. Now we can

imagine how this is accomplished. In the full web view designers make use the hidden-xs class name to

display a full navbar visible for larger screens. on smaller screens the visible-xs class name is used to

display the compact view with a dropdown button that makes use of some javascript to show the menu

when clicked. Well what bootstrap offers us with the use of the class name navbar. The bootstrap

documentation on setting up a navbar is superb.

Bootstrap Navigation Bar


A navigation bar is like a navigation header that is placed at the top of the page. You can collapse or
extend it according to the screen size.
You can create a standard navigation bar at the top of the page with with <nav class="navbar navbar-
default">.

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/
bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <nav class="navbar navbar-default">
13. <div class="container-fluid">
14. <div class="navbar-header">
15. <a class="navbar-brand" href="#">WebSiteName</a>
16. </div>
17. <ul class="nav navbar-nav">
18. <li class="active"><a href="#">Home</a></li>
19. <li><a href="#">Page 1</a></li>
20. <li><a href="#">Page 2</a></li>
21. <li><a href="#">Page 3</a></li>
22. </ul>
23. </div>
24. </nav>
25.
26. <div class="container">
27. <h3>Basic Navbar Example</h3>
28. <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
29. </div>
30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
31. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
32. </body>
33. </html>
Navigation Bar with Dropdown
You can also add dropdown menu with navigation bars. The following example adds a dropdown
menu for the "page 1" button.

Right-Aligned Navigation Bar


Use the .navbar-right class to right-align navigation bar buttons. In the following example, we add
"Sign Up"and "Log in" button to the right in the navigation bar.

In Bootstrap 4, you can extend or collapse a navigation bar depending on the screen size. A standard
navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-
expand-xl|lg|md|sm (stacks the navbar vertically on extra-large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements
with a .nav-item class followed by an <a> element with a .nav-link class.

Vertical Navbar
If you want to create a vertical navigation bar, remove the .navbar-expand-xl|lg|md|sm class.

Colored Navbar
You can use any of the .bg-color classes to change the background color of the navbar (.bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).

Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your page.

Navbar Text
The .navbar-text class is used to vertical align any elements inside the navbar that are not links. You
must ensure the proper padding and text color.

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></
script>
10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></
script>
11. </head>
12. <body>
13. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
14. <!-- Links -->
15. <ul class="navbar-nav">
16. <li class="nav-item">
17. <a class="nav-link" href="#">Link 1</a>
18. </li>
19. <li class="nav-item">
20. <a class="nav-link" href="#">Link 2</a>
21. </li>
22. </ul>
23. <!-- Navbar text-->
24. <span class="navbar-text">
25. Navbar text
26. </span>
27. </nav>
28. <br>
29. <div class="container">
30. <h3>Navbar Text</h3>
31. </div>
32. </body>
33. </html>
Fixed Navigation Bar
You can make navigation bar to be fixed at the top or at the bottom of the page. The fixed navigation
bar stays visible at a fixed position (top or bottom) without depending on page scrolling.
______________________________________________________________________

Bootstrap Input Types


Input type: checkbox
Input type: radio button

Bootstrap Checkbox
Checkbox facilitates you to select any number of options from a list of present options.

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/
bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h2>Input type: checkbox</h2>
14. <form role="form">
15. <div class="checkbox">
16. <label><input type="checkbox" value="">Option 1</label>
17. </div>
18. <div class="checkbox">
19. <label><input type="checkbox" value="">Option 2</label>
20.
21. </div>
22. </form>
23. </div>
24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
25. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
26. </body>
27. </html>

Bootstrap 4 Inputs
Bootstrap 4 supports following types of form controls:

o input
o textarea
o checkbox
o radio
o select
Bootstrap Input

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month,
time, week, number, email, url, search, tel, and color.

Bootstrap Textarea

Use textarea with "form-control" to create a Bootstrap textarea.

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></
script>
10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></
script>
11. </head>
12. <body>
13. <div class="container">
14. <h2>Form control: textarea</h2>
15. <p>The form below contains a textarea for comments:</p>
16. <form>
17. <div class="form-group">
18. <label for="comment">Comment:</label>
19. <textarea class="form-control" rows="5" id="comment"></textarea>
20. </div>
21. </form>
22. </div>
23. </body>
24. </html>

Bootstrap Select List


Bootstrap Select List is used to select single or multiple list. Select list is used if you want to allow the
user to pick form multiple options.

Example:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/
bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></
script>
10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></
script>
11. </head>
12. <body>
13. <div class="container">
14. <h2>Form control: select</h2>
15. <p>The form below contains two dropdown menus (select lists):</p>
16. <form>
17. <div class="form-group">
18. <label for="sel1">Select list (select one):</label>
19. <select class="form-control" id="sel1">
20. <option>1</option>
21. <option>2</option>
22. <option>3</option>
23. <option>4</option>
24. </select>
25. <br>
26. <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
27. <select multiple class="form-control" id="sel2">
28. <option>1</option>
29. <option>2</option>
30. <option>3</option>
31. <option>4</option>
32. <option>5</option>
33. </select>
34. </div>
35. </form>
36. </div>
37. </body>
38. </html>

Icon fonts :

There are many free icon libraries to choose from, such as Font Awesome and Google Material Design
Icons.

To use Font Awesome icons, add the following to your HTML page (No downloading or installation is
required):

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrit


y="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" cro
ssorigin="anonymous">

Then, add the name of the icon class to any inline HTML element (like <i> or <span>):

Free, high quality, open source icon library with over 1,300 icons. Include them anyway you like web
fonts. Some of the examples:
Icon font
Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts
in your page via CSS, then reference the class names as needed in your HTML .
 CSS components of Bootstrap
Bootstrap is one of the most popular CSS frameworks that provide free mobile-friendly HTML
templates. Bootstrap provides dozens of reusable components below are some important Key
components of Bootstrap

o Dropdown menus
o Navigation Bars
o Button Groups
o Labels

o Breadcrumbs

o Alerts & Progress Bars


o Pagination

o Typographic

o Glyphicons

o Jumbotron

o Media object and Wells

Dropdown menus

Example
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown
JavaScript plugin.

 Action
 Another action
 Something else here

 Separated link

1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">


2. <li><a tabindex="-1" href="#">Action</a></li>

3. <li><a tabindex="-1" href="#">Another action</a></li>

4. <li><a tabindex="-1" href="#">Something else here</a></li>

5. <li class="divider"></li>

6. <li><a tabindex="-1" href="#">Separated link</a></li>

7. </ul>

Options
Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

1. <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">

2. ...

3. </ul>

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

 Regular link

 Disabled link

 Another link

1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

2. <li><a tabindex="-1" href="#">Regular link</a></li>

3. <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>


4. <li><a tabindex="-1" href="#">Another link</a></li>

5. </ul>

Sub menus on dropdowns


Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple
markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic
styling.
Default

 Action
 Another action
 Something else here

 More options
Dropup

 Action
 Another action
 Something else here

 More options
Left submenu

 Action
 Another action
 Something else here

 More options

1. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

2. ...

3. <li class="dropdown-submenu">

4. <a tabindex="-1" href="#">More options</a>


5. <ul class="dropdown-menu">

6. ...

7. </ul>

8. </li>

9. </ul>

Button groups

Examples
Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group .

Left Middle Right

1. <div class="btn-group">

2. <button class="btn">Left</button>

3. <button class="btn">Middle</button>

4. <button class="btn">Right</button>

5. </div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex
components.
1234

567
8

1. <div class="btn-toolbar">

2. <div class="btn-group">

3. ...

4. </div>

5. </div>

Vertical button groups


Make a set of buttons appear vertically stacked rather than horizontally.

1. <div class="btn-group btn-group-vertical">

2. ...

3. </div>

Checkbox and radio flavors


Button groups can also function as radios, where only one button may be active, or checkboxes, where
any number of buttons may be active. View the JavaScript docs for that.
Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within
a .btn-toolbar for proper rendering.

Button dropdown menus

Requires JavaScript
Button dropdowns require the Bootstrap dropdown plugin to function.
In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve
the alignment manually or with custom JavaScript.

Split button dropdowns


Building on the button group styles and markup, we can easily create a split button. Split buttons
feature a standard action on the left and a dropdown toggle on the right with contextual links.
Action

Action

Danger

Warning

Success

Info

Inverse

1. <div class="btn-group">

2. <button class="btn">Action</button>

3. <button class="btn dropdown-toggle" data-toggle="dropdown">

4. <span class="caret"></span>

5. </button>

6. <ul class="dropdown-menu">
7. <!-- dropdown menu links -->

8. </ul>

9. </div>

Sizes

Utilize the extra button classes .btn-mini , .btn-small , or .btn-large for sizing.

Large action
Small action
Mini action

1. <div class="btn-group">

2. <button class="btn btn-mini">Action</button>

3. <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">

4. <span class="caret"></span>

5. </button>

6. <ul class="dropdown-menu">

7. <!-- dropdown menu links -->

8. </ul>

9. </div>

Dropup menus
Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate
parent of .dropdown-menu . It will flip the direction of the .caret and reposition the menu itself to
move from the bottom up instead of top down.
Dropup

Right dropup
1. <div class="btn-group dropup">

2. <button class="btn">Dropup</button>

3. <button class="btn dropdown-toggle" data-toggle="dropdown">

4. <span class="caret"></span>

5. </button>

6. <ul class="dropdown-menu">

7. <!-- dropdown menu links -->

8. </ul>

9. </div>

Nav: tabs, pills, and lists

Lightweight defaults Same markup, different classes


All nav components here—tabs, pills, and lists—share the same base markup and styles through
the .nav class.

Basic tabs

Take a regular <ul> of links and add .nav-tabs :

 Home
 Profile
 Messages

1. <ul class="nav nav-tabs">

2. <li class="active">

3. <a href="#">Home</a>

4. </li>
5. <li><a href="#">...</a></li>

6. <li><a href="#">...</a></li>

7. </ul>

Component alignment

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in
the specified direction.

Stackable

As tabs and pills are horizontal by default, just add a second class, .nav-stacked , to make them appear
vertically stacked.

Stacked tabs

 Home

 Profile

 Messages

1. <ul class="nav nav-tabs nav-stacked">

2. ...

3. </ul>

Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

 Home
 Help
 Dropdown

1. <ul class="nav nav-tabs">

2. <li class="dropdown">

3. <a class="dropdown-toggle"

4. data-toggle="dropdown"

5. href="#">

6. Dropdown

7. <b class="caret"></b>

8. </a>

9. <ul class="dropdown-menu">

10. <!-- links -->

11. </ul>

12. </li>

13. </ul>

Nav lists
A simple and easy way to build groups of nav links with optional headers. They're best used in
sidebars like the Finder in OS X.
Example nav list

Take a list of links and add class="nav nav-list" :

 LIST HEADER

 Home

 Library
 Applications
 ANOTHER LIST HEADER

 Profile
 Settings

 Help

1. <ul class="nav nav-list">

2. <li class="nav-header">List header</li>

3. <li class="active"><a href="#">Home</a></li>

4. <li><a href="#">Library</a></li>

5. ...

6. </ul>

Horizontal dividers

Add a horizontal divider by creating an empty list item with the class .divider , like so:

1. <ul class="nav nav-list">

2. ...

3. <li class="divider"></li>

4. ...
5. </ul>

Tabbable nav
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates
tabbable tabs in four styles: top (default), right, bottom, and left.

Tabbable example

To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-
content .

 Section 1
 Section 2
 Section 3
I'm in Section 1.

1. <div class="tabbable"> <!-- Only required for left/right tabs -->

2. <ul class="nav nav-tabs">

3. <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>

4. <li><a href="#tab2" data-toggle="tab">Section 2</a></li>

5. </ul>

6. <div class="tab-content">

7. <div class="tab-pane active" id="tab1">

8. <p>I'm in Section 1.</p>

9. </div>

10. <div class="tab-pane" id="tab2">


11. <p>Howdy, I'm in Section 2.</p>

12. </div>

13. </div>

14. </div>

Fade in tabs

To make tabs fade in, add .fade to each .tab-pane .

Requires jQuery plugin


All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring
tabbable tabs to life on the JavaScript docs page.

Navbar

Basic navbar
To start, navbars are static (not fixed to the top) and include support for a project name and basic
navigation. Place one anywhere within a .container , which sets the width of your site and content.

Title

 Home

 Link
 Link

1. <div class="navbar">

2. <div class="navbar-inner">

3. <a class="brand" href="#">Title</a>

4. <ul class="nav">

5. <li class="active"><a href="#">Home</a></li>

6. <li><a href="#">Link</a></li>

7. <li><a href="#">Link</a></li>
8. </ul>

9. </div>

10. </div>

Navbar components

Brand
A simple link to show your brand or project name only requires an anchor tag.
Title

1. <a class="brand" href="#">Project name</a>

Nav links
Nav items are simple to add via unordered lists.

 Home

 Link
 Link

1. <ul class="nav">

2. <li class="active">

3. <a href="#">Home</a>

4. </li>

5. <li><a href="#">Link</a></li>

6. <li><a href="#">Link</a></li>
7. </ul>

You can easily add dividers to your nav links with an empty list item and a simple class. Just add this
between links:

 Home

 Link
 Link

1. <ul class="nav">

2. ...

3. <li class="divider-vertical"></li>

4. ...

5. </ul>

Forms
To properly style and position a form within the navbar, add the appropriate classes as shown below.
For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

Top of Form

Submit
Bottom of Form

1. <form class="navbar-form pull-left">

2. <input type="text" class="span2">

3. <button type="submit" class="btn">Submit</button>

4. </form>

Search form

For a more customized search form, add .navbar-search to the form and .search-query to the input
for specialized styles in the navbar.
Top of Form

Bottom of Form

1. <form class="navbar-search pull-left">

2. <input type="text" class="search-query" placeholder="Search">

3. </form>

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will
add a CSS float in the specified direction.

Using dropdowns
Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

1. <ul class="nav">

2. <li class="dropdown">

3. <a href="#" class="dropdown-toggle" data-toggle="dropdown">

4. Account

5. <b class="caret"></b>

6. </a>

7. <ul class="dropdown-menu">

8. ...

9. </ul>

10. </li>

11. </ul>

Visit the JavaScript dropdowns documentation for more markup and information on calling
dropdowns.
Text

Wrap strings of text in an element with .navbar-text , usually on a <p> tag for proper leading and
color.

Optional display variations


Fix the navbar to the top or bottom of the viewport with an additional class on the outermost
div, .navbar .

Fixed to top

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least
40px padding to the <body> . Be sure to add this after the core Bootstrap CSS and before the
optional responsive CSS.
Title

 Home

 Link
 Link

1. <div class="navbar navbar-fixed-top">

2. ...

3. </div>

Fixed to bottom

Add .navbar-fixed-bottom instead.

Title

 Home
 Link
 Link

1. <div class="navbar navbar-fixed-bottom">

2. ...

3. </div>

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top . Unlike
the .navbar-fixed-top class, you do not need to change any padding on the body .

Title

 Home

 Link
 Link

1. <div class="navbar navbar-static-top">

2. ...

3. </div>

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-
collapse.collapse , and add the navbar toggle button, .btn-navbar .

Title

 Home
 Link
 Link
 Dropdown

Top of Form

Bottom of Form

 Link
 Dropdown

1. <div class="navbar">

2. <div class="navbar-inner">

3. <div class="container">

4.

5. <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

6. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

7. <span class="icon-bar"></span>

8. <span class="icon-bar"></span>

9. <span class="icon-bar"></span>

10. </a>

11.

12. <!-- Be sure to leave the brand out there if you want it shown -->

13. <a class="brand" href="#">Project name</a>

14.

15. <!-- Everything you want hidden at 940px or less, place within here -->

16. <div class="nav-collapse collapse">


17. <!-- .nav, .navbar-search, .navbar-form, etc -->

18. </div>

19.

20. </div>

21. </div>

22. </div>

Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

Inverted variation

Modify the look of the navbar by adding .navbar-inverse .

Title

 Home

 Link
 Link
 Dropdown

Top of Form

Bottom of Form

 Link
 Dropdown

1. <div class="navbar navbar-inverse">

2. ...
3. </div>

Breadcrumbs

Examples
A single example shown as it might be displayed across multiple pages.

 Home

 Home /

 Library

 Home /

 Library /

 Data

1. <ul class="breadcrumb">

2. <li><a href="#">Home</a> <span class="divider">/</span></li>

3. <li><a href="#">Library</a> <span class="divider">/</span></li>

4. <li class="active">Data</li>

5. </ul>
Options

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to
indicate the current page.

 «

 1

 2
 3
 4
 5
 »

1. <div class="pagination">

2. <ul>

3. <li class="disabled"><a href="#">&laquo;</a></li>

4. <li class="active"><a href="#">1</a></li>

5. ...

6. </ul>

7. </div>

You can optionally swap out active or disabled anchors for spans to remove click functionality while
retaining intended styles.

1. <div class="pagination">

2. <ul>

3. <li class="disabled"><span>&laquo;</span></li>
4. <li class="active"><span>1</span></li>

5. ...

6. </ul>

7. </div>

Sizes

Fancy larger or smaller pagination? Add .pagination-large , .pagination-small , or .pagination-


mini for additional sizes.

1. <div class="pagination pagination-large">

2. <ul>

3. ...

4. </ul>

5. </div>

6. <div class="pagination">

7. <ul>

8. ...

9. </ul>

10. </div>

11. <div class="pagination pagination-small">

12. <ul>

13. ...

14. </ul>

15. </div>
16. <div class="pagination pagination-mini">

17. <ul>

18. ...

19. </ul>

20. </div>

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-
centered and .pagination-right .

 «
 1
 2
 3
 4
 5
 »

1. <div class="pagination pagination-centered">

2. ...

3. </div>

 «
 1
 2
 3
 4
 5
 »
1. <div class="pagination pagination-right">

2. ...

3. </div>

Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's
great for simple sites like blogs or magazines.

Default example
By default, the pager centers links.

 Previous

 Next

1. <ul class="pager">

2. <li><a href="#">Previous</a></li>

3. <li><a href="#">Next</a></li>

4. </ul>

Aligned links
Alternatively, you can align each link to the sides:

 ← Older
 Newer →

1. <ul class="pager">

2. <li class="previous">

3. <a href="#">&larr; Older</a>

4. </li>

5. <li class="next">

6. <a href="#">Newer &rarr;</a>

7. </li>

8. </ul>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

 ← Older

 Newer →

1. <ul class="pager">

2. <li class="previous disabled">

3. <a href="#">&larr; Older</a>

4. </li>

5. ...

6. </ul>
Labels and badges

Labels

Labels Markup

Default <span class="label">Default</span>

Success <span class="label label-success">Success</span>

Warning <span class="label label-warning">Warning</span>

Important <span class="label label-important">Important</span>

Info <span class="label label-info">Info</span>

Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup

Default 1 <span class="badge">1</span>

Success 2 <span class="badge badge-success">2</span>

Warning 4 <span class="badge badge-warning">4</span>


Name Example Markup

Important 6 <span class="badge badge-important">6</span>

Info 8 <span class="badge badge-info">8</span>

Inverse 10 <span class="badge badge-inverse">10</span>

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no
content exists within.

Typographic components

Hero unit
A lightweight, flexible component to showcase key content on your site. It works well on marketing
and content-heavy sites.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
content or information.

Learn more

1. <div class="hero-unit">

2. <h1>Heading</h1>

3. <p>Tagline</p>

4. <p>

5. <a class="btn btn-primary btn-large">

6. Learn more
7. </a>

8. </p>

9. </div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can
utilize the h1 's default small , element as well most other components (with additional styles).

Example page header Subtext for header

1. <div class="page-header">

2. <h1>Example page header <small>Subtext for header</small></h1>

3. </div>

Thumbnails Grids of images, videos, text, and more

Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required
markup.

Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs,
or buttons into thumbnails.

Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Alerts Styles for success, warning, and error messages

Default alert
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

×Warning! Best check yo self, you're not looking too good.

1. <div class="alert">

2. <button type="button" class="close" data-dismiss="alert">&times;</button>

3. <strong>Warning!</strong> Best check yo self, you're not looking too good.

4. </div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require
an href="#" for the dismissal of alerts when using an <a> tag.

1. <a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for
our docs. When using <button> , you must include type="button" or your forms may not submit.

1. <button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript


Use the alerts jQuery plugin for quick and easy dismissal of alerts.

Options
For longer messages, increase the padding on the top and bottom of the alert wrapper by
adding .alert-block .

Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.

1. <div class="alert alert-block">

2. <button type="button" class="close" data-dismiss="alert">&times;</button>


3. <h4>Warning!</h4>

4. Best check yo self, you're not...

5. </div>

Contextual alternatives
Add optional classes to change an alert's connotation.

Error or danger
×Oh snap! Change a few things up and try submitting again.

1. <div class="alert alert-error">

2. ...

3. </div>

Success
×Well done! You successfully read this important alert message.

1. <div class="alert alert-success">

2. ...

3. </div>

Information
×Heads up! This alert needs your attention, but it's not super important.

1. <div class="alert alert-info">


2. ...

3. </div>

Progress bars For loading, redirecting, or action status

Examples and markup

Basic
Default progress bar with a vertical gradient.

1. <div class="progress">

2. <div class="bar" style="width: 60%;"></div>

3. </div>

Striped
Uses a gradient to create a striped effect. Not available in IE7-8.

1. <div class="progress progress-striped">

2. <div class="bar" style="width: 20%;"></div>

3. </div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of
IE.

1. <div class="progress progress-striped active">

2. <div class="bar" style="width: 40%;"></div>

3. </div>
Stacked

Place multiple bars into the same .progress to stack them.

1. <div class="progress">

2. <div class="bar bar-success" style="width: 35%;"></div>

3. <div class="bar bar-warning" style="width: 20%;"></div>

4. <div class="bar bar-danger" style="width: 10%;"></div>

5. </div>

Options

Additional colors
Progress bars use some of the same button and alert classes for consistent styles.

1. <div class="progress progress-info">

2. <div class="bar" style="width: 20%"></div>

3. </div>

4. <div class="progress progress-success">

5. <div class="bar" style="width: 40%"></div>

6. </div>
7. <div class="progress progress-warning">

8. <div class="bar" style="width: 60%"></div>

9. </div>

10. <div class="progress progress-danger">

11. <div class="bar" style="width: 80%"></div>

12. </div>

Striped bars
Similar to the solid colors, we have varied striped progress bars.

1. <div class="progress progress-info progress-striped">

2. <div class="bar" style="width: 20%"></div>

3. </div>

4. <div class="progress progress-success progress-striped">

5. <div class="bar" style="width: 40%"></div>

6. </div>

7. <div class="progress progress-warning progress-striped">

8. <div class="bar" style="width: 60%"></div>

9. </div>

10. <div class="progress progress-danger progress-striped">

11. <div class="bar" style="width: 80%"></div>

12. </div>
Browser support
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These
features are not supported in IE7-9 or older versions of Firefox.
Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Media object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that
feature a left- or right-aligned image alongside textual content.

Default example
The default media allow to float a media object (images, video, audio) to the left or right of a content
block.

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.

1. <div class="media">

2. <a class="pull-left" href="#">

3. <img class="media-object" data-src="holder.js/64x64">

4. </a>

5. <div class="media-body">

6. <h4 class="media-heading">Media heading</h4>

7. ...
8.

9. <!-- Nested media object -->

10. <div class="media">

11. ...

12. </div>

13. </div>

14. </div>

Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

Nested media heading


Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Wells
Use the well as a simple effect on an element to give it an inset effect.
Look, I'm in a well!

1. <div class="well">

2. ...
3. </div>

Optional classes
Control padding and rounded corners with two optional modifier classes.
Look, I'm in a well!

1. <div class="well well-large">

2. ...

3. </div>

Look, I'm in a well!

1. <div class="well well-small">

2. ...

3. </div>

Close icon
Use the generic close icon for dismissing content like modals and alerts.
×

1. <button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

1. <a class="close" href="#">&times;</a>

_________________________________________________________________

Bootstrap JavaScript components

Bootstrap happens to be the easiest and the best CSS framework on the Internet today. It allows
developers with no CSS knowledge to build basic templates without any efforts. But this doesn’t stop
designers from using Bootstrap.
Bootstrap has one of the best sets of powerful JavaScript components. These components are easy to
use and are usable in your web project, today.

To begin with, we will need Bootstrap setup from getbootstrap.com, a web browser (preferably
Google Chrome) and a good text editor. The first thing that we should understand is that Bootstrap’s
JavaScript components are written in jQuery. So, we need jQuery to work with them.

After, you have downloaded Bootstrap, copy the contents of the folder and paste it inside a new work-
space.

Bootstrap also allows us to use each module individually instead of downloading all the JavaScript
components.

Some of the main Bootstrap JavaScript components are:

1. Modal
2. Dropdown
3. ScrollSpy
4. Tab
5. Tooltip
6. Popover
7. Alert

Modal:

A modal is a dialog prompt just like a traditional alert. It comes with advanced features like modal
title, modal body, modal footer, close button and a close symbol at the top right corner. It can be used
as a confirmation window in many applications such as before making a payment, or deleting an
account, etc.

<!-- Button trigger modal -->


<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h1>Hello World!</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Bootstrap Modal has three sections: header, body and footer. You can decide what to place in each of
them.

DropDown:

Creating a drop down menu in Twitter Bootstrap 3 gets extremely easy. You just have to understand
right markup required. You can use this DropDown in a navigation bar or inside any div you wish.

<div class="dropdown">
<a data-toggle="dropdown" href="#">Show Links <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#">Third Link</a></li>
</ul>
</div>
if you are not comfortable with the data-* attributes then you can even trigger drop down using
jQuery. Give a unique id to the link element and call the dropdown method as below:

$('#myDropDown').dropdown();

ScrollSpy:

ScrollSpy is an interesting JavaScript module added to the Bootstrap library. It is basically a


combination of navigation menu and contents below. Its role is to update the active item in the
navigation bar as you scroll down the content area.

To use the ScrollSpy feature you have to add data-spy=”scroll” and data-target=”#top-navigation”
attribute to the body element. Here #top-navigation is the id of my navigation bar. Make sure the links
in the navigation bar are internal links. See the demo page for a live example.

Tabs:

Bootstrap tabs take inspiration from traditional jQuery tabs. They both look and function alike. To
use Bootstrap Tabs you need to define two separate sections: the tabs navigation and tab areas.

The markup goes like below:

<!-- Nav tabs -->


<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->


<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
The navigation is created using a ul element with the class “nav-tabs” while the additional class “nav”
is used to apply the navigation CSS style. Each li element is composed of an internal link that should
define the attribute “data-toggle” as “tab”. This triggers Twitter Bootstrap’s Tabs JavaScript and the
respective tab area is displayed.

Coming to the tabs area, it consists of a set of div elements. The parent div should have a class as “tab-
content” and the child divs should have a class “tab-pane”. Each tab-pane must have an id
corresponding to the internal links defined in the tabs navigation. In the above example, I have set a
class of the first tab-pane as active. This makes it visible by default.

ToolTip

ToolTip is an extremely useful JavaScript plugin provided by Bootstrap . It helps in showing help texts
on any HTML element. It’s cross-browser compatible, too!

To use ToolTip, the markup goes like this:

<button id="myButton" type="button" class="btn btn-default" data-toggle="tooltip" data-


placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
The above markup displays a button with the tooltip feature. Attribute “data-toggle” is used by
Bootstrap to identify on which element it has to display the tooltip. Attribute “data-original” is used to
define what goes inside the tooltip. Attribute “data-placement” is used to help bootstrap where to show
the tooltip.

For performance reasons, Bootstrap will not initialize the ToolTip and Popover components by
default. You have to initialize them manually by using the following jQuery:

$('#myButton').tooltip();

Popovers:

If you have ever been a hardcore iBook reader, then you would understand what popovers are. They
are the extended version of ToolTip with some more functionalities. You can display more HTML
elements like img tags, links, additional divs, etc inside Popovers.

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-


content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
Popover on left
</button>
The HTML snippet displays a button with popover functionality. It also has set of custom data-
attributes that you must necessarily understand.

Attribute “data-toggle” identifies which element must control the popover.


Attribute “data-content” contains the data that should be displayed inside the popover.
Attribute “data-placement” tells on which side should the popover appear.
In the above case, the data must be plain text only. If you want to display HTML content inside the
popover, then you have to add the additional attribute “data-html” as true. The HTML data-content
must go inside the double quotes with escaped characters wherever necessary.

The markup for the HTML data contents inside the popover should be like below:

<button id="myPopover" type="button" class="btn btn-default" data-toggle="popover" data-


placement="left" data-html="true" data-content="<a href=\"http://www.google.com\">Go to
google</a>" data-original-title="" title="">
Popover on left
</button>
Use the below jQuery to initialize popovers:

$('#myButton').popover();

Alerts:

Alerts by Twitter Bootstrap are not like window popups. They are a set of divs with predefined
background colors and a dismiss button. The markup goes like below:

<div class="alert alert-warning fade in">


<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
__________________________________________________________________________

Differences between Bootstrap and JQuery UI:

Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster
and easier. It contains HTML and CSS based design templates for various responsive front-end
designing, as well as optional JavaScript plugins.

JQuery UI: JQuery UI is a collection of GUI widgets and themes which is implemented with a
JavaScript library. It is used for back-end web designing.
Difference between Bootstrap and JQuery UI:
1. TYPE OF FRAMEWORK: Bootstrap is a framework for front-end developing web
applications and web pages. It is provided as a free open source framework to people. It was
developed and designed by Bootstrap core team. It is written in HTML, CSS, and JavaScript,
Whereas,
JQuery UI is an open source framework to design the client-side or do the back-end scripting of
HTML. It is also free and easy to use. It was developed and designed by The JQuery team. It is
written in JavaScript.
2. BASED ON IT’S USE: Bootstrap is famous for developing responsive websites and mobile
projects. Using Bootstrap you can develop a feature that you can work in with every size of the
screen as it provides consistency across all the browsers and different devices,
Whereas,
JQuery UI is used for the development of an user interface based on HTML to make the websites
more responsive on all the browsers. It works on JavaScript library.

3. BASED ON FUNCTIONS: Bootstrap contains several JavaScript components known as


JQuery plugins,
Whereas,
JQuery UI comes with a library of pre-written functions.
4. BASED ON APPEARANCE: Bootstrap seems to be very professional even when you use it’s
basic templates,
Whereas,
JQuery UI looks aged and old fashion and gives best appearance in old version browsers.
Based on above explained differences between Bootstrap and JQuery Ui there are some head to
head differences between them which are mentioned below:
Bootstrap JQuery UI

Bootstrap is designed and created by core JQuery UI is designed and created by JQuery
team of Twitter team.

Bootstrap is used for the good appearance of JQuery UI is aimed to ease the JavaScript-call
the website or front-end process i.e. back-end.

Libraries of Bootstrap are written in HTML, Libraries of JQuery UI are written in JavaScript
CSS & JavaScript. only.

Bootstrap provides components of JavaScript JQuery UI contains a library of several pre-


in the form JQuery plugins. written functions

Bootstrap is mainly used to develop JQuery UI contains its own user-interface


responsive web-pages. counterpart.

Bootstrap is less demanded in the market as


compared to the JQuery UI. JQuery UI is highly demanded in the market.

Bootstrap is highly oriented towards JQuery UI is less oriented towards


responsiveness. responsiveness as compared to Bootstrap

Bootstrap has its own Bootstrap Grid system JQuery UI has no grid system.
Bootstrap JQuery UI

to develop free-flowing layout.

Bootstrap looks very professional even with JQuery UI looks old fashioned and not very
its basic template professional as compared to Bootstrap

Bootstrap is based on CSS3 and looks cool in JQuery UI is based on UI and looks cool in old
new browsers browsers.

Bootstrap is developed to be instantly


compatible with all sizes of screens. JQuery doesn’t have this ability.

_________________________________________________________________________________
Introduction to NPM scripts(Node Package Manager )

It is the world’s largest Software office. This office contains over 8,00,000 code packages.
Many Open-source developers use npm to share software. Many organizations also use npm to
manage private development.
“npm scripts” are the entries in the scripts field of the package.json file. The scripts
field holds an object where you can specify various commands and scripts that you want to expose.
These can be executed using the following command-
npm run <script-name>
NPM scripts are used to automate tasks like minifying CSS, uglifying JavaScript, building project.
NPM scripts are versatile and simple and by learning fewer tools, we can automate tasks in our web
project.
For example, this is our package.json file.
{
"name": "example",
"scripts": {
"test": "echo 'hello world'"
}
}
and it can be run by using the following command –
npm run test
This is very useful when we have repetitive tasks and we have to automate them.

NPM scripts within another NPM scripts:


{
"name": "example",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
}
}
So by using npm start, it will run another command npm run lite, lite is lite-server. So the command
that run is npm run lite-server, this will cause node server to run.
Web development and deployment requires a lot of repetitive tasks, So there was a need for tools
that automate these tasks.
So here are some tasks which can be automated.
CSS Tasks:
 Compiling Sass ( stands for Syntactically Awesome Stylesheet )or Less into CSS.
 Running Autoprefixer to add vendor prefixess that are needed.
 Minification: removing unnecessary characters (white spaces, newlines, comments) from
source code without compromising functionality.
 Concatenation
Javascripts Tasks:
 JSHint: Checking JavaScript code for errors and potential problems (static code analysis).
 Concatenation
 Uglification: minification + mangling (reduce local variables to single letters).
 Rechecking for errors.
Building Project:
 Projects can be build that consists of all files and folders requires and several
dependencies.
 some of the packages which is used are rimraf, copyfiles, usemin, cssmin, htmlmin,
uglifyjs.
Image Compression & BrowserSync:
 Images are compressed using imagemin.
 Automatically browser is rendered when changes are done using onchange.

npm consists of three distinct components:

 the website
 the Command Line Interface (CLI)
 the registry(Office)
Use the website to discover packages, set up profiles, and manage other aspects of your npm
experience. For example, you can set up organizations to manage access to public or private
packages.

The CLI runs from a terminal, and is how most developers interact with npm.

The registry is a large public database of JavaScript software and the meta-information surrounding
it.

Use npm to . . .

 Adapt packages of code for your apps, or incorporate packages as they are.
 Download standalone tools you can use right away.
 Run packages without downloading using npx.
 Share code with any npm user, anywhere.
 Restrict code to specific developers.
 Create organizations to coordinate package maintenance, coding, and developers.
 Form virtual teams by using organizations.
 Manage multiple versions of code and code dependencies.
 Update applications easily when underlying code is updated.
 Discover multiple ways to solve the same puzzle.
 Find other developers who are working on similar problems and projects.

Steps to Create and Publish NPM packages:


we will learn how to develop and publish your own npm package (also called an NPM module).
There are many benefits of NPM packages, some of them are listed below:
 Reusable code
 Managing code (using versioning)
 Sharing code
The life-cycle of an npm package takes place like below:
Module Life-cycle

1. Setup a Project: Setting up a project is required before doing anything.


 Install Node.js
 Create an npm account.
npm-signup

 Logging in to the npm account using npm login

npm-login

2. Initializing a module: To initialize a module, Go to the terminal/command-line and type npm


init and answer the prompts.
npm-init

 In the version prompt, set it to 0.0.0. It initializes the module. If you keep it 1.0.0, it
means that the current module version is the first major release to the potential
downloaders. Of course, you don’t want the first major release to be only a blank slate
and full of bugs.
 In the main prompt, choose the entry point of the module. Potential downloaders will use
it as the entry point to the module. Note that the entry point is ‘src/index.js’ which is
considered as a standard practice these days to put your code in a ‘src’ directory.
 In the test command prompt, simply press Enter. In the photograph above, it has been
edited out because of some typo mistake. You can change your test command from the
eventually forming package.json file as well.
 In the git repository prompt, you can fill the url of the git repository where the package
will be hosted.
 Fill the keywords, author, license or you can press ‘Enter’ your way through them. These
can be later modified in the package.json.
 Include a README.md file in the project for potential downloaders to see. This will
appear in the homepage of your module. Note that, the file should be a markdown.
A README.md should be added to an npm module so that potential users for the
purposes of serving them with information like module description, how to use the
package, how to contribute to package, etc.
Ultimately, it is desirable if our project directory looks something like:

project-directory-structure

3. Building a module: This phase is the coding phase. If you have any experience of using NPM
modules, you would know that NPM modules expose methods that are then used by the project. A
typical control-flow is:

Function-call-workflow-that-present-in-npm-module

Lets first implement a simple function that add two numbers in the npm module. This function looks
like below:
File Name: index.js
const gfgFns = {

add : function addTwoNums( num1, num2 ) {

return (num1 + num2) ;

module.exports = gfgFns

Note that, the structure of index.js file (which is the entry point of npm module that we are
building).
const gfgFns = {} The object that is exported for others to use.

add: function addTwoNums() The function name (addTwoNums) is marked by ‘add’.

This ‘add’ name is used to call this function to add two numbers.
 module.exports = gfgFns The gfgFns object is then exported with this name. When this
function needs to be used in some other file.
4. Publishing a module: After completion of coding module, publish the npm package. To publish
the package, there is one thing to keep in mind: if your package name already exists in the npm
registry, you won’t be able to publish your package. To check if your package name is usable or not,
go to the command-line and type
npm search packagename
If your package name is usable, it should show something like in the image below.

npm-search-gfgnpmpkgupload-cmd-1

If your module name already exists, go to the package.json file of the npm module project and
change the module name to something else.
Now after checking the name availability, go to command-line/terminal and do the following:
npm publish
npm-publish-cmd

Now, lets try to use this module and see if it works.


 Make a fresh project directory.
 In the terminal, type npm init to initialize the Node project.
 Now do npm install gfgnpmpkgupload to download the npm module that we just made.

appjs-npmpkgupload-directory-add_function

 Now everything is set, lets try to run node.js file and see if our module is correctly
uploaded, published, imported in our new project, and used.

node-appjs-add(4+5=9)-run-success-11

5. Updating and managing versions: If a software is being developed, it is obvious that it has
versions. Versions are a result of bug fixes, minor improvement, major improvements and major
releases. To cater to versioning, NPM provides us with the following functionality.
Versioning and publishing code: NPM allows us to version our module on the basis of semantic-
versioning. There are three types of version bumps that we can do, ie, patch, minor, and major. For
example, if the current module version is 0.4.5:
# note how minor version upgrade resets patch version to 0, similarly,
# major version upgrade sets minor and patch #to 0.
> npm version patch # update version to 0.4.6
> npm version minor # update version to 0.5.0
> npm version major # update version to 1.0.0
When we run the above command, the version number in the package.json file is automatically
updated as well.
Note: If the module is being re-published without bumping up the version, NPM command-line will
throw an error. For example, look the below image.

npm publish abort due to unchanged version number

Here, the command-line threw an error because an ‘npm publish’ was attempted without bumping up
the version.
An obvious note: You can’t bump-down the version. For example, the version can’t change from
0.1.2 to 0.1.1 .
What happens when user has older version of the module ? When an npm module is re-published
(updated), the users just have to run ‘npm install gfgnpmpkgupload’ (npm install packagename)
again to get the latest version.
A package dependent on other packages: In the journey of developing packages, it is common to
search, use and see dependencies. Doing this takes place like something below:
 In the npm module project, install the dependencies that are required by your npm
module.
 Install those dependencies to your project using
 npm install packagename1[ packagename2]
 Check that these dependencies are now mentioned in the 'dependencies' key in the
package.json file. Note that the dependencies and their version mentioned here will be
carried on forward with the npm package.

 After assuring that all the above steps are rightly executed, simply publish the module
using
 > npm version minor

 npm publish
.
Above procedure should execute successfully, and the result should be available to see in
the npm registry website like below:

three-dependencies-prompt-jest-mathsjs

Building a more complex module: Lets try to build a module that reads a txt file, extract numbers
from the file, adds them all and display the result in a console.
To do this, our npm module should be this.
Now, we have our module set, lets import it into our new project using
npm install gfgnpmpkgupload
Before running the above command, do run
npm init -y
to set up the project.
Make your project like below:

npmpkguploadtest project structure


The datafiles should contain a numFile.txt that has the numbers that have to be added and displayed
in console.
// numFile.txt - sum = 55
1 2 3 4 5 6 7 8 9 10
To consume this numFile.txt, we will have a gfgapp.js that will do the actual addition.

npmpkguploadtest-gfgappjs

To test this, go to command-line and run


node gfgapp.js

node gfgappjs commandline view run success

NPM module boilerplate: NPM module boilerplates are also available for project scaffolding
on yeoman.io . Various combinations of technologies are available and you can use the generator
that you like. To start, go to Yeoman Generator Search and search for something like 'npm module
boilerplate'.
Unpublishing an NPM package: An NPM package should be taken down within 72 hours of the
initial publish. The other way is to contact the npm registry. If you are unpublishing within 72 hours,
use the following command:
npm unpublish packageName
NPM's unpublishing packages from the registry is a good page to go through to learn more about
this.
Example: Use the published package to add two numbers.
Filename: app.js

const GFGFns = require('gfgnpmpkgupload');


console.log(GFGFns.add(4, 5));

Output:

node-appjs-add459-run-success-1

_________________________________________________________________________

Task runners:
Task runners are the heroes (or villains, depending on your point of view) that quietly toil behind
most web and mobile applications. Task runners provide value through the automation of numerous
development tasks such as concatenating files, spinning up development servers and compiling code.

Why use a task runner?


In one word: automation. The less work you have to do when performing repetitive tasks like
minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've
configured it through a Grunt file, a task runner can do most of that routine work for you—and your
team—with basically zero effort.

Grunt:
The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to
choose from, you can use Grunt to automate just about anything with a minimum of effort. If
someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm
is a breeze.

Gulp:
The streaming build system. Build system automating tasks: minification and copying of all
JavaScript files, static images. More capable of watching files to automatically rerun the task when a
file changes; npm: The package manager for JavaScript. npm is the command-line interface to the
npm ecosystem.

gulp and Grunt are task runners. They are different approaches to same
problem. Grunt uses configuration based approach, while gulp uses streams
from node to achieve result. You use them to define how and which tasks to
execute (copying files, adding banners, replacing text, style checking, etc...).

You might also like