start learning
Image 1
277701017778

Bootstrap Examples

you can include the Bootstrap CSS and Js Link in your HTML document by adding a <link> tag in the <head> section :

<head>
<title>Bootstrap</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>

<body>
<!-- Body content -->
<!-- Include Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>


    <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Navbar with Dropdown Buttons (Mobile Optimized)</title>
 <!-- Include Bootstrap CSS --> 
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
 <!-- Include Bootstrap JS --> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Responsive Navigation bar (Mobile Optimized)



    <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Navbar with Dropdown Buttons (Mobile Optimized)</title>
 <!-- Include Bootstrap CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
 <!-- Include Bootstrap JS --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Mobile Preview:

This example demonstrates the usage of Bootstrap to create a responsive navbar. The navbar class defines the basic styling of the navigation bar, while navbar-dark and bg-dark classes set the dark color scheme. The navbar-toggler button and the collapse navbar-collapse class enable the collapsible behavior for smaller screens.

Bootstrap Buttons Example


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Buttons Example</title>
  <!-- Include Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-primary">Primary Button</button>
  <button class="btn btn-secondary">Secondary Button</button>
  <button class="btn btn-danger">Danger Button</button>
  <!-- Include Bootstrap JS --> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Preview:

In this example, Bootstrap classes are used to style buttons. The btn class sets the basic button style, while btn-primary, btn-secondary, and btn-danger classes define different color schemes for the buttons.

Grid System example


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Grid Example</title>
 <!-- Include Bootstrap CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>Content Column 1</p>
      </div>
      <div class="col-sm-6">
        <p>Content Column 2</p>
      </div>
    </div>
  </div>
 <!-- Include Bootstrap JS --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Preview :

This example showcases the use of Bootstrap's grid system to create a responsive layout. The container class sets a fixed-width container to hold the content, while the row class creates a horizontal row to contain the columns. The col-sm-6 class specifies that each content column should take up half of the available space on small screens.

Bootstrap Leftside Navigationbar Example


<!DOCTYPE html>
<html>
<head>
  <title>Left side navigation bar</title>
 <!-- Include Bootstrap CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
  <style>
    .sidebar {
      height: 100%;
      width: 250px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #f5f5f5;
      padding-top: 20px;
    }
    .sidebar a {
      display: block;
      color: #333;
      padding: 10px;
      text-decoration: none;
    }
    .sidebar a:hover {
      background-color: #ccc;
    }
    .content {
      margin-left: 250px;
      padding: 20px;
    }
  </style>
  <div class="sidebar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
  <div class="content">
    <h2>Main Content</h2>
    <p>This is the main content area.</p>
  </div>
 <!-- Include Bootstrap JS --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Preview:

In this example, we create a left side navbar using Bootstrap. The sidebar is fixed with a width of 250 pixels and contains links to different pages. The content area is shifted to the right using margin-left: 250px to accommodate the sidebar.

Bootstrap Dropdown Buttons Example


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Dropdown Button Example</title>
 <!-- Include Bootstrap CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-4">
    <h2>Dropdown Button</h2>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Select Option
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Option 1</a></li>
        <li><a class="dropdown-item" href="#">Option 2</a></li>
        <li><a class="dropdown-item" href="#">Option 3</a></li>
      </ul>
    </div>
  </div>
 <!-- Include Bootstrap JS --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Preview:

In this example, we use the Bootstrap CSS and JS files to create a dropdown button with three options. The btn-group class is used to group the button and the dropdown menu together. The dropdown-toggle class triggers the dropdown functionality, and the dropdown-menu class represents the menu items.

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor