Bootstrap 5 From Scratch

Bootstrap 5 From Scratch - Build 5 Modern Websites

Instructor: Brad Traversy

• Pricing Cards

  This HTML demonstrates a modern, responsive pricing page built with the Bootstrap 5 framework. It showcases two subscription plans ("Free" and "Pro") in visually appealing cards.

  Core Purpose & Design 💲

  The goal is to present pricing options clearly. The "Pro" plan is intentionally styled with a dark background (text-bg-dark) to make it a high-contrast, featured option that draws the user's attention.

  Key Technologies & Features 🛠️

  • Responsive Grid: Uses Bootstrap's grid system (col-md-6) so the cards sit side-by-side on desktops but stack vertically on mobile devices.
  • Bootstrap Components: Relies on pre-styled Bootstrap components like card, button, and list-group for a polished look without custom CSS.
  • External Assets: Imports the "Poppins" font from Google Fonts for custom typography and uses Bootstrap Icons for the checkmarks.

• Ratings Component

  This code creates a comprehensive customer review and ratings summary component using Bootstrap 5 for layout and Font Awesome for icons. The entire element is contained within a single, styled Bootstrap card.

  Core Purpose & Design 📊

  The component's primary goal is to provide a clear, visual summary of product ratings. It effectively communicates both the overall average score and the detailed distribution of reviews across different star levels (1 to 5 stars).

  Key Features & Components 🛠️

  • Average Rating Display: A prominent card highlights the average score (e.g., 4.8) next to a star icon for quick visibility.
  • Visual Rating Breakdown: Uses Bootstrap's progress bar component to create horizontal bars, showing the percentage of reviews for each star rating.
  • Search Functionality: Includes a styled input-group that serves as a search bar for users to find specific reviews.
  • Call to Action: A large, green "Write Review" button encourages user engagement.

• User List

  This code demonstrates an interactive user directory or list page, built with a rich interface using Bootstrap 5. It includes features for searching, filtering, and viewing user profiles in a grid layout.

  Core Purpose & Design 👥

  The component is designed to display a collection of user profiles in a clean, card-based grid. Each card presents essential information like a profile picture, name, location, and interest tags. The header section provides tools for navigating and managing the list.

  Key Features & Components 🛠️

  • Interactive Header: Contains a search input, filter navigation links ("Reputation," "New Users," etc.), and a dark/light mode toggle.
  • Card-Based Grid: The user profiles are arranged in a responsive three-column grid that adapts to different screen sizes. Each profile uses a Bootstrap card component.
  • JavaScript Popovers: Each user card is enhanced with a Bootstrap popover, which is triggered on click to show additional information like an email address.
  • Dynamic Content: Profile images are loaded from the Random User Generator API, simulating how a real-world application would display dynamic data.