1. 11/5/2015
1
Introduction to
Bootstrap
- Mitesh Gandhi
Content Page
with Text and Photo
SUB HEADING ONE
Opes sed nonummy tation augue pecus. Venio regula ea fatua
incassum. Nisl quia et aliquip, scisco roto minim.
SUB HEADING TWO
Opes sed nonummy tation augue pecus. Venio regula ea fatua
incassum. Nisl quia et aliquip, scisco roto.
SUB HEADING THREE
Opes sed nonummy tation augue pecus. Venio regula ea fatua
incassum. Nisl quia et aliquip, scisco roto minim.
SUB HEADING FOUR
Opes sed nonummy tation augue pecus. Venio regula ea fatua
incassum. Nisl quia et aliquip, scisco roto.
Subtitle content page with text and photo
INFORMATION
TECHNOLOGY
• What is Bootstrap?
• Setting Up Bootstrap
• Viewport
• Chrome Device Mode Overview
• Containers
• Grid System
• Grid Rules
• Grid Options
Outline
Mitesh Gandhi
• Customize Default Bootstrap Style
• Bootstrap Typography
• Tables
• Forms
• Buttons
• Images
Outline …
Mitesh Gandhi
2. 11/5/2015
2
• Helper Classes
– Close Icon
– Float Left
– Float Right
– Clearfix
– Screen Readers Only
Outline …
Mitesh Gandhi
• Component
– Glyphicons
– Jumbotron
– Button Groups
– Navs
– NavBar
Outline …
Mitesh Gandhi
• Exploring JavaScript Components
– Modals
– Dropdown Menu
– Scrollspy
– Tooltip
– Carousel
• References
• Q&A
Outline …
Mitesh Gandhi
• Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web
sites.
- W3Schools
• Bootstrap is a free and open-source collection of tools for
creating websites and web applications. It contains HTML-
and CSS-based design templates for typography, forms,
buttons, navigation and other interface components, as
well as optional JavaScript extensions.
- Wikipedia
• Bootstrap is a front end framework
What is Bootstrap?
Mitesh Gandhi
3. 11/5/2015
3
• Download and Setup on Local File Server
• Use CDN
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstr
ap.min.css">
Note: Bootstrap makes use of certain HTML elements and CSS
properties that require the use of the HTML 5 doctype.
Setting Up Bootstrap
Mitesh Gandhi
Demo – Hello Bootstrap
Bootstrap…
Mitesh Gandhi
• Bootsrap 3 is mobile first
• To ensure proper rendering and touch zooming, add the
viewport meta tag
• 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.
• HTML5 introduced a method to let web designers take
control over the viewport, through the <meta> tag.
• A <meta> viewport element gives the browser instructions
on how to control the page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport
Mitesh Gandhi
Viewport …
Demo – Viewport
Mitesh Gandhi
4. 11/5/2015
4
• Test your responsive designs by emulating different
screen sizes and resolutions, including Retina
displays.
• Visualize and inspect CSS media queries.
• Evaluate your site’s performance using the network
emulator, without affecting traffic to other tabs.
• Accurately simulate device input for touch events,
geolocation, and device orientation.
• Enhance your current debugging workflow by
combining device mode with the existing DevTools.
Chrome Device Mode
Overview
Mitesh Gandhi
Chrome Device Mode…
Demo – Device Mode
Mitesh Gandhi
• Bootstrap requires a containing element to wrap site
contents and house our grid system.
• You may choose one of two containers to use in your
projects.
• Use .container for a responsive fixed width container
• Use .container-fluid for a full width container, spanning
the entire width of your viewport.
• Due to padding and more, neither container is nestable.
Containers
Mitesh Gandhi
Containers …
Demo – Container
Mitesh Gandhi
5. 11/5/2015
5
• Bootstrap includes a responsive, mobile first fluid grid
system that appropriately scales up to 12 columns as
the device or viewport size increases.
• It includes predefined classes for easy layout options,
as well as powerful mixins for generating more
semantic layouts.
Grid System
Mitesh Gandhi
Grid System…
Demo – Grid Stacked to Horizontal
Mitesh Gandhi
• Rows must be placed within a .container (fixed-width) or .container-fluid (full-
width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate
children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making
grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative margin on
.rows.
• Grid columns are created by specifying the number of twelve available columns
you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra
columns will, as one unit, wrap onto a new line.
Grid Rules
Mitesh Gandhi
Grid Options
Metasys Software
Extra small
devices Phones
(<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops
(≥992px)
Large
devices
Desktops
(≥1200px)
Grid behavior
Horizontal at all
times
Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
6. 11/5/2015
6
Grid System…
Demo – Grid Mobile and Desktop
Mitesh Gandhi
• Add a Custom Style sheet
• Applying Custom Styles
Customize Default Bootstrap Style
Mitesh Gandhi
Customize Default Style…
Demo – Grid Stacked to Horizontal
Mitesh Gandhi
• It defines the styling and formatting of standard
HTML tags with Bootstrap.
• Bootstrap's global default font-size is 14px, with a
line-height of 1.428.
• This is applied to the <body> and all paragraphs.
• In addition, all <p> elements have a bottom margin
that equals half their computed line-height (10px by
default).
Bootstrap Typography
Mitesh Gandhi
7. 11/5/2015
7
Bootstrap Typography …
Demo – Bootstrap Typography
Mitesh Gandhi
• A basic Bootstrap table has a light padding and only horizontal dividers.
• The .table class adds basic styling to a table
• The .table-striped class adds zebra-stripes to a table
• The .table-bordered class adds borders on all sides of the table and cells
• The .table-hover class enables a hover state on table rows
• The .table-condensed class makes a table more compact by cutting cell
padding in half
• Contextual classes can be used to color table rows (<tr>) or table cells
(<td>)
• The .table-responsive class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on
anything larger than 768px wide, there is no difference
Tables
Mitesh Gandhi
Tables…
Demo – Tables
Mitesh Gandhi
Tables…
Demo – Tables Responsive
Mitesh Gandhi
8. 11/5/2015
8
• Bootstrap provides three types of form layouts:
– Vertical form (this is default)
– Horizontal form
– Inline form
• Individual form controls automatically receive some global styling.
• All textual <input>, <textarea>, and <select> elements with .form-
control are set to width: 100%; by default.
• Wrap labels and controls in .form-group for optimum spacing.
• Always use <form role="form"> (helps improve accessibility for people
using screen readers)
Forms
Mitesh Gandhi
Forms …
Demo – Forms
Mitesh Gandhi
• Bootstrap provides 7 styles of buttons
– Default, Primary, Success, Info, Warning, Danger and Link
• The button classes can be used on an <a>, <button>,
or <input> element
• Bootstrap provides four button sizes
– Large, Medium, Small and Extra Small
• Block level buttons – Spans the entire width of the
parent element
• Button can be set to an active or disabled state
Buttons
Mitesh Gandhi
Buttons …
Demo – Buttons
Mitesh Gandhi
9. 11/5/2015
9
• Images in Bootstrap 3 can be made responsive-
friendly via the addition of the .img-responsive class.
• The .img-responsive class applies display: block; and
max-width: 100%; and height: auto; to the image
• To center images which use the .img-responsive class,
use .center-block
• Images can be shaped with Rounded Corners, Circle
and Thumbnail.
Images
Mitesh Gandhi
Images …
Demo – Images
Mitesh Gandhi
• Close Icon
• Carets
• Float Left
• Float Right
• Clearfix
• Screen Readers Only
Helper Classes
Mitesh Gandhi
Helper Classes …
Demo – Helper Classes
Mitesh Gandhi
10. 11/5/2015
10
• For faster mobile-friendly development, use
these utility classes for showing and hiding
content by device via media query.
Responsive Utilities
Mitesh Gandhi
Responsive Utilities …
Responsive Utilities …
Mitesh Gandhi
Responsive Utilities …
Demo – Responsive Utilities
Mitesh Gandhi
11. 11/5/2015
11
• Over a dozen reusable components built to
provide iconography, dropdowns, input groups,
navigation, alerts, and much more.
Components
Mitesh Gandhi
• Includes over 250 glyphs in font format from the
Glyphicon Halflings set.
• Glyphicons Halflings are normally not available for
free, but their creator has made them available for
Bootstrap free of cost.
• Glyphicons can be used in text, buttons, toolbars,
navigation, forms, etc..
• <span class="glyphicon glyphicon-name"></span>
Components… Glyphicons
Mitesh Gandhi
Components… Glyphicons
Demo – Glyphicons
Mitesh Gandhi
• A lightweight, flexible component that can optionally extend
the entire viewport to showcase key content on your site.
• A jumbotron is displayed as a grey box with rounded
corners. It also enlarges the font sizes of the text inside it.
• Inside a jumbotron you can put nearly any valid HTML,
including other Bootstrap elements/classes.
• Use a <div> element with class .jumbotron to create a
jumbotron
Components… Jumbotron
Mitesh Gandhi
12. 11/5/2015
12
Components… Jumbotron
Demo – Jumbotron
Mitesh Gandhi
• A page header is like a section divider
• The .page-header class adds a horizontal line
under the heading (+ adds some extra space
around the element)
• Use a <div> element with class .page-header to
create a page header
Components… Page Header
Mitesh Gandhi
Components… Page Header
Demo – Page Header
Mitesh Gandhi
• Group a series of buttons together on a single line with the
button group.
• Use a <div> element with class .btn-group to create a
button group.
• Instead of applying button sizes to every button in a group,
use class .btn-group-* to size all buttons in the group.
• Use the class .btn-group-vertical to create a vertical button
group.
Components… Button Groups
Mitesh Gandhi
13. 11/5/2015
13
• Justified button groups make a group of buttons stretch at
equal sizes to span the entire width of its parent.
• Place a .btn-group within another .btn-group when you
want dropdown menus mixed with a series of buttons.
• Button toolbar combine sets of <div class="btn-
group"> into a <div class="btn-toolbar"> for more complex
components.
Components… Button Groups
Mitesh Gandhi
Components… Button Groups
Demo – Button Groups
Mitesh Gandhi
• Navs available in Bootstrap have shared markup,
starting with the base .nav class
• Tabs are created with <ul class="nav nav-tabs">
• Pills are created with <ul class="nav nav-pills">
• Pills are also vertically stackable. Just add .nav-
stacked.
Navs
Mitesh Gandhi
• Easily make tabs or pills equal widths of their
parent at screens wider than 768px with .nav-
justified. On smaller screens, the nav links are
stacked.
• For any nav component (tabs or pills),
add .disabled for gray links and no hover
effects
• Tabs and Pills can also hold dropdown menus
Navs …
Mitesh Gandhi
14. 11/5/2015
14
Navs…
Demo – Navs
Mitesh Gandhi
• Navbars are responsive meta components that
serve as navigation headers for your application
or site.
• With Bootstrap, a navigation bar can extend or
collapse, depending on the screen size.
• A standard navigation bar is created with <nav
class="navbar navbar-default">
Navbar
Mitesh Gandhi
• The navigation bar can also be fixed at the top or
at the bottom of the page.
• The .navbar-fixed-top class makes the navigation
bar fixed at the top.
• The .navbar-fixed-bottom class makes the
navigation bar stay at the bottom
• Create a full-width navbar that scrolls away with
the page by adding .navbar-static-top
Navbar …
Mitesh Gandhi
• Modify the look of the navbar by adding .navbar-
inverse.
• The .navbar-right class is used to right-align
navigation bar buttons.
• Place form content within .navbar-form for proper
vertical alignment and collapsed behavior in
narrow viewports.
Navbar …
Mitesh Gandhi
15. 11/5/2015
15
Navbar …
Demo – Navbar
Mitesh Gandhi
• JavaScript bring Bootstrap's components to life with
over a dozen custom jQuery plugins. Easily include
them all, or one by one.
• Plugins can be included individually using Bootstrap's
individual *.js files, or all at once using bootstrap.js or
the minified bootstrap.min.js.
• Some plugins and CSS components depend on other
plugins. If you include plugins individually, make sure
to check for dependencies in the docs.
JavaScript
Mitesh Gandhi
• All plugins depend on jQuery (this means jQuery must
be included before the plugin files)
JavaScript …
Mitesh Gandhi
• The Modal plugin is a dialog box/popup
window that is displayed on top of the
current page.
Modal (modal.js)
Mitesh Gandhi
16. 11/5/2015
16
Modal (modal.js) …
Demo – Modal
Mitesh Gandhi
• A dropdown menu is a toggleable
menu that allows the user to choose
one value from a predefined list.
Dropdown (dropdown.js)
Mitesh Gandhi
Dropdown (dropdown.js) …
Demo – Dropdowns
Mitesh Gandhi
• The ScrollSpy plugin is used to automatically update links
in a navigation list based on scroll position.
• ScrollSpy currently requires the use of a Bootstrap nav
component for proper highlighting of active links
• Navbar links must have resolvable id targets. For example,
a <a href="#home">home</a> must correspond to
something in the DOM like <div id="home"></div>.
• Target elements that are not :visible according to
jQuery will be ignored and their corresponding nav items
will never be highlighted.
ScrollSpy (scrollspy.js)
Mitesh Gandhi
17. 11/5/2015
17
• No matter the implementation method, ScrollSpy requires
the use of position: relative; on the element you're spying
on. In most cases this is the <body>. When ScrollSpying
on elements other than the <body>, be sure to have
a height set and overflow-y: scroll; applied.
ScrollSpy (scrollspy.js)…
Mitesh Gandhi
ScrollSpy (scrollspy.js)…
Demo – ScrollSpy
Mitesh Gandhi
• The Tooltip plugin is small pop-up box that appears when
the user moves the mouse pointer over an element.
• Inspired by the excellent jQuery.tipsy plugin written by
Jason Frame; Tooltips are an updated version, which don't
rely on images, use CSS3 for animations, and data-
attributes for local title storage.
• Tooltips with zero-length titles are never displayed.
• To create a tooltip, add the data-toggle="tooltip" attribute to
an element.
ToolTip (tooltip.js)
Mitesh Gandhi
• Use the title attribute to specify the text that should be
displayed inside the tooltip.
• Use the data-placement attribute to set the position of the
tooltip on top, bottom, left or the right side of the element.
• By default, the tooltip will appear on top of the element.
• For performance reasons, the Tooltip and Popover data-
apis are opt-in, meaning you must initialize them
yourself. select the specified element and call
the tooltip() method.
• One way to initialize all tooltips on a page would be to
select them by their data-toggle attribute.
ToolTip (tooltip.js) …
Mitesh Gandhi
18. 11/5/2015
18
ToolTip (tooltip.js) …
Demo – ToolTip
Mitesh Gandhi
• A slideshow component for cycling through elements, like
a carousel.
• Nested carousels are not supported.
• Carousels are not supported properly in Internet Explorer 9
and earlier because they use CSS3 transitions and
animations to achieve the slide effect.
Carousel (carousel.js)
Mitesh Gandhi
Carousel (carousel.js) …
Demo – Carousel
Mitesh Gandhi
• Download Bootstrap
http://getbootstrap.com
• Getting Started
http://getbootstrap.com/getting-started/
http://www.w3schools.com/bootstrap/default.asp
• Twitter
https://twitter.com/getbootstrap
• GitHub
https://github.com/twbs/bootstrap
• Docs
http://bootstrapdocs.com
References
Mitesh Gandhi
19. 11/5/2015
19
Thank You!
Introduction to Bootstrap..
Mitesh Gandhi
• Place holder for first level text
• More placeholder text and more
– Place holder for second level text
• Place holder for third level
• More placeholder third level text
Content Page
with Text and Table
Subtitle content page with text and table
COLUMN 1 COLUMN 2 COLUMN 3 COLUMN 4
Item One
Item Two
Item Three
Item Four
INFORMATION
TECHNOLOGY
