Bootstrap 5 Course Updated Get the new content 2+ hours of HD video

Get the Course today

https://www.udemy.com/course/bootstrap-4-website/?referralCode=F808704AE84C5132C0F0

Bootstrap 5 Quickly design responsive mobile first websites

In this complete course students will learn how utilize Bootstrap to create webpages. HTML CSS JavaScript

Bootstrap 5 included – now Bootstrap is better than ever!

Bootstrap lets you build fully responsive – mobile first websites quickly and easily

Apply the prebuilt classes, and element attributes bringing in the amazing functionality of Bootstrap.

The new Bootstrap 5 components provide more options for styling and more responsiveness than ever before.

Bootstrap 5 now is switched off of jQuery and now uses JavaScript only.

Course includes source code and coding examples for the commonly uses Bootstrap classes.

  • Bootstrap 5 Containers
  • Bootstrap 5 Grid Rows and Columns
  • Text and Typography
  • How to update Image Classes
  • Bootstrap 5 Table Classes
  • Bootstrap 5 Colors
  • Bootstrap 5 Alerts Components
  • Bootstrap 5 Accordion Components
  • Bootstrap 5 Buttons Components
  • Card Component Bootstrap 5
  • Bootstrap 5 Nav and NavBar Responsive
  • Bootstrap 5 Carousel
  • Bootstrap 5 Modal component
  • Bootstrap 5 Utilities

Bootstrap, the world’s most popular front-end open source toolkit lets you rapidly create, customize and develop websites using the Bootstrap components and styling classes.

New updated content and covering several versions of Bootstrap. 

Also includes previous versions of Bootstrap – loaded with examples on how to create web pages with Bootstrap.

How to use Bootstrap 5 Containers

  • Explore the Bootstrap 5 Grid Rows and Columns
  • Apply Text and Typography in Bootstrap 5
  • How to update Image Classes
  • Bootstrap 5 Table Classes with Examples
  • Bootstrap 5 Colors Primary Success Info Danger Dark Light
  • Bootstrap 5 Alerts Components how to activate them
  • Bootstrap 5 Accordion Components hide and show content
  • Bootstrap 5 Buttons Components Outline and Background colors
  • Card Component Bootstrap 5
  • Bootstrap 5 Nav and NavBar Responsive mobile ready resizing navbar
  • Bootstrap 5 Carousel Create a slideshow with interactive options Image Slider
  • Bootstrap 5 Modal component Modal options and examples
  • Bootstrap 5 Utilities text color padding margin align sizing positioning elements

Loaded with NEW Fresh content and 3 website examples +++++ all the source code ++++++

Lots of new content – create 3 websites with Bootstrap 4 from scratch

Bootstrap 5 Lessons Source Code

Bootstrap 5 Containers

Bootstrap 5 Grid Rows and Columns

Text and Typography

How to update Image Classes

Bootstrap 5 Table Classes

Bootstrap 5 Colors

Bootstrap 5 Alerts Components

Bootstrap 5 Accordion Components

Bootstrap 5 Buttons Components

Card Component Bootstrap 5

Bootstrap 5 Nav and NavBar Responsive

Bootstrap 5 Carousel

Bootstrap 5 Modal component

Bootstrap 5 Utilities

Bootstrap 5 Containers

<!doctype html>

<html lang=”en”>

 <head>

   <meta charset=”utf-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

   <link href=”style.css” rel=”stylesheet”>

   <title>Bootstrap 5</title>

 </head>

 <body>

   <div class=”container box”>

     <h1>Hello, world 1</h1>

     <div>Container 1</div>

   </div>

   <div class=”container-fluid box”>

     <h1>Hello, world 2</h1>

     <div>Container 2</div>

   </div>

   <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

 </body>

</html>

Bootstrap 5 Grid Rows and Columns

<!doctype html>

