Bootstrap Demo and Self-Paced Tutorial

Posted on by tchastkavich

Shape of the Day:

  • Basic Bootstrap Demo
  • Self-Paced Bootstrap Tutorial

Website of the Day:

https://christmasexperiments.com/ – These sites use web graphics library (WebGL) which is a JavaScript API (Application Programming Interface) that is used to bring 2D and 3D graphics to the web! It’s pretty sweet…

1. Basic Bootstrap Demo

  • Open Brackets and create a new webpage – call it bootstrap-demo.html
  • Create opening and closing html, head, title, and body tags.
  • Add the correct meta tag for viewport scaling
    • <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
  • Get Bootstrap’s CSS and JavaScript by copying/pasting the links from the Bootstrap Website – scroll down and find “Include via CDN” . Under the header CSS only, highlight the stylesheet reference code and paste this into your head tag of your code. If you would like to be adventurous, you can click on explore docs to see what code you can use to follow the CSS stylesheet made by Bootstrap or you can follow the steps below to understand how Bootstrap works.
  • Create a page container by adding the div tags with a class “container” right below the body tag.
  • Add rows by adding div tags with the class “row”
  • Add 3 columns by adding div tags with the class “col-sm” – label each column (column 1, column 2, column 3) using comments (remember these are HTML comments now!)
  • Now add a button inside each column using the button tag. Choose a button style from Bootstrap’s CSS website here: https://getbootstrap.com/docs/4.3/components/buttons/
  • Next, utilize Bootstrap’s JUMBOTRON (follow the link and follow the code)
  • Here’s a cheatsheet for Bootstrap’s features – https://hackerthemes.com/bootstrap-cheatsheet/
  • Here’s an even COOLER “buffet” where you can select components and have the code copied for you (how easy is that?!) – https://hackerthemes.com/bootstrap-themes/demo/default/

2. Self Paced Bootstrap Tutorial

  • Objective: To build an advanced webpage using Bootstrap’s features in order to become more familiar with how to utilize Bootstrap efficiently
  • Skills:
    • Reading Framework Documentation
    • Applying Framework Code/Features
    • Troubleshooting
    • Reading and Following Directions
  • Click here for the Full Tutorial