Bootstrap 5 Crash Course by David from MDBootstrap.com

Introduction

• Presenter: David, co-founder of MDbootstrap.com (Material Design and Bootstrap combined)
• Objective: Introduction to Bootstrap 5, its installation, setup, and components
• Bootstrap History
  • Started with Bootstrap 3 in 2015, migrated to Bootstrap 4, now Bootstrap 5
• Popularity:
  • Bootstrap used in 20% of the top million sites globally
  • 72% share in framework market according to BuiltWith
• Benefits of Bootstrap:
  • Increases development speed with pre-built components
  • Ensures responsiveness out-of-the-box
  • Consistency in projects by reusing code
  • Handles browser compatibility
  • Huge community support

Course Overview

1. What is Bootstrap?
2. Installation and setup
3. The grid system
4. Using different components
5. Building a webpage from scratch

What is Bootstrap?

• Most popular front-end framework globally
• Widely adopted for creating responsive web designs
• Provides a vast range of ready-to-use components

Installation and Setup

1. Download Method:

• Visit getbootstrap.com, download the compiled CSS and JS files
  • Extract and include them in your project
  • Link the CSS and JS files in your HTML (e.g., using Visual Studio Code)

2. CDN (Content Delivery Network):

• Add link and script tags directly from Bootstrap's CDN
  • Two options: Bundle JS (includes dependencies) or separate Popper and Bootstrap JS

3. NPM (Node Package Manager):

• Initialize a new NPM project (npm init)
  • Install Bootstrap using npm install bootstrap
  • Link the Bootstrap files in your HTML from node_modules

The Grid System

• Grid System Basics:

  • Bootstrap's grid system uses a series of containers, rows, and columns
  • A row can contain up to 12 units (columns), which can be sized differently across screen sizes

• Breakpoints:

  • Extra Small (XS): 0-576px
  • Small (SM): 576px-768px
  • Medium (MD): 768px-992px
  • Large (LG): 992px-1200px
  • Extra Large (XL): 1200px-1400px
  • Extra Extra Large (XXL): 1400px+

• Usage:

  • container or container-fluid for full-width layout
  • row for each row
  • Columns can be defined with classes like col-4 (4 units) or col-md-6 (6 units for MD screen sizes)

Components in Bootstrap

1. Buttons:

• Classes: btn, btn-primary, btn-outline, btn-lg, btn-sm, disabled
  • Example: <button class="btn btn-primary">Click Me</button>

2. Cards:

• Versatile component for displaying content such as images, text, and links
  • Classes: card, card-body, card-title, card-text
  • Examples: <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>

3. Typography:

• Responsive typography with classes for headings (h1, h2, etc.), display headings (display-1, display-2, etc.)
  • Inline text elements: <mark>, <del>, <s>, <u>, <small>, <strong>, <em>
  • Blockquotes with blockquote and blockquote-footer

4. Forms:

• Enhanced form controls with classes: form-control for inputs, form-select for dropdowns, form-floating for floating labels
  • Example: <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>

5. Navigation Bars:

• Responsive, collapsible navigation bars
  • Classes: navbar, navbar-brand, navbar-nav, nav-link
  • Example: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav>

Conclusion

• Bootstrap 5 simplifies the development of responsive, consistent, and feature-rich front-end designs
• Leveraging the vast library of components and utilities increases productivity and reduces development time
• Practical demonstration of leveraging Bootstrap to build a responsive website from scratch
• Publishing the website example using MDB tools

Additional Resources

• For further learning, delve into Bootstrap documentation and explore more advanced components like modals, carousels, and popovers.