Computers & Internet

Getting Started with Bootstrap: Building Your First Responsive Website

By factober Updated on March 12, 2024

Bootstrap is a popular front-end framework that simplifies the process of building responsive and visually appealing websites. Bootstrap provides an easy and straightforward way to design any kind of website. From simple blogs to complicated dashboards, everything is one tip away with Bootstrap.

In this beginner-friendly tutorial, we’ll explore the basics of Bootstrap and guide you through the process of creating your first responsive website.

Prerequisites:

No prior knowledge of Bootstrap is required, but it’s recommended to have a basic understanding of HTML and CSS.

Setting Up Bootstrap:

To get started, let’s include Bootstrap in our HTML document using CDN:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Factober Bootstrap Sample</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>It, Works!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Creating a Responsive Layout:

Bootstrap’s grid system allows us to create responsive layouts easily. Let’s create a simple layout with rows and columns:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Content here -->
    </div>
    <div class="col-md-6">
      <!-- Content here -->
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <!-- Content here -->
    </div>
    <div class="col-md-6">
      <!-- Content here -->
    </div>
  </div>
</div>

Adding a Navigation Bar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">My Website</a>
    <!-- Add your navigation links here -->
  </div>
</nav>

Sample

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Showcasing Content with Cards:

Bootstrap cards are versatile containers for displaying content. Let’s create some cards to showcase products or services:

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Sample

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

These are some of the components people use for making responsive website. Now, here are some more components for improvising your cool website with Bootstrap Framework.

Additional Bootstrap Components:

Bootstrap offers a wide range of components to enhance your website. Let’s explore some of them:

Accordion:

<div id="accordion">
  <!-- Add accordion items here -->
</div>

Accordion Sample:

This sample accordion will provide information about top animes.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        One Piece
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        One Piece is a long-running anime and manga series written and illustrated by Eiichiro Oda. It follows the adventures of Monkey D. Luffy and his pirate crew as they search for the legendary One Piece treasure.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Naruto
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Naruto is a Japanese manga series written and illustrated by Masashi Kishimoto. It follows the story of Naruto Uzumaki, a young ninja who seeks recognition from his peers and dreams of becoming the Hokage, the leader of his village.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Attack on Titan
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Attack on Titan is a Japanese manga series written and illustrated by Hajime Isayama. It depicts a world where humanity resides within enormous walled cities to protect themselves from the Titans, gigantic humanoid creatures.
      </div>
    </div>
  </div>
</div>

Alerts

The Alert component in Bootstrap serves as a versatile tool for providing immediate feedback to users, conveying important messages, and enhancing accessibility.

With its visually distinct styles and responsive design, alerts offer a seamless way to communicate success, warnings, errors, or general information within web applications.

By integrating alerts, developers can ensure a user-friendly experience while effectively communicating key information to users.

<div class="alert alert-primary" role="alert">
  The sky whispered secrets to the trees, and the leaves danced in delight.
</div>
<div class="alert alert-secondary" role="alert">
  In the quiet of the night, stars twinkle like diamonds scattered across velvet.
</div>
<div class="alert alert-success" role="alert">
  A single drop of rain, a symphony on the windowpane, nature's lullaby.
</div>
<div class="alert alert-danger" role="alert">
  Flames lick the darkness, painting shadows on the walls, a dance of destruction.
</div>
<div class="alert alert-warning" role="alert">
  The sun peeks over the horizon, chasing away the night, warming the earth with golden hues.
</div>
<div class="alert alert-info" role="alert">
  Whispers of the ocean echo in seashells, tales of ancient voyages and forgotten treasures.
</div>
<div class="alert alert-light" role="alert">
  Soft petals unfurl at dawn's gentle touch, a floral symphony in hues of pastel.
</div>
<div class="alert alert-dark" role="alert">
  Shadows linger in forgotten corners, where secrets sleep and mysteries await discovery.
</div>

Badge:

<span class="badge bg-primary">New</span>

Breadcrumb:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Buttons:

You can use Bootstrap classes for Buttons with ready-made classes.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Group:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Carousel:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <!-- Add more carousel items here -->
  </div>
</div>

Sample for Carousel

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide Label</h5>
        <p>Some description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide Label</h5>
        <p>Some description for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third Slide Label</h5>
        <p>Some description for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

There is so much that can be achieved with Bootstrap. We'll have look on that later. For now kindly, try these samples and let's know what did you learn, publish your sites and let's know.