Course : Bootstrap 5, developing responsive web pages
Practical course - 2d
- 14h00 - Ref. BTP
|
Download in PDF format
Share this course by email
 | Integrating Bootstrap 5 into a web project |
| Create web pages that reflect the aesthetic codes of today's sites |
| Master the components and plug-ins of the Bootstrap 5 framework |
| Developing responsive websites |
Intended audience
Webmaster, developer, integrator.
Prerequisites
Knowledge of HTML and CSS, and notions of JavaScript.
Practical details
Hands-on work
Creation of a back office administrator interface with Bootstrap 5. Creating a responsive website from a Bootstrap 5 template.
Teaching methods
Half of the course is lecture-based, the other half hands-on.
Course schedule
1 Framework presentation
- Overview of Bootstrap 5 and other frameworks.
- Bootstrap 5's contribution to CSS.
- Bootstrap 5 kit elements (grids, normalize.css, icons, plug-ins, etc.).
- Understand the tree structure of different files: style sheets, JavaScript...
- Linking a web page to Bootstrap 5's basic style sheet.
Hands-on work
Installing Bootstrap 5. Dressing an HTML page with Bootstrap 5.
2 Bootstrap 5 style sheets
- CSS for text elements and images.
- CSS for form elements and tables.
- Use icon fonts to display icons on pages.
- CSS for page layout, blocks on a page.
- Overload the style sheet.
Hands-on work
Style the various elements making up a web page with Bootstrap 5 CSS. Customize the style of certain page elements.
3 The grids
- Understanding the grid concept.
- Adaptive grids (responsive web design, media queries, positioning...).
- Grid organization. Handling grids.
- Grid Layout in Bootstrap 5.
- Flexbox in Bootstrap 5.
- Column layout.
- Block order.
Hands-on work
Create a responsive web page based on a grid.
4 Basic JavaScript components
- Using the carousel.
- Improved responsive menus.
- Navigation and pagination components.
- Buttons, badges, alerts.
- Progress bars.
Hands-on work
Design a web page for an Internet or intranet site integrating several Bootstrap 5 components.
5 Bootstrap 5 a la carte modules
- Use a JavaScript server (Node, Deno, Parcel).
- Define a custom Bootstrap with only the essentials.
- Include bootstrap.js modules in the Webpack.
Hands-on work
Create a customized project with only the CSS and JavaScript modules you need.
6 Bootstrap 5 plug-ins
- Modal windows. Accordions. Photo carousel.
- Validator form.
- Autocomplete fields.
- Vertical navigation.
- Multi-item carousel.
- WYSIWYG (What You See Is What You Get) editor.
Hands-on work
Integrate modern visual effects using JavaScript plug-ins associated with the Bootstrap 5 library.
7 Bootstrap 5 model analysis
- Analyze models built using Bootstrap 5.
- Create a site with one of the templates.
- Create a page from a template by overloading the CSS file.
- Use SAAS files with a JavaScript preprocessor and/or server (NodeJS).
Hands-on work
Create your own Bootstrap.css.
Customer reviews
5 / 5
Customer reviews are based on end-of-course evaluations. The score is calculated from all evaluations within the past year. Only reviews with a textual comment are displayed.
MURIEL T.
08/09/25
5 / 5
Sometimes a little fast, but that's due to a lack of basic knowledge on my part
Publication date : 08/21/2024
PARTICIPANTS
Webmaster, developer, integrator.
PREREQUISITES
Knowledge of HTML and CSS, and notions of JavaScript.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Webmaster, developer, integrator.
PREREQUISITES
Knowledge of HTML and CSS, and notions of JavaScript.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
This programme is an original creation, developed by the teaching teams at ORSYS Formation. Any reproduction, representation, adaptation or use, in whole or in part, without the prior written authorisation of ORSYS, is strictly prohibited. ORSYS reserves the right to take any action necessary to protect its intellectual property rights.
Dates and locations
Dernières places
Date garantie en présentiel ou à distance
Session garantie
This programme is an original creation, developed by the teaching teams at ORSYS Formation. Any reproduction, representation, adaptation or use, in whole or in part, without the prior written authorisation of ORSYS, is strictly prohibited. ORSYS reserves the right to take any action necessary to protect its intellectual property rights.