Getting Start With Bootstrap - A Simple Guide for Beginners

What is Bootstrap?

Bootstrap is a free front-end framework that helps you design websites faster using pre-built CSS and JavaScript components. You can use it to easily create buttons, grids, navigation bars, and layouts that work on all screen sizes.

How to Add Bootstrap to Your Project

1 - Use Bootstrap via CDN (no download needed)

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2- Download Bootstrap

Download the Bootstrap files from getbootstrap.com, then link the CSS and JS files locally.

Bootstrap Grid

The grid system is the foundation of Bootstrap. It divides the page into 12 columns, letting you create flexible layouts easily.

<div class="container">
  <div class="row">
    <div class="col-md-6 bg-primary text-white p-3">Column 1</div>
    <div class="col-md-6 bg-secondary text-white p-3">Column 2</div>
  </div>
</div>

Bootstrap Components

Button Example

<button class="btn btn-danger">Click Me!</button>

Navbar Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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>
</nav>

Responsive Utilities

Bootstrap also offers utility classes to control the visibility and behavior of elements based on screen size.

• .d-none hides an element.

• .d-md-block shows an element only on medium screens and up.

    <div class="d-none d-md-block">Visible on desktop only</div>
    <div class="d-block d-md-none">Visible on mobile only</div>
  

---

Bootstrap makes building websites easier and faster. It’s a great tool for beginners to learn and create good-looking, mobile-friendly pages. Keep practicing, and you’ll get better quickly. Have fun building with Bootstrap!

Happy Coding! 😊