<html lang=”en”>

 <head>

   <meta charset=”utf-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

   <link href=”style.css” rel=”stylesheet”>

   <title>Bootstrap 5</title>

 </head>

 <body>

   <div style=”height:50px”> </div>

   <div class=”container box”>

     <h1>Hello, world 1</h1>

     <div class=”row”>

       <div class=”col box”>One</div>

       <div class=”col box”>Two</div>

       <div class=”col box”>Three</div>

     </div>

     <div class=”row”>

       <div class=”col box”>One</div>

       <div class=”col box”>Two</div>

       <div class=”col box”>Three</div>

       <div class=”col box”>Four</div>

     </div>

     <div>Container 1</div>

     <div class=”row”>

       <div class=”col-sm-2 box”>One</div>

       <div class=”col-sm-4 box”>Two</div>

       <div class=”col-sm-2 box”>Three</div>

       <div class=”col-sm-4 box”>Four</div>

     </div>

     <div class=”row”>

       <div class=”col-xl-2 box”>One</div>

       <div class=”col-xl-4 box”>Two</div>

       <div class=”col-xl-2 box”>Three</div>

       <div class=”col-xl-4 box”>Four</div>

     </div>

     <div class=”row”>

       <div class=”col-sm-1 box”>One</div>

       <div class=”col-sm-2 box”>Two</div>

       <div class=”col-sm-3 box”>Three</div>

       <div class=”col-sm-4 box”>Four</div>

     </div>

   </div>

   <div style=”height:50px”> </div>

   <div class=”container-fluid box”>

     <h1>Hello, world 2</h1>

     <div class=”row”>

       <div class=”col box”>One</div>

       <div class=”col box”>Two</div>

       <div class=”col box”>Three</div>

     </div>

     <div>Container 2</div>

     <div class=”row”>

       <div class=”col-sm-2 box”>One</div>

       <div class=”col-sm-4 box”>Two</div>

       <div class=”col-sm-2 box”>Three</div>

       <div class=”col-sm-4 box”>Four</div>

     </div>

     <div class=”row”>

       <div class=”col-xl-2 box”>One</div>

       <div class=”col-xl-4 box”>Two</div>

       <div class=”col-xl-2 box”>Three</div>

       <div class=”col-xl-4 box”>Four</div>

     </div>

     <div class=”row”>

       <div class=”col-sm-1 box”>One</div>

       <div class=”col-sm-2 box”>Two</div>

       <div class=”col-sm-3 box”>Three</div>

       <div class=”col-sm-4 box”>Four</div>

     </div>

   </div>

   <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

 </body>

</html>

Text and Typography

<!doctype html>

<html lang=”en”>

 <head>

   <meta charset=”utf-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

   <link href=”style.css” rel=”stylesheet”>

   <title>Bootstrap 5</title>

 </head>

 <body>

   <div style=”height:50px”> </div>

   <div class=”container box”>

     <h1>Hello, world 1</h1>

     <div class=”h1″>Hello World 1</div>

     <h2>Hello, world 1</h2>

     <div class=”h2″>Hello World 1</div>

     <div class=”display-1″>Display 1</div>

     <div class=”display-2″>Display 2</div>

     <div class=”display-3″>Display 3</div>

     <div class=”display-4″>Display 4</div>

     <div class=”display-5″>Display 5</div>

     <div class=”display-6″>Display 6</div>

     <small>Small</small>

     <mark>Mark</mark>

     <code>Code</code>

     <br>

     <span class=”small”>Small</span>

     <span class=”mark”>Mark</span>

     <ul class=”list-unstyled”>

       <li>One</li>

       <li>Two</li>

       <li>Three</li>

       <li>Four</li>

     </ul>

     <ul class=”list-inline”>

       <li class=”list-inline-item”>One</li>

       <li class=”list-inline-item”>Two</li>

       <li class=”list-inline-item”>Three</li>

       <li class=”list-inline-item”>Four</li>

     </ul>

     <dl class=”row”>

       <dt class=”col-sm-6″>Title</dt>

       <dd class=”col-sm-2″>Ele 1</dd>

       <dd class=”col-sm-2″>Ele 2</dd>

       <dd class=”col-sm-2″>Ele 3</dd>

       <dt class=”col-sm-6″>Title</dt>

       <dd class=”col-sm-3″>Ele 1</dd>

       <dd class=”col-sm-3″>Ele 2</dd>

       <dt class=”col-sm-6″>Title</dt>

       <dd class=”col-sm-6″>Ele 1</dd>

     </dl>

     <dl>

       <dt>Title</dt>

       <dd>Ele 1</dd>

       <dd>Ele 2</dd>

       <dd>Ele 3</dd>

     </dl>

     <div>Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1Container 1 Container 1</div>

    </div>

   <div style=”height:50px”> </div>

   <div class=”container-fluid box”>

     <h1>Hello, world 2</h1>

     <div>Container 2</div>

   </div>

   <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

 </body>

