WebDevWorkshop2

What is Bootstrap?

Bootstrap is a free front-end framework for developing responsive websites. It includes HTML and CSS based design templates for items like forms, buttons, tables, modals, etc. as well as optional Javascript plugins.

Advantages of using Bootstrap:

Easy to use
Responsive features
"Mobile-first" approach
Compatibile with all modern browsers

How to include Bootstrap into your webpage

Download Bootstrap from www.getbootstrap.com

Include Bootstrap CDN(Content Delivery Network) in the header section of HTML file:

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
   
   <!-- jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
   
   <!-- Latest compiled JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Since Bootstrap is "mobile-first", you also need to include the following line of code into the header section...
```
  <meta name="viewport" content="width=device-width, initial-scale=1">
```
This will scale the webpage to fit the size of the screen of the device viewing it.

Fundamentals of Bootstrap

Main topics for this workshop

 - Grid Basics
 - Wells
 - Navbars
 - Modals

Will be following w3schools Bootstrap examples:

https://www.w3schools.com/bootstrap/default.asp

Templates

View templates for webpages, designed with Bootstrap: