BootStrap 4

Build responsive, mobile-first projects with the world's most popular front-end component library.

Learn more

Table of Content

  1. Setup Frameworks:
    • Download / Install Bootstrap
    • Download / Install jQuery
    • Download / Create Images
    • Create HTML Framework
    • Link CSS / JavaScript Files
  2. Setup NavBar:
    • Create Fixed Top NavBar
    • Create Elements For NavBar
    • Create Top Level Menus
    • Create Drop Down For Menu
    • Add Icons To Menus (OPTIONAL)
    • Add Color To Icons (OPTIONAL)
  3. Setup Header:
    • Create Jumbotron
  4. Setup Main Content:
    • Create A Responsive Grid (Theory)
    • Create Row 1 with 4 columns
    • Create Secondary Menu (OPTIONAL)
    • Create Row 2 with 2 columns (OPTIONAL)
  5. Setup Footer:
    • Create Fixed Bottom NavBar
    • Create Content For Foooter
    • Clear Footer

BONUSES: JS PLUG-INS

  • Basic:
    • Button / Alert
    • Tooltip / Popover
    • Collapsible / Accordion
    • Tab
    • Dropdown
  • Advanced:
    • Modal
    • TypeAhead
    • Affix (NavBar / Menu)
    • Scrollspy (NavBar / Menu)
    • Carousel

 

Why Use BootStrap

It is an easy-to-use free open source framework that is used to create responsive designs that automatically scale to look great on all devices (e.g., phones, tablets and desktops). It supports mobile first methodology and it is compatible with all modern browsers.

Quickly prototype or build an entire app with Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

While easy to implement, you will discover that Bootstrap used a lot of:

  • Classes (e.g., class = "nav navbar")
  • Attributes (e.g., data-toggle)
  • Div tags (e.g., <div>  <div>...</div>  </div>)
  • Containers (e.g., fixed and fluid)
  • Rows / Columns

Objective

In this tutorial, we will create a four column web site that will fill the screen horizontally (in columns) on a large screen but will convert to vertical (or stacked) on smaller screens.

Optional sections and steps can either be skipped altogether or done later.

Real Content

Once you have completed this tutorial, you can go back and replace the text, URLs, buttons, etc. with your own content.

  1. Select the text and replace it with your own real content.
  2. Change the dummy links (#) to real links to pages that you want them to go to.

    CAUTION: Do not add a URL to a drop down menu (e.g., Training).

  3. CHECK POINT: Save the file and preview it in a browser. You should see YOUR content displayed.
  4. Scale the page to see how it responds to different sizes.
  5. Create as many pages as you need.
  6. Make any necessary changes and test as you go.
  7. Enhance site with custom CSS styles.

Resource Links


 Images Used In Tutorial (Zip file)
Final Project (Zip file)
Final Project (Preview )