</html>

How to update Image Classes

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div style=”height:50px”> </div>

 <div class=”container box”>

   <p class=”h1″>Container 1</p>

   <div><img src=”logo.png” class=”rounded float-start ” style=”width:100px” >Container 1 Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1</div>

   <div><img src=”logo.png” class=”rounded mx-auto d-block ” style=”width:200px” >Container 1 Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1</div>

   <div><img src=”logo.png” class=”img-thumbnail img-fluid rounded-circle”  >Container 1 Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1</div>

   <div><img src=”logo.png” class=”rounded float-end ” style=”width:100px” >Container 1 Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1Container 1</div>

   <img src=”logo.png” class=”img-fluid”>

 </div>

 <div style=”height:50px”> </div>

 <div class=”container-fluid box”>

   <p class=”h1″>Container 2</p>

   <div>Container 2</div>

   <img src=”logo.png” class=”img-thumbnail”>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Table Classes

<!doctype html>

<html lang=”en”>

 <head>

   <meta charset=”utf-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

   <link href=”style.css” rel=”stylesheet”>

   <title>Bootstrap 5</title>

 </head>

 <body>

   <div class=”container box”>

     <h1>Hello, world 1</h1>

     <div>Container 1</div>

     <table class=”table table-hover table-dark table-borderless”>

       <thead><tr>

         <th>First</th>

         <th>Last</th>

       </tr></thead>

       <tbody>

         <tr>

           <td>Laurence</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>Larry</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>John</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>Laurence</td>

           <td>Doe</td>

         </tr>

       </tbody>

     </table>

   </div>

   <div class=”container-fluid box”>

     <h1>Hello, world 2</h1>

     <div><table class=”table table-striped table-bordered table-primary”>

       <thead class=”table-success”><tr>

         <th>First</th>

         <th>Last</th>

       </tr></thead>

       <tbody>

         <tr >

           <td>Laurence</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>Larry</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>John</td>

           <td>Svekis</td>

         </tr>

         <tr>

           <td>Laurence</td>

           <td>Doe</td>

         </tr>

       </tbody>

     </table></div>

   </div>

   <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

 </body>

</html>

