WT-Unit 4-BootStrap
WT-Unit 4-BootStrap
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
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:
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>
</body>
</html>
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.
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;
}
<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="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Viewport:
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.
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:
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:
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>
<style>
*{
box-sizing: border-box;
.header {
padding: 15px;
.menu {
width: 25%;
float: left;
padding: 15px;
.main {
width: 75%;
float: left;
padding: 15px;
</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
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
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
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
______________________
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
With CSS you can transform boring HTML menus into good-looking navigation bars.
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
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.
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 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
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>
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):
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 Typographic
o Glyphicons
o Jumbotron
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
5. <li class="divider"></li>
7. </ul>
Options
Align menus to the right and add include additional levels of dropdowns.
2. ...
3. </ul>
Regular link
Disabled link
Another link
5. </ul>
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
2. ...
3. <li class="dropdown-submenu">
6. ...
7. </ul>
8. </li>
9. </ul>
Button groups
Examples
Two basic options, along with two more specific variations.
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>
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>
2. ...
3. </div>
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within
a .btn-toolbar for proper rendering.
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.
Action
Danger
Warning
Success
Info
Inverse
1. <div class="btn-group">
2. <button class="btn">Action</button>
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">
4. <span class="caret"></span>
5. </button>
6. <ul class="dropdown-menu">
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>
4. <span class="caret"></span>
5. </button>
6. <ul class="dropdown-menu">
8. </ul>
9. </div>
Basic tabs
Home
Profile
Messages
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
2. ...
3. </ul>
Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Home
Help
Dropdown
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">
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
LIST HEADER
Home
Library
Applications
ANOTHER LIST HEADER
Profile
Settings
Help
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:
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.
5. </ul>
6. <div class="tab-content">
9. </div>
12. </div>
13. </div>
14. </div>
Fade in tabs
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">
4. <ul class="nav">
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
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
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
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">
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.
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
2. ...
3. </div>
Fixed to bottom
Title
Home
Link
Link
2. ...
3. </div>
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
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 -->
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 -->
14.
15. <!-- Everything you want hidden at 940px or less, place within here -->
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
Title
Home
Link
Link
Dropdown
Top of Form
Bottom of Form
Link
Dropdown
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">
4. <li class="active">Data</li>
5. </ul>
Options
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>
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>«</span></li>
4. <li class="active"><span>1</span></li>
5. ...
6. </ul>
7. </div>
Sizes
2. <ul>
3. ...
4. </ul>
5. </div>
6. <div class="pagination">
7. <ul>
8. ...
9. </ul>
10. </div>
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
»
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">
4. </li>
5. <li class="next">
7. </li>
8. </ul>
Pager links also use the general .disabled utility class from the pagination.
← Older
Newer →
1. <ul class="pager">
4. </li>
5. ...
6. </ul>
Labels and badges
Labels
Labels Markup
Badges
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>
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).
1. <div class="page-header">
3. </div>
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
Default alert
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
1. <div class="alert">
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.
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.
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.
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.
2. ...
3. </div>
Success
×Well done! You successfully read this important alert message.
2. ...
3. </div>
Information
×Heads up! This alert needs your attention, but it's not super important.
3. </div>
Basic
Default progress bar with a vertical gradient.
1. <div class="progress">
3. </div>
Striped
Uses a gradient to create a striped effect. Not available in IE7-8.
3. </div>
Animated
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of
IE.
3. </div>
Stacked
1. <div class="progress">
5. </div>
Options
Additional colors
Progress bars use some of the same button and alert classes for consistent styles.
3. </div>
6. </div>
7. <div class="progress progress-warning">
9. </div>
12. </div>
Striped bars
Similar to the solid colors, we have varied striped progress bars.
3. </div>
6. </div>
9. </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">
4. </a>
5. <div class="media-body">
7. ...
8.
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).
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!
2. ...
3. </div>
2. ...
3. </div>
Close icon
Use the generic close icon for dismissing content like modals and alerts.
×
1. <button class="close">×</button>
iOS devices require an href="#" for click events if you would rather use an anchor.
_________________________________________________________________
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.
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.
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:
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.
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!
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.
The markup for the HTML data contents inside the popover should be like below:
$('#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:
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.
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 has its own Bootstrap Grid system JQuery UI has no grid system.
Bootstrap JQuery UI
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.
_________________________________________________________________________________
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.
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.
npm-login
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 = {
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
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.
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-gfgappjs
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
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.
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...).