2. Button java script
• Button Method
Method Description
.button("toggle") Makes the button look pressed
.button("loading") Disables the button and changes the button text to
"loading..."
.button("reset") Changes the button text to original text (if changed)
.button("string") Specifies a new button text
3. .button("toggle")
<body>
<div class="container">
<h2>Button Methods</h2>
<p>The <strong>toggle</strong> method makes the button look pressed. Click on both buttons, but also click outside the button afterwards to
see the difference.</p>
<button type="button" class="btn btn-default">Button (toggle)</button>
<button type="button" class="btn btn-default">Button (no toggle)</button>
</div>
<script>
$(document).ready(function(){
$(".btn-default:first").click(function(){
$(this).button('toggle');
});
});
</script>
</body>
9. .button(“string”)
<body>
<div class="container">
<h2>Button Methods</h2>
<p>The <strong>string</strong> method changes the button text.</p>
<p><strong>Note:</strong> You must add the <strong>data-STRING-text</strong> attribute with a value of the specified
button text, for this example to work.</p>
<button type="button" class="btn btn-default" data-somestringvalue-text="Loading Finished" autocomplete="off">Example Button</button>
</div>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function(){
$(this).button('somestringvalue');
$(this).dequeue();
});
});
});
</script>
</body>
11. Dropdowns
• The .dropdown class indicates a drop down menu.
• To open the dropdown menu, use button or a link with a
class of .dropdown-toggle attribute.
• The .caret class creates an caret arrow icon, which
indicates that the button is dropdown.
• Add the .drop-menu class to a <ul> elements to actually
build the dropdown menu.
• The .divider class is use to separate links inside the
dropdown menu with a thin horizontal border.
12. Example
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>
14. Disable and Active item
• Highlights a specific dropdown item with the .active class.(adds a blue
background color)
• To disable an item in the dropdown menu, use the .disable class.(gets
a light-grey text color and a “no-parking-sign” icon on hover)
• Example
• <li class=“disabled”><a href=“#”>CSS</a></li>
• <li class=“active”><a href=“#”>HTML</a></li>
15. example
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Normal</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Normal</a></li>
</ul>
</div>
</div>
</body>
17. Dropup
• If you want the dropup menu to expands upwards instead of
downwards, change the <div> element with class=“dropdown” to
“dropup”
• Example
• <div class=“dropup”>
18. Example
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>
23. Dropdown events
Event Description
Show.bs.dropdown Occurs when the dropdown is about to be shown.
shown.bs.dropdown Occurs when dropdown is fully shown.(after CSS transition
has completed)
Hide.bs.dropdown Occurs when the dropdown is about to hidden
Hidden.bs.dropdown Occurs when the dropdown is fully hidden.(after CSS
transition has completed)
24. Navigation Bars
• A navigation bar is a navigation header that is placed at the top
of the page
• With Bootstrap, a navigation bar can extend or collapse,
depending on the screen of size.
• A standard navigation bar is created with <nav class=“navbar
navbar-default”>
• If you don’t line the style of the default navigation bar,
Bootstrap provides an alterative, black navbar:
• Just change the .navbar-default to .navbar-inverse.
27. Continue..
• The .navbar-right class is use to right-align the navigation bar
buttons.
• The .navbar-btn class is use to add button in the navigation bar.
• The .navbar-form class is use to add element inside the navigation
bar.
• The .navbar-text class is use to add text into the navigation bar. This
text is not a link this text is normal text.
• The .navbar-fixed-top class can fixed the navbar at top of the page.
• The .navbar-fixed-bottom class can fixed the navbar at bottom of
the page.
• A fixed navigation bar stays visible in a fixed position (top or bottom)
independent of the page scroll.
28. Pagination
• The following table list the classes that bootstrap provides
to handle the pagination.
Class Description
.pagination Add this class to get the pagination on your page.
.disabled,
.active
You can customize the links by using .disabled for
unclickable links and .active to indicate the current
page.
.pagination-lg,
.pagination-sm
Use this classes to get different size items.
31. List Groups
• The most basic group is an unordered list with list items.
• To create basic list group, use an <ul> element with class
.list-group, and <li> element with class .list-group-item.
• Example
<ul class=“list-group”>
<li class=“list-group-item”>first item</li>
<li class=“list-group-item”>first item</li>
<li class=“list-group-item”>first item</li>
</ul>
32. List group with badge
• You can also add badges to a list group. The badge will automatically be
positioned on the right.
• To create badge, create a <span> element with class .badge inside the list
item.
• Example
<ul class=“list -group”>
<li class=“list-group-item”>Songs</li>
<li class=“list-group-item”>Movies<span class=“badge”>New</span></li>
<li class=“list-group-item”>Clips</li >
</ul>
33. List group with linked items with active
and disabled state
• The item in a list group can also be hyperlinks. This will add
grey background color on hover.
• To create a list group with linked items, use <div> instead of
<ul> and <a> instead of <li>.
• example
<div class=“list-group”>
<a href=“#” class=“list-group-item active”>first item</a>
<a href=“#” class=“list-group-item disabled”>second item</a>
<a href=“#” class=“list-group-item”>third item</a>
</div>
35. Print classes
• Similar to the regular responsive classes, you can use the
following utility classes to show or hide certain elements
for printing purpose.
36. <body>
<div class="container">
<div class="row">
<div class="col-xs-12 hidden-print">
<div class="customDiv">Visible on browser NOT when printing</div>
</div>
<div class="col-xs-12 visible-print">
<div class="customDiv">Visible when printing</div>
</div>
</div>
</div>
</body>
Example: print.html
37. Responsive embed
• It allow browsers to determine video or slideshow dimensions based
on the width of their containing block by creating an intrinsic ratio
that will properly scale on any device.
• Classes can be applied directly to <iframe>, <embed>, <video>, and
<object> elements.
• There are two aspect ratio classes:
• 4:3 [universal video format]
• 16:9 [HD laptop,television]
39. Accessibility in Bootstrap
• Skip navigation
• If your navigation contains many links and comes before the main content in
the DOM, add a Skip to main content link before the navigation.
• Using .sr-only class will visually hide the skip link, and the .sr-only-focusable
class will ensure that the link becomes visible once focused.
• Nested headings (<h1> - <h6>)
• It is mainly used in screen reading content.
• Subsequent headings should make logical use of <h2> - <h6> such that screen
readers can construct a table of contents for your pages.
40. Bootstrap JavaScript Plugins
• Modals
• A streamlined, but flexible, take on the traditional javascript modal plugin
with only the minimum required functionality and smart defaults.
• JS code : $('#myModal').modal(options)
41. Bootstrap JavaScript Plugins
• Dropdown
• Add dropdown menus to nearly anything in Bootstrap with this plugin.
• Bootstrap features full dropdown menu support on in the navbar, tabs, and
pills.
• Calling the dropdowns via javascript code : $('.dropdown-toggle').dropdown()
• ScrollSpy
• The ScrollSpy plugin is for automatically updating nav targets based on scroll
position.
• Calling the dropdowns via javascript code : $('#navbar').scrollspy()
• scrollsky.html
42. Bootstrap JavaScript Plugins
• Collapse
• Collapse is use to hide/show the content after clicking on it.
• Collapse Plugin classes are
Classes Description
.collapse Hides the content
.collapse in Shows the content
.collapsing Added when the transition starts, and
removed when it finishes
43. • Example: collapse.html
<body>
<button type="button" class="btn btn-info" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</div>
</body>
44. • Popover
• The Popover plugin is similar to tooltips; it is a pop-up box that appears when
the user clicks on an element.
• The difference is that the popover can contain much more content.
• Example:
<a href="#" title="Dismissible popover" data-toggle="popover" data-
trigger="focus" data-content="Click anywhere to close this popover">Click
me</a>
popover.html
Bootstrap JavaScript Plugins
45. • Alert
• Bootstrap provides an easy way to create predefined alert messages.
• Alerts are created with the .alert class, followed by one of the four contextual
classes
Bootstrap JavaScript Plugins
Classes
.alert-success
.alert-info
. alert-warning
.alert-danger
46. Example alert.html
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative
action.
</div>
</div>
47. Classes in Modal
Class Description
.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to
add the modal's header, body, and footer.
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by
default. To change this, overwrite CSS with text-align:left|center
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out
48. Modal Options
Name Type Default Description
backdrop boolean or the
string "static"
true •Specifies whether the modal should have a dark
overlay:
true - dark overlay
•false - no overlay (transparent)
If you specify the value "static", it is not
possible to close the modal when clicking
outside of it
keyboard boolean true •Specifies whether the modal can be closed with
the escape key (Esc):
true - the modal can be closed with Esc
•false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when
initialized
49. Modal Methods
Method Description
.modal(options) Activates the content as a modal. See
options above for valid values
.modal("toggle") Toggles the modal
.modal("show") Opens the modal
.modal("hide") Hides the modal
50. Affix
• The Affix plugin will help us “fix” the position of our navigation
section, while allowing us to add vertical offsets to this fixed element,
depending on where the user has scrolled.
• To use the Affix plugin in our project, we have to specify the element
that will receive the “affix” behavior. We can do this by adding the
data-spy="affix" attribute/value to it.
51. The plugin toggles between three classes,
described here
1. affix-top:
which indicates that the element is in its top-most
position.
2. affix:
which is added when the element starts to scroll
off the screen, and which applies the
position: fixed property to it.
3. affix-bottom:
which indicates the bottom offset of the element.
52. Tabs
• Tabs are used to separate content into different panes
where each pane is viewable one at a time.
53. Class Description
.nav nav-tabs Creates navigation tabs
.nav-justified Makes navigation tabs/pills equal widths of their parent, at
screens wider than 768px. On smaller screens, the nav tabs
are stacked
.tab-content Together with .tab-pane and data-toggle="tab", it makes the
tab toggleable
.tab-pane Together with .tab-content and data-toggle="tab", it makes
the tab toggleable
Classes
Method
Method Description
.tab("show") Shows the tab
54. Tooltips
•The Tooltip plugin is small pop-up box that
appears when the user moves the mouse pointer
over an element.
55. Via data attribute
Attribute is:
1.data-toggle
2.Title
3.Data-placement
• Top
• Bottom
• Left
• Right
Eg
<a href="#" data-toggle="tooltip" title="Hooray!“ data-placement=“top">Hover over
me</a>
56. • In javascript
// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified element
$('#myTooltip').tooltip();
• Method
Method Description
.tooltip("show") Shows the tooltip
.tooltip("hide") Hides the tooltip
.tooltip("toggle") Toggles the tooltip
57. Popover
• Popover can contain much more content.
Via data-* Attributes
1. data-toggle="popover" activates the popover.
2. title attribute specifies the header text of the popover.
3. data-content attribute specifies the text that should be displayed inside the popover's
body.
58. • In JavaScript
// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified element
$('#myPopover').popover();
• Method
60. transitions
• For simple transition effects, include bootstrap-transition.js once
alongside the other JS files. If you're using the compiled (or
minified) bootstrap.js, there is no need to include this—it's already
there.
• Used by other plugins to check for transition support and to catch
hanging transitions.
61. alert
• Plugin : alert.js
• Methods :
• .alert(“close”)
• Events :
Event Type Description
close.bs.alert This event fires immediately when the close instance
method is called.
closed.bs.alert This event is fired when the alert has been closed (will wait
for CSS transitions to complete).
62. <body>
<div class="container">
<h2>Alert Events</h2>
<p>The <strong>close</strong> event occurs when the alert message is about to be closed.</p>
<div class="alert alert-danger alert-dismissible" id="myAlert">
<a href="#" class="close">×</a>
<strong>Hey you!</strong> Try to close this alert message.
</div>
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#myAlert").alert("close");
});
$("#myAlert").on('close.bs.alert', function(){
alert('The alert message is about to be closed.');
});
});
</script>
</body>
63.
64. collapse
• plugin that utilizes a handful of classes for easy toggle behaviour.
• .collapse class indicates a collapsible element(eg : <div>,<p>).
• Add data-toggle="collapse“ to the element.
• Add data-target="#id“ to connect the button and element.
65. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse">
Hello Guys . This is a collapsible element.
</div>
</div>
</body>
</html>
74. carousel
• Class name : “carousel slide”
• Slide used for animation and transition effect.
• Use of an ID
• data-ride="carousel“ tells bootstrap to load immediately
85. Using third-party bootstrap
• http://bootstrap-live-customizer.com/
• Bootstrap Switch
• Bootstrap Date / Time Picker, Date Ranges
• Bootstrap Slider
87. What is Accessibilty?
• Web accessibility means that people with disabilities can
use the Web.
• Web accessibility also benefits others, including older
people with changing abilities due to aging.
• Web accessibility encompasses all disabilities that affect
access to the Web, including visual, auditory, physical,
speech, cognitive, and neurological disabilities.
• Eg-
• Alternative Text for Images.
• Keyboard Input.
• Transcirpts for podcasts.
88. Accessible design in Bootstrap
Bootstrap follows common web standards and –with minimal extra
effort can be used to create sites that are accessible to all.
• Skip Navigation.
• If your navigation contains many links and comes before the main content in
the DOM, add a Skip to main content link before the navigation.
• Nested Headings.
• When nesting headings (<h1> - <h6>), your primary document header should
be an <h1>. Subsequent headings should make logical use of <h2> - <h6>
such that screen readers can construct a table of contents for your pages.
• Color Contrast.
• Low contrast ratio cause problems to users with low vision or who are color
blind. These default colors may need to be modified to increase their contrast
and legibility.
89. Tricks for making Bootstrap sites accessible
You can use the following available frameworks to add accessibility in your bootstrap:
• Assets.CMS.gov
• the section 508 compliant responsive framework for front-end
development.
• https://assets.cms.gov/resources/framework/3.4.1/Pages/
• PayPal’s Accessibility Plug-in
• This plugin adds accessibility mark-up to the default components of
Bootstrap 3 to make them accessible for keyboard and screen reader
users.
• Other related:
• Web Experience Toolkit (WET)
• GOV.UK elements.
91. What is a CSS preprocessor?
• Pre-processors, with their advanced features, helped to achieve
writing reusable, maintainable and extensible codes in CSS. By using a
pre-processor, you can easily increase your productivity, and decrease
the amount of code you are writing in a project.
• Pre-processors extend CSS with variables, operators, interpolations,
functions, mixins and many more other usable
assets. SASS, LESS and Stylus are the well known ones.
92. Using less
Bootstrap's CSS is built on Less, a preprocessor with additional
functionality like variables, mixins, and functions for compiling CSS.
Those looking to use the source Less files instead of our compiled CSS
files can make use of the numerous variables and mixins we use
throughout the framework.
Variables:
• Colors:
• Easily make use of two color schemes: grayscale and semantic. Grayscale
colors provide quick access to commonly used shades of black while semantic
include various colors assigned to meaningful contextual values.
• Eg:
// Use as-is.masthead
{ background-color: @brand-primary;}
// Reassigned variables in Less
@alert-message-background: @brand-info;.alert
{ background-color: @alert-message-background;}
93. • Scaffolding:
• A handful of variables for quickly customizing key elements of your
site's skeleton
• Eg:
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
• Links:
• Easily style your links with the right color with only one value.
• Eg
// Variable
s@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a { color: @link-color; text-decoration: none;
&:hover { color: @link-hover-color;
text-decoration: underline; }
}
94. Vendor Mixins:
• Vendor mixins are mixins to help support multiple browsers by
including all relevant vendor prefixes in your compiled CSS.
• Eg.
• Box-Sizing:
• Reset your components' box model with a single mixin.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
• You can use it for transformations, transitions, shadows,
rounded corners, animations, opacity, gradients, etc.
95. Utility Mixins:
• Utility mixins are mixins that combine otherwise unrelated CSS
properties to achieve a specific goal or task.
• Eg.
• Horizontal Centering:
• Quickly center any element within its parent. Requires width or max-
width to be set.
// Mixin.center-block()
{ display: block;
margin-left: auto;
margin-right: auto;}
// Usage.container {
width: 940px;
.center-block();
}
• It can also be used for resizing ,truncating text ,etc.
96. Using sass
• While Bootstrap is built on Less, it also has an official Sass port. It
maintains a separate GitHub repository and handle updates with a
conversion script.
• Sass (Syntactically Awesome StyleSheets) is an extension of CSS. Sass
allows you to use things like variables, nested rules, inline imports
and more.
• It also helps to keep things organized and allows you to create
stylesheets faster.
97. • What’s included?
Path Description
lib/ Ruby gem code (Sass configuration, Rails
and Compass integrations)
tasks/ Converter scripts (turning upstream Less
to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert
99. Bootstrap Editors
• So after all such amazing use of bootstrap to make web sites
awesome you will surely be tempted to use bootstrap.
• But what if you didn’t have to write out all that code by hand? What if
you could select the Bootstrap components you want to work with,
and drag them onto your canvas?
• Bootstrap editors and builders make it easier to prototype, test and
build responsive websites.
• Following listed are some of best editors..
100. Bootply:
• Bootply is known as the playground for Bootstrap. It’s not only a Bootstrap
editor and builder, but it’s also home to a pretty extensive code repository.
The editor enables you to drag and drop Bootstrap components then edit
the code as you please
• Pricing: Free or $4/month to download source code.
Brix.io:
• Brix is a powerful and sleek looking online Bootstrap builder that enables
you to create responsive interfaces & websites faster than ever.
• Pricing: $14.90 – $49.90 per month.
Jetstrap:
• Jetstrap is a premium web-based interface building tool for Bootstrap 3
that helps developers and designers get websites up and running fast.
Develop for all devices and access your work from anywhere.
• Pricing: $16 – $99 per month.
101. Divshot:
• Divshot is not only a visual Bootstrap editor, but also an application-grade hosting
environment built for developers.
• Pricing: Free – $100/month (with hosting).
Pinegrow:
• Pinegrow is a desktop app for Mac, Windows & Linux that lets you mockup &
design webpages faster with multi-page editing,.
• Pricing: $49.95 for a one-time personal license.
LayouIt:
• LayoutIt is a simple but effective Bootstrap interface builder to make your front-
end coding easier. You can start from scratch or use one of the base templates.
• Pricing: Free
Pingendo:
• Pingendo is a visual desktop application that helps you to prototype responsive
web pages based on Bootstrap.
• Pricing: Free
103. • Bootstrap itself is full of useful Javascript
components that cover many use cases - be it modal
window e.g. for user login, carousel for your homepage,
alert messages to show an important message to the
visitor.
• But sometimes you need more than that, lightbox for
your photos, markdown text editor, mega menu for your
Bootstrap navbar. This is the time when to look for some
of the Bootstrap 3rd party plugins - they are usually built
on top of the existing Bootstrap components and extend
them in many ways.
• Some of them are….
104. COMPONENT PACKAGES
• Fuel UX:
• Fuel UX extends Bootstrap with additional lightweight JavaScript
controls for your web applications. It includes checkbox, combo box, date
picker, infinite scroll, loader, pillbox, placard, radio, repeater, scheduler,
search, select list, spinbox, tree and wizard. The complex library really worth
checking out.
• Jasny Bootstrap:
• Jasny Bootstrap is a component package that many of us will find useful.
Included are: labelled buttons, off-canvas menu component, fixed-top alerts,
input mask for text inputs, file input with image previews and more.
105. LIGHTBOXES AND GALLERY PLUGINS
• EkkoLightbox - Lightbox for Bootstrap 3:
• EkkoLightbox is a lightbox module for Bootstrap that
supports images, YouTube videos, and galleries and is built
around Bootstrap's Modal plugin.
106. BUTTONS
• Social Buttons for Bootstrap:
• Social Sign-In Buttons made in pure CSS based on Bootstrap and
Font Awesome! Really easy to work with, just add one of the
prepared classes.
107. NAVIGATIONS AND NAVBARS
• Yamm:
• It uses the standard navbar markup and the fluid grid system
classes from Bootstrap. Work for fixed and responsive layout and
has the facility to include (almost) any Bootstrap elements.
108. FORMS
• jqBootstrapValidation:
• qBootstrapValidation is a jQuery validation plugin for bootstrap forms. It can
validate email, number, min, max, pattern and much more!
• Tokenfield for Bootstrap:
• Tokenfield for Bootstrap is an advanced tagging/tokenizing plugin for jQuery
and Twitter Bootstrap with a focus on keyboard and copy-paste support.
110. Stay up to date on the development of Bootstrap and reach out to the
community with these helpful resources.
• Read and subscribe to The Official Bootstrap Blog:
http://blog.getbootstrap.com/
• Chat with fellow Bootstrappers using IRC in the irc.freenode.net server, in
the ##bootstrap channel.
• For help using Bootstrap, ask on StackOverflow using the tag twitter-
bootstrap-3 : https://stackoverflow.com/questions/tagged/twitter-
bootstrap-3
• Developers should use the keyword bootstrap on packages which modify
or add to the functionality of Bootstrap when distributing through npm or
similar delivery mechanisms for maximum discoverability.
• Find inspiring examples of people building with Bootstrap at the Bootstrap
Expo : http://expo.getbootstrap.com/
• You can also follow @getbootstrap on Twitter for the latest gossip and
awesome music videos.