SlideShare a Scribd company logo
1 of 32
Download to read offline
Introduction to
Bootstrap
Ron Reiter
Agenda
1. Web development 101
2. Twitter Bootstrap
3. Resources
Web development 101
● HTML
○ Defines the data and structure of the page using elements
● CSS
○ Defines how the data and the elements actually look, and how they
behave when interacting with them
● JavaScript
○ The programming language of the web
How to start
You should remember this boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
Basic HTML elements
● Titles - <h1>...</h1> from h1 to h6
● Paragraph - <p>...</p>
● Simple block element - <div></div>
● Simple inline element - <span></span>
● Images - <img src=”...”/>
How to use CSS
● Inline CSS
○ <div style=”color: red”>This text is red</div>
● Style CSS tag
○ <div class=”red-color”>This text is red</div>
○ <style>
.red-color { color: red; }
</style>
● External CSS file (put in <head>)
○ <link rel=”stylesheet” href=”style.css”/>
Twitter Bootstrap
Twitter Bootstrap is a popular UI framework
http://getbootstrap.com/getting-started/
As of June 28, 2013, 1% of all websites are powered by
Twitter Bootstrap
Features
● CSS resetting for cross browser compatibility
● Grid scaffolding for design
● Multi-screen support (responsive design)
● “Mobile first”, like jQuery Mobile
● And a really good looking UI framework
Features (cont.)
● JavaScript plugins
○ Dialogs
○ Tabs
○ Alerts
○ Carousel
○ Tooltips
○ … and more.
Customization
1. You can customize the CSS yourself (not
recommended)
2. You can use LESS to compile a Bootstrap
CSS version on your own
3. You can just download a customized version
http://bootswatch.com/
How to add Twitter Bootstrap
You should use a CDN (content delivery network) for
loading resources.
http://www.bootstrapcdn.com/
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
scalable=no">
</head>
<body>
<!-- page content goes here -->
</body>
</html>
What are those lines?
We use a shared CDN because chances are that common
files are most likely already cached in the user’s computer.
1. The <link> tag loads the CSS - the actual bootstrap
styling. This is obviously the most important
2. The <script> tag loads additional JavaScript capabilities
of the Bootstrap framework
3. The <meta> tag is for smaller devices which have a
viewport, and it disables zooming so that the responsive
features of Bootstrap will kick in
The grid layout
12 column row
col-md-12
col-md-6 col-md-6
col-md-4 col-md-4 col-md-4
col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2
col-md-4 col-md-8
The grid (cont.)
How to write pages using a grid:
<!-- every row must have 12 columns -->
<div class=”row”>
<div class=”col-md-4”>
<!-- content -->
</div>
<!-- need to complete 8 more columns -->
</div>
The grid (cont.)
Bootstrap 3 features an always-responsive grid with a
maximum size:
1. col-xs-[num] grids have no maximum size (fluid)
2. col-sm-[num] grids resize up to 750px
3. col-md-[num] grids resize up to 970px
4. col-lg-[num] grids resize up to 1170px
You should choose col-md or col-lg for desktop sites.
The grid (cont.)
You can also use two grid sizes for different
screen sizes:
<div class=”row”>
<div class=”col-md-4 col-xs-6”>
<!-- content -->
</div>
<div class=”col-md-8 col-xs-6”>
<!-- content -->
</div>
</div>
Tables
<table class=”table”>
<thead>
<th><td>Name</td><td>Age</td></th>
</thead>
<tbody>
<tr><td>Alice</td><td>20</td></tr>
<tr><td>Bob</td><td>25</td></tr>
</tbody>
</table>
Forms
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="
exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="
exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Buttons can either be button elements, links or
input elements. They will all look like buttons.
● For simple links, use the <a> element and
add button styling if needed.
● For forms or dynamic buttons, use the button
element.
<button class="btn btn-primary">Primary</button>
<a href=”btn btn-primary”>Primary</a>
<input type=”submit class=”btn btn-primary”/>
Buttons
Bootstrap elements
● Dropdowns
● Tabs
● Pills
● Navbars
● Alerts
● Lists
Check out the Bootstrap reference for more:
http://getbootstrap.com/components/
Font icons
To insert a user icon to a button, use the
following syntax inline with any text:
<span class="glyphicon glyphicon-user"></span>
For example, for a button with a star:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Icon resources
● Glyphicons - Comes with bootstrap
● Font Awesome - Recommended
○ http://fortawesome.github.io/Font-Awesome/
● Fontello - Customize your font package
○ http://fontello.com/
● Free icons - many of them over the internet
○ http://www.pixeden.com/media-icons/flat-design-
icons-set-vol1
● Commercial icons - Shutterstock,
istockphoto, etc.
Resources
Wrap Bootstrap
http://wrapbootstrap.com
Bootswatch
http://bootswatch.com/
Start Bootstrap
http://startbootstrap.com/
LESS
http://lesscss.org/
Font Awesome
http://fortawesome.github.io/Font-Awesome/
Fontello
http://fontello.com/
PlaceIt by Breezi
http://placeit.breezi.com/
Exercise
● Design a page with the following layout
Navigation bar
Big heading
Feature Icon Feature Icon Feature Icon
Feature text Feature text Feature text
Footer
Thank You!