Bootstrap 5 Colors

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <h1>Hello, world 1</h1>

   <div class=”text-muted”>Container muted</div>

   <div class=”text-primary”>Container primary</div>

   <div class=”text-success”>Container success</div>

   <div class=”text-info”>Container Info</div>

   <div class=”text-warning”>Container Warning</div>

   <div class=”text-danger”>Container Danger</div>

   <div class=”text-secondary”>Container secondary</div>

   <div class=”text-dark”>Container Dark</div>

   <div class=”text-light”>Container Light</div>

 </div>

 <div class=”container-fluid box”>

   <h1>Hello, world 2</h1>

   <div class=”bg-muted”>Container muted</div>

   <div class=”bg-primary”>Container primary</div>

   <div class=”bg-success”>Container success</div>

   <div class=”bg-info”>Container Info</div>

   <div class=”bg-warning”>Container Warning</div>

   <div class=”bg-danger”>Container Danger</div>

   <div class=”bg-secondary”>Container secondary</div>

   <div class=”bg-dark text-light”>Container Dark</div>

   <div class=”bg-light text-dark”>Container Light</div>

   <div></div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Alerts Components

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <h1>Hello, world 1</h1>

   <div class=”alert alert-success”>Container Alert <a class=”alert-link” href=”#”>Link</a></div>

   <div class=”alert alert-primary”>Container Alert <a class=”alert-link” href=”#”>Link</a></div>

   <div class=”alert alert-warning”>Container Alert <a class=”alert-link” href=”#”>Link</a></div>

   <div class=”alert alert-danger”>Container Alert <a class=”alert-link” href=”#”>Link</a></div>

   <div class=”alert alert-info”>Container Alert</div>

   <div class=”alert alert-secondary”>Container Alert</div>

 </div>

 <div class=”container-fluid box”>

   <h1>Hello, world 2</h1>

   <div class=”alert alert-success alert-dismissible”>Container Alert

     <a class=”alert-link” href=”#”>Link</a>

     <button type=”button” class=”btn-close” data-bs-dismiss=”alert”></button>

   </div>

   <div class=”alert alert-danger alert-dismissible”>Container Alert

     <a class=”alert-link” href=”#”>Link</a>

     <button type=”button” class=”btn-close” data-bs-dismiss=”alert”></button>

   </div>

   <div class=”alert alert-info alert-dismissible fade show”>Container Alert

     <a class=”alert-link” href=”#”>Link</a>

     <button type=”button” class=”btn-close” data-bs-dismiss=”alert”></button>

   </div>

   <div class=”alert alert-primary alert-dismissible fade show”>Container Alert

     <a class=”alert-link” href=”#”>Link</a>

     <button type=”button” class=”btn-close” data-bs-dismiss=”alert”></button>

   </div>

   <div></div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Accordion Components

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <h1>Hello, world 1</h1>

   <div class=”accordion” id=”acc1″>

     <div class=”accordion-item”>

       <h2 class=”accordion-header” id=”head1″>

         <button class=”accordion-button” type=”button” data-bs-toggle=”collapse” data-bs-target=”#open1″>

           Open One

         </button>

       </h2>

       <div id=”open1″ class=”accordion-collapse collapse” data-bs-parent=”#acc1″>

         <div class=”accordion-body”>

         This is where the content goes!!

       </div>

       </div>

     </div>

     <div class=”accordion-item”>

       <h2 class=”accordion-header” id=”head2″>

         <button class=”accordion-button” type=”button” data-bs-toggle=”collapse” data-bs-target=”#open2″>

           Open Two

         </button>

       </h2>

       <div id=”open2″ class=”accordion-collapse collapse ” data-bs-parent=”#acc1″>

         <div class=”accordion-body”>

        Hello World

       </div>

       </div>

     </div>

     <div class=”accordion-item”>

       <h2 class=”accordion-header” id=”head3″>

         <button class=”accordion-button” type=”button” data-bs-toggle=”collapse” data-bs-target=”#open3″>

           Open Three

         </button>

       </h2>

       <div id=”open3″ class=”accordion-collapse collapse ” data-bs-parent=”#acc1″>

         <div class=”accordion-body”>

        Hello World #3

       </div>

       </div>

     </div>

   </div>

 </div>

 <div class=”container-fluid box”>

   <h1>Hello, world 2</h1>

   <div></div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Buttons Components

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <h1>Hello, world 1</h1>

   <div class=”btn btn-primary”>Button</div>

   <button type=”button” class=”btn btn-secondary”>Button 1</button>

   <button type=”button” class=”btn btn-info”>Button 1</button>

   <button type=”button” class=”btn btn-success”>Button 1</button>

   <div class=”d-grid”>

     <div class=”btn btn-danger btn-block”>Button 1</div>

   </div>

   <button type=”button” class=”btn btn-warning”>Button 1</button>

   <button type=”button” class=”btn btn-dark”>Button 1</button>

   <button type=”button” class=”btn btn-link”>Button 1</button>

 </div>

 </div>

 <div class=”container-fluid box”>

   <h1>Hello, world 2</h1>

   <div> <button type=”button” class=”btn btn-outline-secondary active”>Button 1</button>

     <button type=”button” class=”btn btn-outline-info btn-lg disabled”>Button 1</button>

     <button type=”button” class=”btn btn-outline-success”>Button 1</button>

     <button type=”button” class=”btn btn-outline-danger btn-sm”>Button 1</button>

     <button type=”button” class=”btn btn-outline-warning”>Button 1</button>

     <button type=”button” class=”btn btn-outline-dark”>Button 1</button>

     <button type=”button” class=”btn btn-outline-link”>Button 1</button>

   </div>

   <div class=”btn btn-primary”>

     <div class=”spinner-border”></div>

     Loading…

   </div>

   <div class=”btn btn-danger”>

     <div class=”spinner-border spinner-border-sm”></div>

     Loading…

   </div>

   <div class=”btn btn-success”>

     <div class=” spinner-grow”></div>

     Loading…

   </div>

   <div class=”btn-group-vertical”>

     <div class=”btn btn-success”>Click</div>

     <div class=”btn btn-danger”>Click</div>

     <div class=”btn btn-primary”>Click</div>

     <div class=”btn btn-info”>Click</div>

   </div>

   <div class=”btn-group btn-group-lg”>

     <div class=”btn btn-success”>Click</div>

     <div class=”btn btn-danger”>Click</div>

     <div class=”btn btn-primary”>Click</div>

     <div class=”btn-group”>

       <div class=”btn btn-secondary dropdown-toggle” data-bs-toggle=”dropdown”>

         Open

       </div>

       <div class=”dropdown-menu”>

         <div class=”dropdown-item”>Click 1</div>

         <div class=”dropdown-item”>Click 2</div>

         <div class=”dropdown-item”>Click 3</div>

       </div>

     </div>

   </div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Card Component Bootstrap 5

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <div class=”row”>

     <div class=”col”>

       <div class=”card”>

         <img class=”card-img-top” src=”logo.png”>

         <div class=”card-header bg-primary text-light”>

           Author

         </div>

         <div class=”card-body”>

           Laurence Svekis

         </div>

         <div class=”card-footer”>

           Contact info

         </div>

       </div>

     </div>

     <div class=”col”>

       <div class=”card”>

         <img class=”card-img-top” src=”logo.png”>

         <div class=”card-header bg-primary text-light”>

           Author

         </div>

         <div class=”card-body”>

           Laurence Svekis

         </div>

         <div class=”card-footer”>

           Contact info

         </div>

       </div>

     </div>

     <div class=”col-md”>

       <div class=”card”>

         <img class=”card-img-top” src=”logo.png”>

         <div class=”card-img-overlay”>

           <p class=”card-text”>Laurence Svekis</p>

           <button class=”btn btn-primary”>More</button>

         </div>

         <div class=”card-header bg-primary text-light”>

           Author

         </div>

         <div class=”card-body”>

           Laurence Svekis

         </div>

         <div class=”card-footer”>

           Contact info

         </div>

       </div>

     </div>

   </div>

   <h1>Hello, world 1</h1>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Nav and NavBar Responsive

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <nav class=”navbar navbar-expand-md bg-light navbar-light justify-content-center”>

     <div class=”container-fluid”>

       <div class=”navbar-brand”>

         <img src=”logo.png” width=”50″>

         Bootstrap 5

       </div>

       <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#mainNav”>

         <span class=”navbar-toggler-icon”></span>

       </button>

       <div class=”collapse navbar-collapse” id=”mainNav”>

         <ul class=”navbar-nav”>

           <li class=”nav-item”>

             <a href=”#” class=”nav-link “>Link 1</a>

           </li>

           <li class=”nav-item”>

             <a href=”#” class=”nav-link “>Link 2</a>

           </li>

           <li class=”nav-item”>

             <a href=”#” class=”nav-link “>Link 3</a>

           </li>

           <li class=”nav-item”>

             <a href=”#” class=”nav-link “>Link 4</a>

           </li>

           <li class=”nav-item”>

             <a href=”#” class=”nav-link “>Link 5</a>

           </li>

         </ul>

       </div>

     </div>

   </nav>

   <h1>Hello, world 1</h1>

 </div>

 <nav class=”navbar navbar-expand-md bg-light navbar-light justify-content-center”>

   <ul class=”navbar-nav”>

     <li class=”nav-item”>

       <a href=”#” class=”nav-link “>Link 1</a>

     </li>

     <li class=”nav-item”>

       <a href=”#” class=”nav-link “>Link 2</a>

     </li>

     <li class=”nav-item”>

       <a href=”#” class=”nav-link “>Link 3</a>

     </li>

   </ul>

 </nav>

 <ul class=”nav justify-content-center bg-light”>

   <li class=”nav-item”><a href=”#” class=”nav-link”>One</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>two</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Three</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Four</a></li>

 </ul>

 <ul class=”nav nav-tabs  bg-light”>

   <li class=”nav-item”><a href=”#” class=”nav-link”>One</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link active”>two</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Three</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Four</a></li>

 </ul>

 <ul class=”nav nav-pills  bg-light nav-justified”>

   <li class=”nav-item”><a href=”#” class=”nav-link”>One</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>two</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Three</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link  active”>Four</a></li>

 </ul>

 <ul class=”nav nav-pills  bg-light “>

   <li class=”nav-item”><a href=”#” class=”nav-link”>One</a></li>

   <li class=”nav-item dropdown”>

     <a href=”#” data-bs-toggle=”dropdown” class=”nav-link dropdown-toggle”>Open</a>

     <div class=”dropdown-menu”>

       <div>

         <a href=”#” class=”dropdown-item”>1</a>

       </div>

       <div>

         <a href=”#” class=”dropdown-item”>2</a>

       </div>

       <div>

         <a href=”#” class=”dropdown-item”>3</a>

       </div>

     </div>

   </li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Three</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link “>Four</a></li>

 </ul>

 <ul class=”nav nav-tabs  bg-light “>

   <li class=”nav-item”><a href=”#” class=”nav-link active”>One</a></li>

   <li class=”nav-item dropdown”>

     <a href=”#” data-bs-toggle=”dropdown” class=”nav-link dropdown-toggle”>Open</a>

     <div class=”dropdown-menu”>

       <div>

         <a href=”#” class=”dropdown-item”>1</a>

       </div>

       <div>

         <a href=”#” class=”dropdown-item”>2</a>

       </div>

       <div>

         <a href=”#” class=”dropdown-item”>3</a>

       </div>

     </div>

   </li>

   <li class=”nav-item”><a href=”#” class=”nav-link”>Three</a></li>

   <li class=”nav-item”><a href=”#” class=”nav-link “>Four</a></li>

 </ul>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Carousel

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <div class=”display-1 “>Bootstrap 5</div>

   <div class=”carousel slide” data-bs-ride=”carousel” id=”car1″>

     <div class=”carousel-indicators”>

       <button type=”button” data-bs-target=”#car1″ class=”active” data-bs-slide-to=”0″></button>

       <button type=”button” data-bs-target=”#car1″ data-bs-slide-to=”1″></button>

       <button type=”button” data-bs-target=”#car1″ data-bs-slide-to=”2″></button>

     </div>

     <div class=”carousel-inner”>

       <div class=”carousel-item active”>

         <img src=”https://via.placeholder.com/500×300?text=First” class=”d-block img-fluid”>

       </div>

       <div class=”carousel-item “>

         <img src=”https://via.placeholder.com/500″ class=”d-block img-fluid” height=”300″>

       </div>

       <div class=”carousel-item “>

         <img src=”logo.png” class=”d-block img-fluid” height=”300″>

       </div>

     </div>

     <button class=”carousel-control-prev” type=”button” data-bs-target=”#car1″ data-bs-slide=”prev”>

       <span class=”carousel-control-prev-icon”></span>

     </button>

     <button class=”carousel-control-next” type=”button” data-bs-target=”#car1″ data-bs-slide=”next”>

       <span class=”carousel-control-next-icon”></span>

     </button>

   </div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Modal component

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <div class=”display-1 “>Bootstrap 5</div>

   <div class=”btn btn-primary” data-bs-toggle=”modal”     data-bs-target=”#mod1″>Open Mod1</div>

   <div class=”btn btn-success” data-bs-toggle=”modal”     data-bs-target=”#mod2″>Open Mod2</div>

 </div>

 <div class=”modal fade” id=”mod1″>

   <div class=”modal-dialog modal-dialog-centered”>

     <div class=”modal-content”>

       <div class=”modal-header”>

         <h2 class=”modal-title”>Heading</h2>

         <button type=”button” class=”btn-close” data-bs-dismiss=”modal”></button>

       </div>

       <div class=”modal-body”>

         <p>Laurence Svekis</p>

       </div>

       <div class=”modal-footer”>

         <button type=”button” class=”btn btn-success” >Save</button>

         <button type=”button” class=”btn btn-primary” >Edit</button>

         <button type=”button” class=”btn btn-danger” data-bs-dismiss=”modal”>Close</button>

       </div>

     </div>

   </div>

 </div>

 <div class=”modal fade” id=”mod2″>

   <div class=”modal-dialog”>

     <div class=”modal-content”>

       <div class=”modal-header”>

         <h2 class=”modal-title”>Heading</h2>

         <button type=”button” class=”btn-close” data-bs-dismiss=”modal”></button>

       </div>

       <div class=”modal-body”>

         <p>Laurence Svekis</p>

       </div>

       <div class=”modal-footer”>

         <button type=”button” class=”btn btn-primary” data-bs-dismiss=”modal”>Close</button>

       </div>

     </div>

   </div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Bootstrap 5 Utilities

