Bootstrap icon
Brief introduction
In this tutorial, you will learn how to use the Bootstrap 2.0 toolkit to create an icon. Bootstrap icon by Glyphicons. If you use these icons in your project, be sure to provide Glyphicons links.
Used as a CSS Sprite
All icon images are tied together, and by background-position CSS property use. The image file is glyphicons-halflings.png, located Bootstrap main folder img folder. Style icon and background position is defined in bootstrap.css line number in 1168-1544. Please note that in order to avoid conflicts, all the icons are in class "icon-" as a prefix. Bootstrap 2.0 defines the 120 icon class.
How to use the icons on your own site or app in
Here is an icon in the site or app in general syntax:
<I class = "icon_class_name"> </ i>
Wherein "icon_class_name" is the name of the icon in bootstrap.css defined class (for example: icon-music, icon-star , icon-user , etc.).
If you want to use the white icon, and then add an additional icon-white class, as follows:
<I class = "icon_class_name icon-white"> </ i> </ i>
If you want to bring some string in the use of icons, remember to add some space after. Icon or some navigation links may occur in this case to use in the button.
Example: a search form
Examples
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Example Bootstrap version 2.0 of the Search icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example of using icons in search form - Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
form {
margin-top: 50px;
}
</ Style>
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span12">
<Form class = "well form-search">
<Input type = "text" class = "input-medium search-query">
<Button type = "submit" class = "btn"> <i class = "icon-search"> </ i> Search </ button>
</ Form>
</ Div>
</ Div>
<Footer>
<P> & copy; Company 2013 </ p>
</ Footer>
</ Div>
</ Body>
</ Html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Example Bootstrap version 2.0 of the Search icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example of using icons in search form - Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
form {
margin-top: 50px;
}
</ Style>
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span12">
<Form class = "well form-search">
<Input type = "text" class = "input-medium search-query">
<Button type = "submit" class = "btn"> <i class = "icon-search"> </ i> Search </ button>
</ Form>
</ Div>
</ Div>
<Footer>
<P> & copy; Company 2013 </ p>
</ Footer>
</ Div>
</ Body>
</ Html>
View Online
See examples above in a different browser window.
Example: Using icons in navigation
Examples
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap version 2.0 uses in navigation icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example icons in navigation with Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "navbar navbar-fixed-top">
<Div class = "navbar-inner">
<Div class = "container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</a>
<a class="brand" href="#"> w3big </a>
<Div class = "nav-collapse">
<Ul class = "nav">
<Li class = "active"> <a href="#"> <i class = "icon-user icon-white"> </ i> Home </a> </ li>
<Li> <a href="#about"> <i class = "icon-user icon-white"> </ i> User </a> </ li>
<Li> <a href="#about"> <i class = "icon-download icon-white"> </ i> Downlaod </a> </ li>
<Li> <a href="#about"> <i class = "icon-upload icon-white"> </ i> Upload </a> </ li>
<Li> <a href="#about"> <i class = "icon-play-circle icon-white"> </ i> Play Circle </a> </ li>
<Li> <a href="#about"> <i class = "icon-bookmark icon-white"> </ i> Bookmark </a> </ li>
<Li> <a href="#about"> <i class = "icon-gift icon-white"> </ i> Gift </a> </ li>
</ Ul>
</ Div> <-!. / Nav-collapse ->
</ Div>
</ Div>
</ Div>
<Hr>
</ Div> <-! / Container ->
<-! Le javascript
================================================== ->
<! - Placed in the bottom of the document pages load faster ->
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-transition.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-alert.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-modal.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-scrollspy.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tab.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tooltip.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-popover.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-button.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-collapse.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
</ Body>
</ Html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap version 2.0 uses in navigation icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example icons in navigation with Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "navbar navbar-fixed-top">
<Div class = "navbar-inner">
<Div class = "container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</a>
<a class="brand" href="#"> w3big </a>
<Div class = "nav-collapse">
<Ul class = "nav">
<Li class = "active"> <a href="#"> <i class = "icon-user icon-white"> </ i> Home </a> </ li>
<Li> <a href="#about"> <i class = "icon-user icon-white"> </ i> User </a> </ li>
<Li> <a href="#about"> <i class = "icon-download icon-white"> </ i> Downlaod </a> </ li>
<Li> <a href="#about"> <i class = "icon-upload icon-white"> </ i> Upload </a> </ li>
<Li> <a href="#about"> <i class = "icon-play-circle icon-white"> </ i> Play Circle </a> </ li>
<Li> <a href="#about"> <i class = "icon-bookmark icon-white"> </ i> Bookmark </a> </ li>
<Li> <a href="#about"> <i class = "icon-gift icon-white"> </ i> Gift </a> </ li>
</ Ul>
</ Div> <-!. / Nav-collapse ->
</ Div>
</ Div>
</ Div>
<Hr>
</ Div> <-! / Container ->
<-! Le javascript
================================================== ->
<! - Placed in the bottom of the document pages load faster ->
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-transition.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-alert.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-modal.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-scrollspy.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tab.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tooltip.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-popover.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-button.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-collapse.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
</ Body>
</ Html>
View Online
See examples above in a different browser window.
Example: Using icons and buttons group
Examples
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap version 2.0 using the button and button set icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example of using icons in buttons and button groups - Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
form {
margin-top: 50px;
}
</ Style>
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span4">
<Div class = "btn-toolbar" style = "margin-bottom: 9px">
<Div class = "btn-group">
<a class="btn" href="#"> <i class = "icon-align-left"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-center"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-right"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-justify"> </ i> </a>
</ Div>
<Div class = "btn-group">
<a class="btn btn-primary" href="#"> <i class = "icon-user icon-white"> </ i> User </a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class = "caret"> </ span> </a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> <i class = "icon-pencil"> </ i> Edit </a> </ li>
<Li> <a href="#"> <i class = "icon-trash"> </ i> Delete </a> </ li>
<Li> <a href="#"> <i class = "icon-ban-circle"> </ i> Ban </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> <i class = "i"> </ i> Make admin </a> </ li>
</ Ul>
</ Div>
</ Div>
<P>
<a class="btn" href="#"> <i class = "icon-refresh"> </ i> Refresh </a>
<a class="btn btn-success" href="#"> <i class = "icon-shopping-cart icon-white"> </ i> Checkout </a>
<a class="btn btn-danger" href="#"> <i class = "icon-trash icon-white"> </ i> Delete </a>
</ P>
<P>
<a class="btn btn-large" href="#"> <i class = "icon-comment"> </ i> Comment </a>
<a class="btn btn-small" href="#"> <i class = "icon-cog"> </ i> Settings </a>
<a class="btn btn-small btn-info" href="#"> <i class = "icon-info-sign icon-white"> </ i> More Info </a>
</ P>
</ Div>
</ Div>
</ Div>
<-! Le javascript
================================================== ->
<! - Placed in the bottom of the document pages load faster ->
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-transition.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-alert.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-modal.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-scrollspy.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tab.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tooltip.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-popover.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-button.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-collapse.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
</ Body>
</ Html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap version 2.0 using the button and button set icon </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Meta name = "description" content = "Example of using icons in buttons and button groups - Bootstrap version 2.0 from w3cschool.cc">
<Meta name = "author" content = "">
<-! Le styles ->
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
form {
margin-top: 50px;
}
</ Style>
<-! Le HTML5 shim, for IE6-8 support of HTML5 elements ->
<-! [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->
<-! Le fav and touch icons ->
<Link rel = "shortcut icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / favicon.ico">
<Link rel = "apple-touch-icon" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon.png">
<Link rel = "apple-touch-icon" sizes = "72x72" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-72x72.png">
<Link rel = "apple-touch-icon" sizes = "114x114" href = "../ bootstrap / twitter-bootstrap-v2 / docs / examples / images / apple-touch-icon-114x114.png">
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span4">
<Div class = "btn-toolbar" style = "margin-bottom: 9px">
<Div class = "btn-group">
<a class="btn" href="#"> <i class = "icon-align-left"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-center"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-right"> </ i> </a>
<a class="btn" href="#"> <i class = "icon-align-justify"> </ i> </a>
</ Div>
<Div class = "btn-group">
<a class="btn btn-primary" href="#"> <i class = "icon-user icon-white"> </ i> User </a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class = "caret"> </ span> </a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> <i class = "icon-pencil"> </ i> Edit </a> </ li>
<Li> <a href="#"> <i class = "icon-trash"> </ i> Delete </a> </ li>
<Li> <a href="#"> <i class = "icon-ban-circle"> </ i> Ban </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> <i class = "i"> </ i> Make admin </a> </ li>
</ Ul>
</ Div>
</ Div>
<P>
<a class="btn" href="#"> <i class = "icon-refresh"> </ i> Refresh </a>
<a class="btn btn-success" href="#"> <i class = "icon-shopping-cart icon-white"> </ i> Checkout </a>
<a class="btn btn-danger" href="#"> <i class = "icon-trash icon-white"> </ i> Delete </a>
</ P>
<P>
<a class="btn btn-large" href="#"> <i class = "icon-comment"> </ i> Comment </a>
<a class="btn btn-small" href="#"> <i class = "icon-cog"> </ i> Settings </a>
<a class="btn btn-small btn-info" href="#"> <i class = "icon-info-sign icon-white"> </ i> More Info </a>
</ P>
</ Div>
</ Div>
</ Div>
<-! Le javascript
================================================== ->
<! - Placed in the bottom of the document pages load faster ->
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-transition.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-alert.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-modal.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-scrollspy.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tab.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tooltip.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-popover.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-button.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-collapse.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
</ Body>
</ Html>
View Online
See examples above in a different browser window.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.