Table of contents
  1. Bootstrap
  2. External Links
  3. Introduction
    1. New in Bootstrap 5?
    2. Ways to setup
      1. Include CDN
      2. Package managers - npm/yarn
  4. Layout Responsive
    1. Font Size Units
    2. Breakpoints
  5. UI Utilities
  6. CSS Components
  7. JS Widgets

Bootstrap

Open Source front-end framework for fast development.

External Links

Best way to learn Bootstrap is by practicing, reading official documentation and official examples.

Introduction

  • pre-made HTML/CSS teplates and classes
  • js widgets and plugins
  • mobile first responsive layout (no need to explicitly write media queries)

New in Bootstrap 5?

  • Grid system uses flex-box
  • rem and em units instead of pixels
  • moved from LESS to SASS (css precompiler)
  • glyphicons dropped - recommended font awesome icons

Ways to setup

  • Download and include file
  • Include CDN
  • Package managers - npm/yarn

Include CDN

CDN - content delivery network

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <!-- Icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Package managers - npm/yarn 

npm install bootstrap

Layout Responsive

Font Size Units

  • 1 rem - relevant to font size of html tag, usually 1 rem = 16 px
  • 1 em - relevant to parent div font size, if parent div has font size 20 px then 2 em = 40px

Breakpoints 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

UI Utilities

CSS Components

  • Forms and Input groups
  • Tables
  • List Groups
  • Cards
  • Progress Bars
  • Alerts
  • Navbar and Menus
  • Buttons and Buttons Groups
  • Pagination
  • Media Objects
  • Jumbotron
  • Badges

JS Widgets

  • Caraousel Slider
  • Collapsible accordion
  • Modals
  • Tooltips
  • Pop overs
  • Scrollspy