Home>Courses>Modern Web Design Using Bootstrap 5 with Hands-On Projects

Modern Web Design Using Bootstrap 5 with Hands-On Projects

Explore Bootstrap 5 basics and advanced concepts while creating five real-world projects. Gain insights into building stunning, responsive websites and enhance your front-end development skills.

Intermediate

85 Lessons

25h

Certificate of Completion

Explore Bootstrap 5 basics and advanced concepts while creating five real-world projects. Gain insights into building stunning, responsive websites and enhance your front-end development skills.

AI-POWERED

Code Feedback

Explanations

AI-POWERED

Code Feedback

Explanations

This course includes

6 AI Feedbacks

201 Playgrounds

12 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

Bootstrap is an open-source CSS framework that allows developers to create responsive websites efficiently. Mastering Bootstrap 5 can enhance your skills and give you an advantage in the job market. This course covers Bootstrap 5 basics, like the grid system, typography, and responsive design, and advanced topics, such as layouts, utilities, components, and custom CSS. You'll also learn to use Bootstrap's built-in JavaScript plug-ins and create five real-world projects, including a registration form, a pro...Show More

Bootstrap is an open-source CSS framework that allows developers to create responsive websites efficiently. Mastering Bootstrap ...Show More

TAKEAWAY SKILLS

Bootstrap

CSS

Web Development

What You'll Learn

An understanding of the fundamentals of Bootstrap 5 and its significance in front-end web development

Ability to build responsive web layouts with Bootstrap 5 using its grid system and various components

Working knowledge of Bootstrap 5's utility classes and custom CSS to customize web designs

Proficiency in using Bootstrap 5's component library to create interactive and user-friendly web interfaces

Hands-on experience in creating and publishing real-world projects using Bootstrap 5

An understanding of the fundamentals of Bootstrap 5 and its significance in front-end web development

Course Content

Introduction to Bootstrap

4 Lessons

Learn how to use Bootstrap for responsive, mobile-first web development.

Before You Begin

What Is Bootstrap and Why Is It Needed?

Hello World in Bootstrap

Quiz: Introduction to Bootstrap

Layouts in Bootstrap 5

8 Lessons

Walk through Bootstrap 5's responsive layouts, grids, column alignment, and customizations.

Introduction to Breakpoints

Containers

Introduction to Grids

Align Columns in a Grid

Breakpoints in Columns

Offset and Order Classes

Gutters

Quiz: Bootstrap Layouts

Utilities

9 Lessons

Work your way through Bootstrap utilities to enhance layout, spacing, and element positioning.

Content

4 Lessons

Break down complex ideas for text, images, videos, and tables using Bootstrap 5.

Forms

5 Lessons

Take a closer look at creating and customizing Bootstrap forms, input types, labels, and validation.

Introduction to Forms with Bootstrap

Input Types

Floating Labels and Input Groups

Validation

Quiz: Forms

Components

15 Lessons

Follow the process of customizing and implementing essential web components using Bootstrap 5.

Customization & Icons

3 Lessons

Customize and utilize Bootstrap components and icons for unique, efficient web design.

Customize Components

Bootstrap Icons

Quiz: Customization and Icons

Building a Registration Form

5 Lessons

Step through creating a Bootstrap registration form with custom CSS, layout, and buttons.

Layout of the Registration Form

Components of the Registration Form

Buttons on the Registration Form

Shadows for the Registration Form

Quiz: Registration Form

Building a Profile Card

5 Lessons

Get started with creating visually stunning profile cards using Bootstrap 5 components.

Layout of the Profile Card

Image and Content for the Profile Card

Icons on the Profile Card

Shadows and Hover Effects for the Profile Card

Quiz: Profile Card

10.

Building a Health Tracker Website

6 Lessons

Go hands-on with building a responsive, organized Health Tracker Website using Bootstrap.

Layout of the Health Tracker Website

Weekly Progress Module for the Health Tracker Website

Untitled Masterpiece

Daily Tasks Section of the Health Tracker Website

Responsive Health Tracker Website

Quiz: Health Tracker Website

11.

Building a Movie Streaming Website

7 Lessons

Apply your skills to design a responsive movie streaming website with Bootstrap 5.

Layout of the Movie Streaming Website

Navbar of the Movie Streaming Website

Customize the Navbar for the Movie Streaming Website

Carousel for the Movie Streaming Website

Movies and TV Shows Section of the Movie Streaming Website

Footer of the Movie Streaming Website

Quiz: Movie Streaming Website

12.

Building a Portfolio Website

10 Lessons

Take a closer look at building a responsive, visually appealing portfolio website using Bootstrap.

Layout of the Portfolio Website

Navbar Section of the Portfolio Website

Adding Scrollspy to the Portfolio Website

Home Section of the Portfolio Website

Responsive Home Section of the Portfolio Website

About Me Section of the Portfolio Website

Responsive About Me Section of the Portfolio Website

Projects Section of the Portfolio Website

Contact Section of the Portfolio Website

Quiz: Portfolio Website

13.

Conclusion

4 Lessons

Focus on mastering Bootstrap, exploring project ideas, and next steps in web development.

Course Author

Show License and Attributions

Trusted by 2.6 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

Web Development: A Primer

Delve into web development fundamentals, exploring HTML, CSS, JavaScript, and version control. Gain insights into essential web technologies to confidently pursue further learning and projects.

beginner

5 hours

Course

The Complete Beginner’s Guide to CSS

Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

beginner

4 hours 55 mins

Course

Designing Web Layouts with CSS and Flexbox

Gain insights into designing mobile-responsive web layouts using Flexbox. Delve into Box Model basics, Flexbox containers, and item alignment, and apply your knowledge to create stunning, mobile-first websites.

beginner

10 hours

Course

Web Development: A Primer

beginner

5 hour

Course

The Complete Beginner’s Guide to CSS

beginner

4 hour 55 min

Course

Designing Web Layouts with CSS and Flexbox

beginner

10 hour

Related Courses and Skill Paths

Course

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

beginner

20 hours

Course

Complete JavaScript Course: Build a Real World App from Scratch

Gain insights into JavaScript with ES6, DOM traversal, event handling, and animation. Learn about building a Social News web app from scratch using HTML, CSS, and JavaScript.

beginner

20 hours

Course

Web Development Interview Handbook

The ultimate guide to web development interviews. Developed by FAANG engineers, practice with real-world interview questions covering network security, system design, SEO, APIs, and more.

intermediate

6 hours 30 mins

Course

Web Development: Unraveling HTML, CSS, and JavaScript

beginner

20 hour

Course

Complete JavaScript Course: Build a Real World App from Scratch

beginner

20 hour

Course

Web Development Interview Handbook