Aims - Expected outcomes- Key concepts - Instructions: Introduction to Bootstrap


The purpose of this module is to learn the basic concepts of Bootstrap, to understand how to use them and apply what you learned to start a Bootstrap project.

Expected outcomes

Upon completion of this module, you should know / should be able to:

Submodule 3.1: Front-end frameworks

    • identify the purpose of using front-end UI frameworks in web design and development
    • differentiate between CSS and JavaScript frameworks
    • describe what “responsive web design”,  "cross-browser compatibility"  and "mobile first design" are

Submodule 3.2: Getting Started with Bootstrap

    • download Bootstrap using NPM and include it in your project
    • set up a web project to use Bootstrap
    • apply the Bootstrap CSS and JS links into a web page
    • recognize the Bootstrap typography

Submodule 3.3: Applying CSS

    • use the Bootstrap grid system to design responsive websites
    • add your own custom CSS classes to a Bootstrap based web project
    • reorder Content using flex order
    • customize the CSS classes through your own additions in a separate CSS file
    • center the content both vertically and horizontally within a row
Key concepts
    • CSS links
    • Javascript links
    • Typography
    • Bootstrap grid

In order to complete this module, you have to:

  • Study the resources provided for the 3 submodules
  • Test your knowledge by answering the Practice set on this module’s content
  • Implement and submit the assignment on this module’s content
  • Reflect if the outcomes of this Module have been achieved
  • Give us feedback on this module’s content
  • Share your thoughts, comments and ideas  to the discussion forum

The estimated time to complete these activities is 3 hours

Last modified: Tuesday, 18 September 2018, 1:59 PM