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:

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