More Related Content

What's hot

Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 

What's hot (20)

Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Flexbox
FlexboxFlexbox
Flexbox
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
Css3
Css3Css3
Css3
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
CSS
CSSCSS
CSS
 

Viewers also liked

Viewers also liked (11)

Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)
 
Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)Sitio web (boostrap carrusel de imagenes)
Sitio web (boostrap carrusel de imagenes)
 
Sentencia SQL INSERT
Sentencia SQL INSERTSentencia SQL INSERT
Sentencia SQL INSERT
 
Consulta sql de tabla computador en mysql
Consulta sql de tabla computador en mysqlConsulta sql de tabla computador en mysql
Consulta sql de tabla computador en mysql
 
Guia BD conexión Mysql con Java usando Netbeans
Guia BD conexión Mysql con Java usando NetbeansGuia BD conexión Mysql con Java usando Netbeans
Guia BD conexión Mysql con Java usando Netbeans
 
Sentencias SQL Update y Delete
Sentencias SQL Update y DeleteSentencias SQL Update y Delete
Sentencias SQL Update y Delete
 
GUI Salario en java con NetBeans
GUI Salario en java con NetBeansGUI Salario en java con NetBeans
GUI Salario en java con NetBeans
 
Introduction To Bootstrap
Introduction To Bootstrap Introduction To Bootstrap
Introduction To Bootstrap
 
Bootstrap responsive design
Bootstrap responsive designBootstrap responsive design
Bootstrap responsive design
 
Taller
TallerTaller
Taller
 
Web Development on Web Project Report
Web Development on Web Project ReportWeb Development on Web Project Report
Web Development on Web Project Report
 

Similar to Introduction to Bootstrap

Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
Maria S Rivera
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
Jayson Cortez
 

Similar to Introduction to Bootstrap (20)

Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
 
Lecture-11.pptx
Lecture-11.pptxLecture-11.pptx
Lecture-11.pptx
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3
 
HTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al BasetHTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al Baset
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
Html
HtmlHtml
Html
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 

More from Ron Reiter

Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome Extensions
Ron Reiter
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
Ron Reiter
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
Ron Reiter
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)
Ron Reiter
 

More from Ron Reiter (11)

Securing your Bitcoin wallet
Securing your Bitcoin walletSecuring your Bitcoin wallet
Securing your Bitcoin wallet
 
Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitBrogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and Git
 
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile Workshop
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Mobile Spaces
Mobile SpacesMobile Spaces
Mobile Spaces
 
Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome Extensions
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 

Recently uploaded

