BOOTSTRAP BASICS
Learn the fundamental concepts of Bootstrap framework
Beginner
Module 1: Bootstrap Introduction and Setup
Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. It includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other components.
Try It Yourself:
Key Points:
- Bootstrap is a CSS framework for building responsive websites
- Use
containerorcontainer-fluidfor layout structure - Grid System uses rows and columns for responsive layouts
- Components like cards, buttons, and alerts are pre-styled
- Utility Classes provide quick styling for margins, padding, colors, etc.
- Bootstrap uses a mobile-first approach to design
- Customize Bootstrap with CSS variables or SASS
GRID SYSTEM
Master Bootstrap's responsive grid layout
Beginner
Module 2: Bootstrap Grid System
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. The grid system uses 12 columns that can be combined to create different layouts.
Try It Yourself:
Key Points:
- Containers provide a means to center and horizontally pad your site's contents
- Rows are wrappers for columns and ensure proper alignment
- Columns are the building blocks of the grid system
- Bootstrap uses a 12-column system for layout
- Breakpoints define how the layout behaves at different screen sizes:
xs(default): <576pxsm: ≥576pxmd: ≥768pxlg: ≥992pxxl: ≥1200pxxxl: ≥1400px
- Use
col-{breakpoint}-{number}to define column width at specific breakpoints - Grids can be nested inside other grid columns
COMPONENTS
Explore Bootstrap's pre-built UI components
Beginner
Module 3: Bootstrap Components
Bootstrap comes with dozens of components that are ready to use. These include buttons, cards, forms, modals, navbars, and much more. Components are built with consistent design patterns that work across devices and screen sizes.
Try It Yourself:
Key Points:
- Buttons come in multiple styles and sizes with various states
- Cards are flexible content containers with multiple variants
- Alerts provide contextual feedback messages
- Badges are small count and labeling components
- Progress Bars show the completion percentage of a task
- Components are highly customizable with utility classes
- All components are accessible and follow best practices
- Components can be combined to create complex interfaces
UTILITIES
Master Bootstrap's utility classes for rapid styling
Intermediate
Module 4: Bootstrap Utility Classes
Bootstrap includes dozens of utility classes for showing, hiding, aligning, spacing, and styling content. These utility classes help you build custom layouts without writing any custom CSS.
Try It Yourself:
Key Points:
- Spacing utilities control margin and padding (m-*, p-*)
- Text utilities control alignment, weight, and color (text-*, fw-*)
- Display utilities control the display property (d-*)
- Flex utilities control flexbox properties (d-flex, justify-*, align-*)
- Border utilities add or remove borders (border, border-*)
- Responsive utilities apply styles at specific breakpoints (d-md-*)
- Utilities follow a consistent naming pattern: property-side-size
- Most utilities are responsive and can be combined with breakpoint prefixes
CUSTOMIZATION
Learn to customize Bootstrap for your brand
Intermediate
Module 5: Customizing Bootstrap
Bootstrap can be customized to match your brand's identity. You can override default variables, use SASS to create custom builds, or simply add your own CSS to extend Bootstrap's styles.
Try It Yourself:
Key Points:
- Use CSS custom properties (variables) for consistent theming
- Override Bootstrap's default variables to change the global theme
- Create custom utility classes for repeated styles
- Use SASS for more advanced customization and theming
- Create custom components by extending Bootstrap's base classes
- Use
!importantsparingly and only when necessary - Load your custom CSS after Bootstrap to ensure overrides work
- Test customizations across different devices and browsers
ADVANCED FEATURES
Explore Bootstrap's advanced components and features
Intermediate
Module 6: Bootstrap Advanced Features
Bootstrap offers advanced components and features for building complex interfaces. These include modals, carousels, navbars, forms, and JavaScript plugins that add interactivity to your website.
Try It Yourself:
Key Points:
- Modals are dialog boxes that appear on top of the page content
- Carousels are slideshows for cycling through elements
- Accordions are vertically collapsing elements to show and hide content
- Forms include styled form controls, layout options, and custom components
- Bootstrap's JavaScript plugins require proper initialization
- Components can be customized with data attributes or JavaScript
- All interactive components are accessible and keyboard-navigable
- Bootstrap provides utility APIs for extending functionality
PRACTICE PLAYGROUND
Experiment with Bootstrap styling
Your Bootstrap Playground: Build Your Creations
Use this space to experiment with Bootstrap! Try different components, utilities, and layouts. Create beautiful responsive designs and see the results in real-time.
Bootstrap Challenge Exercises:
- Create a responsive navigation menu with a Bootstrap navbar
- Build a pricing table using Bootstrap cards and grid system
- Style a contact form with Bootstrap form components and validation
- Create a responsive image gallery using Bootstrap grid and cards
- Build a dashboard layout with sidebar, header, and main content area
Bootstrap Features to Experiment With:
- Layout: Containers, grid system, breakpoints
- Components: Buttons, cards, navbars, modals, carousels
- Utilities: Spacing, colors, typography, flexbox, display
- Forms: Form controls, validation, layout options
- JavaScript: Interactive components and plugins
- Customization: CSS variables, SASS, theme creation