An image showing Mike

Bootstrap Framework

Bootstrap Framework

What is Bootstrap?

  • Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
  • Created by Twitter
  • Has CSS styles built in but can be overridden
  • Uses the 12-column Grid System
  • Tons of Pre-built Components, like JumboTron, Carousel, etc.

Installation for a REACT APP

  • npm i [email protected]
  • Add import to index.js file 
    1import “bootstrap/dist/css/bootstrap.min.css”;

Adding Bootstrap Icons

  • Bootstrap 5 offers 1,300 free, high-quality SVG / web font icons that you can use on your project.
  • In order to install this on our React JS app, we need to install it via npm using the following command on our terminal:
  • 1npm i bootstrap-icons

About the 12 Grid System

  • Unlimited Rows
  • Specify column amount depeding on view size (x-small, small, medium, large, xlg)
  • Example class would be 
    1col-med-6
  • Containers, Rows and Columns make up the 12 grid system

Info sourced from Designmodo here Check out this Comprehensive CheatSheet here