Front-end web development
Responsive interfaces with Bootstrap 5
Quickly assemble polished, adaptive interfaces with the most widely used CSS framework.
- Duration
- 14 h · 2 days
- Level
- Beginner
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program shows how to build adaptive sites with Bootstrap 5: grid system, ready-to-use components, theme customization with Sass and accessibility. Participants learn to save time without sacrificing quality, then to customize the framework so their site doesn't look like everyone else's.
Who this program is for
- Beginner or intermediate front-end web developers
- Integrators and web designers
- Teams wanting to speed up interface production
Prerequisites
- Knowledge of HTML and CSS
- Notions of website structure
Learning objectives
- Set up Bootstrap in a project
- Compose layouts with the grid and utilities
- Use components: navbars, cards, alerts, carousels, modals
- Customize colors and variables with Sass
- Follow accessibility best practices
- Enable interactive components with JavaScript
Detailed curriculum
4 modules · 14 h · 2 days
Day 1
Getting started and the grid
30% theory · 70% practice
- Role of Bootstrap and alternatives
- Installing Bootstrap: CDN or package manager
- Containers, rows, columns and breakpoints
- Spacing, display and text utilities
- Typography, images and tables
🛠 Hands-on workshops
Home page in a grid1.5 h
Build a site's home page with the Bootstrap grid.
✅ Deliverable : A complete responsive page
Interface components
30% theory · 70% practice
- Navbar and adaptive menu
- Buttons, cards, lists and badges
- Forms and visual validation
- Alerts, modals and tooltips
- Carousels and accordions
🛠 Hands-on workshops
Component catalog1.5 h
Assemble several components for a product page.
✅ Deliverable : A page with navigation, cards and a form
Day 2
Customization with Sass
30% theory · 70% practice
- Structure of Bootstrap's source files
- Overriding variables: colors, fonts, radii
- Generating a custom theme
- Dark mode and color variants
- Building and optimizing the final CSS
🛠 Hands-on workshops
In-house theme1.5 h
Create a theme in a brand's colors.
✅ Deliverable : A compiled Sass theme
Accessibility, JavaScript and going to production
30% theory · 70% practice
- ARIA roles and keyboard navigation in components
- Contrast and compliance with common standards
- Bootstrap's JavaScript API
- Listening to component events
- Tools, icons and deployment best practices
🛠 Hands-on workshops
Final showcase site2 h
Finalize a four-page site with theme, components and accessibility checks.
✅ Deliverable : A showcase site ready to publish
Tools and technologies
BootstrapCSS3HTML5Visual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and a recent browser
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- A responsive showcase site built on Bootstrap
- A reusable custom theme
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
