🪴 Shoyeb's Dev Diary

1. Bootstrap

Saturday Jan 03, 2026

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width equal to or greater than 576px)
  • .col-md- (medium devices - screen width equal to or greater than 768px)
  • .col-lg- (large devices - screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
  • .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

What is Bootstrap (in short)

Bootstrap is a CSS framework that helps you build responsive, clean layouts fast using predefined classes.

Template

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Example</title>
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="/bootstrap.min.css" rel="stylesheet">
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->
    <script src="/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container bg-info">
        <h1>My First Bootstrap Page</h1>
        <p>This is some text.</p>
    </div>
</body>
</html>

1️⃣ Container

<div class="container">...</div>        <!-- Fixed width (This make auto margin left and right) -->
<div class="container-fluid">...</div> <!-- Full width 100% -->

Grid System (12 columns)

<div class="row">
  <div class="col-6">50%</div> 
  <div class="col-6">50%</div>
</div>

Responsive versions:

col-sm-6   <!-- small screens -->
col-md-6   <!-- medium -->
col-lg-6   <!-- large -->

Note: - col-6 The column takes 6 out of 12 parts (50% width) on all screen sizes. It does not change if the screen is small, medium, or large.

2️⃣ Spacing

Margin & Padding

m-3   <!-- margin -->
p-2   <!-- padding -->
 
mt-3  <!-- margin-top -->
mb-2  <!-- margin-bottom -->
ms-2  <!-- margin-left -->
me-2  <!-- margin-right -->

Scale: 0–5

3️⃣ Typography

<h1 class="display-1">Big Title</h1>
<p class="lead">Lead text</p>
<p class="text-muted">Muted text</p>
<p class="fw-bold">Bold</p>
<p class="text-center">Centered</p>

Text colors:

text-primary
text-success
text-danger
text-warning

4️⃣ Buttons

<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>
<button class="btn btn-outline-secondary">Cancel</button>

Sizes:

btn-sm
btn-lg

Why: Consistent button styles instantly.

5️⃣ Forms (Very Used)

<input type="text" class="form-control">
<select class="form-select"></select>

Checkbox:

<input class="form-check-input" type="checkbox">

Why: Makes forms look professional with no CSS.

6️⃣ Display & Flex (Powerful)

d-flex
justify-content-center
align-items-center

Example:

<div class="d-flex justify-content-between">

Why: Align items easily without flexbox CSS.

7️⃣ Colors & Backgrounds

bg-primary
bg-dark
bg-light
text-white

8️⃣ Cards (Very Common UI)

<div class="card">
  <div class="card-body">
    Content
  </div>
</div>

9️⃣ Responsive Utilities

d-none d-md-block   <!-- hide on small screens -->

1️⃣ Simple Portfolio Page

<!DOCTYPE html>
<html>
<head>
  <title>Simple Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 
<!-- Header -->
<div class="bg-dark text-white text-center p-5">
  <h1>John Doe</h1>
  <p class="lead">Web Developer</p>
  <button class="btn btn-primary">Hire Me</button>
</div>
 
<!-- About -->
<div class="container my-5">
  <h2 class="text-center mb-4">About Me</h2>
  <p class="text-center text-muted">
    I build simple and clean websites using HTML, CSS, and Bootstrap.
  </p>
</div>
 
<!-- Projects -->
<div class="container">
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="card">
        <div class="card-body">
          <h5>Project 1</h5>
          <p class="text-muted">Simple website</p>
        </div>
      </div>
    </div>
 
    <div class="col-md-4 mb-3">
      <div class="card">
        <div class="card-body">
          <h5>Project 2</h5>
          <p class="text-muted">Landing page</p>
        </div>
      </div>
    </div>
 
    <div class="col-md-4 mb-3">
      <div class="card">
        <div class="card-body">
          <h5>Project 3</h5>
          <p class="text-muted">Portfolio</p>
        </div>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

2️⃣ Simple Blog Page

<!DOCTYPE html>
<html>
<head>
  <title>Simple Blog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 
<!-- Navbar -->
<nav class="navbar navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">My Blog</a>
  </div>
</nav>
 
<!-- Blog Posts -->
<div class="container my-5">
  <div class="row">
    <div class="col-md-8">
      <div class="card mb-4">
        <div class="card-body">
          <h3>First Blog Post</h3>
          <p class="text-muted">Posted on Jan 1</p>
          <p>This is a simple blog post using Bootstrap.</p>
          <a href="#" class="btn btn-sm btn-primary">Read More</a>
        </div>
      </div>
 
      <div class="card mb-4">
        <div class="card-body">
          <h3>Second Blog Post</h3>
          <p class="text-muted">Posted on Jan 5</p>
          <p>Bootstrap helps create layouts fast.</p>
        </div>
      </div>
    </div>
 
    <!-- Sidebar -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5>About</h5>
          <p class="text-muted">Simple Bootstrap blog</p>
        </div>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

3️⃣ Memorial Page (Respectful & Simple)

<!DOCTYPE html>
<html>
<head>
  <title>Memorial Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
 
<div class="container text-center my-5">
  <div class="card p-5">
    <h1 class="mb-3">In Loving Memory</h1>
    <img src="https://capecoraltech.edu/wp-content/uploads/2016/01/tutor-8-3.jpg" class="rounded-circle w-35 w-sm-50 w-md-25 d-block mx-auto" alt="Circular profile">
    <h4 class="text-muted">John Doe</h4>
    <p class="mt-4">
      A kind soul who will always be remembered for their warmth and generosity.
    </p>
    <p class="fw-bold">1990 – 2024</p>
  </div>
</div>
 
</body>
</html>

4️⃣ Full Project (With nav)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Example</title>
    <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>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap</a>
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="menu">
                <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>
 
    <div class="bg-primary text-white text-center p-5">
        <h1>Bootstrap 5 Learning Page</h1>
        <p class="lead">Learn all important Bootstrap components</p>
        <button class="btn btn-light">Get Started</button>
    </div>
 
    <div class="container my-5">
        <h2 class="text-center mb-4">Grid System</h2>
        <div class="row">
            <div class="col-md-4 bg-light p-3 border">Column 1</div>
            <div class="col-md-4 bg-light p-3 border">Column 2</div>
            <div class="col-md-4 bg-light p-3 border">Column 3</div>
        </div>
    </div>
 
    <div class="container my-5">
        <h2 class="text-center mb-4">Cards</h2>
        <p class="card-text">Styling web pages</p>
        <a href="#" class="btn btn-success">Learn</a>
    </div>
 
    <div class="container my-5">
        <h2 class="text-center mb-4">Cards</h2>
 
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">HTML</h5>
                        <p class="card-text">Structure of web pages</p>
                        <a href="#" class="btn btn-primary">Learn</a>
                    </div>
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">CSS</h5>
                        <p class="card-text">Styling web pages</p>
                        <a href="#" class="btn btn-success">Learn</a>
                    </div>
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap</h5>
                        <p class="card-text">Fast UI development</p>
                        <a href="#" class="btn btn-warning">Learn</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <div class="container my-5">
        <h2>Alerts</h2>
        <div class="alert alert-success">Success alert</div>
        <div class="alert alert-danger">Error alert</div>
    </div>
 
    <div class="container my-5">
        <h2>Forms</h2>
        <form>
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control">
            </div>
 
            <div class="mb-3">
                <label class="form-label">Password</label>
                <input type="password" class="form-control">
            </div>
 
            <button class="btn btn-primary">Submit</button>
        </form>
    </div>
 
    <div class="container my-5">
        <h2>Table</h2>
 
        <table class="table table-bordered table-striped">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
            <tr>
                <td>Amit</td>
                <td>20</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>22</td>
                <td>Mumbai</td>
            </tr>
        </table>
    </div>
 
    <div class="container my-5 text-center">
        <h2>Modal</h2>
        <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>
    </div>
 
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
 
                <div class="modal-header">
                    <h5 class="modal-title">Bootstrap Modal</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
 
                <div class="modal-body">
                    This is a modal example.
                </div>
 
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
 
            </div>
        </div>
    </div>
 
    <footer class="bg-dark text-white text-center p-3">©2026 Shoyeb
</footer>
</body>
 
</html>