Bootstrap 5 From Scratch

Bootstrap 5 From Scratch - Build 5 Modern Websites

Instructor: Brad Traversy

• Containers
  Demonstrates Bootstrap container layouts and responsive behavior.

  Learn about Bootstrap’s container classes, including fixed-width and fluid containers. See how containers help structure your page and make layouts responsive across different devices.

• Typography
  Shows Bootstrap typography utilities and styles.

  Explore Bootstrap’s typography utilities, including headings, paragraphs, lead text, and text alignment. Understand how to style and organize textual content for readability and emphasis.

• Display Position
  Explains display and position classes for layout control.

  Discover display and position utility classes that control element visibility, positioning, and layout. Includes examples of hiding, showing, and positioning elements using Bootstrap.

• Background Text Colors
  Demonstrates background and text color utilities.

  See how to use Bootstrap’s background and text color utilities to highlight content, create contrast, and improve accessibility. Includes examples of contextual color classes.

• Spacing
  Shows margin and padding utilities for spacing elements.

  Understand margin and padding utilities for controlling spacing between elements. Learn how to use responsive spacing classes to adjust layouts for different screen sizes.

• Sizing Borders Shadows
  Covers sizing, border, and shadow utilities.

  Explore sizing utilities for width and height, border styles for emphasis, and shadow effects for depth. See how these utilities enhance the visual hierarchy of your components.

• Breakpoints
  Explains responsive breakpoints and media queries.

  Learn about Bootstrap’s responsive breakpoints and how to use them to create layouts that adapt to different devices. Includes examples of breakpoint-specific classes and media queries.

• Buttons
  Demonstrates Bootstrap button styles and options.

  Discover the variety of button styles, sizes, and states available in Bootstrap. Learn how to customize buttons for different actions and integrate icons or loading indicators.

• Navbar
  Shows how to create and customize navbars.

  See how to build responsive navigation bars using Bootstrap’s navbar component. Includes examples of branding, navigation links, dropdowns, and mobile-friendly toggles.

• Bootstrap Grid Columns
  Explains the grid system and column layouts.

  Dive into Bootstrap’s grid system, including rows, columns, and nesting. Learn how to create complex, responsive layouts using grid classes and breakpoint modifiers.

• Flexbox
  Demonstrates flexbox utilities for flexible layouts.

  Explore Bootstrap’s flexbox utilities for flexible and dynamic layouts. See how to align, justify, and order elements using flexbox classes for modern web design.

• Cards
  Shows how to use Bootstrap card components.

  Learn to use Bootstrap’s card component for displaying content in a structured and visually appealing way. Includes examples of card headers, footers, images, and layout options.

• List Group Badges
  Demonstrates list groups and badge components.

  Discover how to organize content with list groups and highlight items using badges. See examples of interactive lists, contextual classes, and badge styling.

• Forms Input
  Shows form controls and input styling.

  Explore Bootstrap’s form controls, including input fields, selects, checkboxes, and radios. Learn how to style forms for usability and accessibility.

• Form Validation Display
  Explains form validation and feedback display.

  See how to implement client-side form validation with Bootstrap. Learn to display validation feedback, error messages, and success indicators for user input.

• Alerts Progress Bars
  Demonstrates alert and progress bar components.

  Learn to use alert components for notifications and progress bars for indicating task completion. Includes customization options and accessibility tips.

• Tables
  Shows Bootstrap table styles and options.

  Discover Bootstrap’s table styles for displaying tabular data. Learn about striped, bordered, hoverable, and responsive tables, plus table customization.

• Breadcrumb Pagination
  Explains breadcrumb navigation and pagination controls.

  Explore navigation aids like breadcrumbs for showing page hierarchy and pagination for navigating through multiple pages of content.

• Other CSS Utilities
  Covers miscellaneous Bootstrap CSS utilities.

  Learn about additional Bootstrap utilities for alignment, overflow, visibility, and more. See how these utilities help fine-tune your layouts and components.

• Darkmode and Variables
  Demonstrates dark mode and CSS variables usage.

  Discover how to implement dark mode using Bootstrap’s CSS variables and custom properties. Learn to switch themes dynamically and maintain accessibility.

• Dropdowns
  Shows dropdown menu components and options.

  See how to create interactive dropdown menus for navigation and actions. Includes examples of single and multi-level dropdowns, and accessibility considerations.

• Accordion Collapse
  Demonstrates accordion and collapse components.

  Learn to use accordion and collapse components for organizing content in expandable sections. See how to control visibility and animate transitions.

• Carousel
  Shows how to use the carousel component.

  Explore the carousel component for creating image sliders and rotating content. Learn about controls, indicators, and customization options.

• Toasts
  Demonstrates toast notifications.

  Discover toast notifications for lightweight, unobtrusive messages. Learn to trigger, position, and style toasts for user feedback.

• Spinners
  Shows spinner components for loading states.

  See how to use spinner components to indicate loading states. Learn about different spinner styles, sizes, and accessibility features.

• Modals
  Demonstrates modal dialog components.

  Learn to create modal dialogs for user interactions, forms, and alerts. Includes examples of modal triggers, content, and accessibility best practices.

• Popovers Tooltips
  Shows popover and tooltip components.

  Explore popover and tooltip components for displaying contextual information. Learn to customize placement, triggers, and content.

• Darkmode Toggle
  Demonstrates a dark mode toggle feature.

  See how to implement a dark mode toggle button using Bootstrap and JavaScript. Learn to persist user preferences and update the UI dynamically.