Recently uploaded (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

Introduction to Bootstrap

  • 2. Agenda 1. Web development 101 2. Twitter Bootstrap 3. Resources
  • 3. Web development 101 ● HTML ○ Defines the data and structure of the page using elements ● CSS ○ Defines how the data and the elements actually look, and how they behave when interacting with them ● JavaScript ○ The programming language of the web
  • 4. How to start You should remember this boilerplate code: <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <!-- page content goes here --> </body> </html>
  • 5. Basic HTML elements ● Titles - <h1>...</h1> from h1 to h6 ● Paragraph - <p>...</p> ● Simple block element - <div></div> ● Simple inline element - <span></span> ● Images - <img src=”...”/>
  • 6. How to use CSS ● Inline CSS ○ <div style=”color: red”>This text is red</div> ● Style CSS tag ○ <div class=”red-color”>This text is red</div> ○ <style> .red-color { color: red; } </style> ● External CSS file (put in <head>) ○ <link rel=”stylesheet” href=”style.css”/>
  • 7. Twitter Bootstrap Twitter Bootstrap is a popular UI framework http://getbootstrap.com/getting-started/ As of June 28, 2013, 1% of all websites are powered by Twitter Bootstrap
  • 8. Features ● CSS resetting for cross browser compatibility ● Grid scaffolding for design ● Multi-screen support (responsive design) ● “Mobile first”, like jQuery Mobile ● And a really good looking UI framework
  • 9. Features (cont.) ● JavaScript plugins ○ Dialogs ○ Tabs ○ Alerts ○ Carousel ○ Tooltips ○ … and more.
  • 10. Customization 1. You can customize the CSS yourself (not recommended) 2. You can use LESS to compile a Bootstrap CSS version on your own 3. You can just download a customized version http://bootswatch.com/
  • 11. How to add Twitter Bootstrap You should use a CDN (content delivery network) for loading resources. http://www.bootstrapcdn.com/ <!DOCTYPE html> <html> <head> <title>Page title</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable=no"> </head> <body> <!-- page content goes here --> </body> </html>
  • 12. What are those lines? We use a shared CDN because chances are that common files are most likely already cached in the user’s computer. 1. The <link> tag loads the CSS - the actual bootstrap styling. This is obviously the most important 2. The <script> tag loads additional JavaScript capabilities of the Bootstrap framework 3. The <meta> tag is for smaller devices which have a viewport, and it disables zooming so that the responsive features of Bootstrap will kick in
  • 13. The grid layout 12 column row col-md-12 col-md-6 col-md-6 col-md-4 col-md-4 col-md-4 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-4 col-md-8
  • 14. The grid (cont.) How to write pages using a grid: <!-- every row must have 12 columns --> <div class=”row”> <div class=”col-md-4”> <!-- content --> </div> <!-- need to complete 8 more columns --> </div>
  • 15. The grid (cont.) Bootstrap 3 features an always-responsive grid with a maximum size: 1. col-xs-[num] grids have no maximum size (fluid) 2. col-sm-[num] grids resize up to 750px 3. col-md-[num] grids resize up to 970px 4. col-lg-[num] grids resize up to 1170px You should choose col-md or col-lg for desktop sites.
  • 16. The grid (cont.) You can also use two grid sizes for different screen sizes: <div class=”row”> <div class=”col-md-4 col-xs-6”> <!-- content --> </div> <div class=”col-md-8 col-xs-6”> <!-- content --> </div> </div>
  • 18. Forms <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id=" exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id=" exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
  • 19. Buttons can either be button elements, links or input elements. They will all look like buttons. ● For simple links, use the <a> element and add button styling if needed. ● For forms or dynamic buttons, use the button element. <button class="btn btn-primary">Primary</button> <a href=”btn btn-primary”>Primary</a> <input type=”submit class=”btn btn-primary”/> Buttons
  • 20. Bootstrap elements ● Dropdowns ● Tabs ● Pills ● Navbars ● Alerts ● Lists Check out the Bootstrap reference for more: http://getbootstrap.com/components/
  • 21. Font icons To insert a user icon to a button, use the following syntax inline with any text: <span class="glyphicon glyphicon-user"></span> For example, for a button with a star: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>
  • 22. Icon resources ● Glyphicons - Comes with bootstrap ● Font Awesome - Recommended ○ http://fortawesome.github.io/Font-Awesome/ ● Fontello - Customize your font package ○ http://fontello.com/ ● Free icons - many of them over the internet ○ http://www.pixeden.com/media-icons/flat-design- icons-set-vol1 ● Commercial icons - Shutterstock, istockphoto, etc.
  • 31. Exercise ● Design a page with the following layout Navigation bar Big heading Feature Icon Feature Icon Feature Icon Feature text Feature text Feature text Footer