<!doctype html>

<html lang=”en”>

<head>

 <meta charset=”utf-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

 <link href=”style.css” rel=”stylesheet”>

 <title>Bootstrap 5</title>

</head>

<body>

 <div class=”container box”>

   <div class=”display-1 “>Bootstrap 5</div>

   <div class=”border border-1 border-primary text-decoration-underline”>Element 1</div>

   <div class=”border border-2 border-danger fw-bold”>Element 2</div>

   <div class=”border border-3 border-warning fst-italic lh-lg”>Element 3</div>

   <div class=”border border-4 border-info”>Element 4</div>

   <div class=”border-start”>Element 5</div>

 </div>

 <div class=”container box text-center” style=”height:600px”>

   <div class=”display-1 “>Bootstrap 5</div>

   <div class=”border rounded bg-primary m-5 text-uppercase”>Element 1</div>

   <div class=”border rounded-circle bg-danger w-25 h-25 text-lowercase”>Element 2</div>

   <div class=”border rounded-pill w-50 bg-warning h-25 mx-auto text-capitalize fs-1″>laurence svekis hello World</div>

   <div class=”border border-4 border-info p-4 shadow-lg”>Element 4</div>

   <div class=”border-start pt-4 fs-2″>Element 5</div>

 </div>

 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>

</body>

</html>

Leave a Comment