Bootstrap 5 Tutorial

The world's most popular front-end component library.

Learn Bootstrap 5

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

This tutorial will teach you Bootstrap 5 from basic to advanced.

Learning by Examples

With our "Try it Yourself" editor, you can edit the Bootstrap code and see the result.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </div>
</div>

</body>
</html>

Track Your Progress

Create a free Utilizor account to save your learning progress, earn points, and track your streaks.

View completed tutorials, exercises, and quizzes
Keep an eye on your progress with daily streaks
Set goals and create personalized learning paths

Your Learning Dashboard

Bootstrap 5 Progress25%

Daily Goal1/4 Lessons

🔥 1 Day Streak!

Note: This is an optional feature. You can study at Utilizor without creating an account.