Bootstrap 4 Exercises

Welcome to The Coding College! In this guide, we’ll provide hands-on Bootstrap 4 exercises that will help you solidify your understanding of the framework. Whether you’re a beginner or looking to sharpen your skills, these exercises will help you practice and apply Bootstrap 4 concepts effectively.

Why Practice Bootstrap 4?

Bootstrap 4 is a versatile and widely used front-end framework, but mastering it requires practice. Through exercises, you’ll:

Learn how to use Bootstrap 4 components effectively.
Understand the responsive grid system.
Build reusable, professional-looking designs.
Develop confidence in creating custom layouts.

Getting Started

Before diving into the exercises, ensure you have a basic setup ready:

Bootstrap 4 CDN
Use the following links in your HTML file:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Editor: Use a code editor like VS Code or an online platform like CodePen for testing.
Browser: Ensure you’re testing your design on a modern browser.

Exercise 1: Create a Responsive Grid

Objective: Use the Bootstrap 4 grid system to create a responsive layout.

Instructions:

Create three equal-width columns on large screens (lg).
On smaller screens (sm), stack the columns vertically.

Solution:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-12 bg-primary text-white p-3">Column 1</div>
    <div class="col-lg-4 col-sm-12 bg-secondary text-white p-3">Column 2</div>
    <div class="col-lg-4 col-sm-12 bg-success text-white p-3">Column 3</div>
  </div>
</div>

Exercise 2: Build a Navigation Bar

Objective: Create a responsive navigation bar with Bootstrap 4 classes.

Instructions:

Add a brand logo and three links (Home, About, Contact).
Make the navbar collapse into a hamburger menu on smaller screens.

Solution:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-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>
</nav>

Exercise 3: Create a Form

Objective: Build a contact form with Bootstrap 4 components.

Instructions:

Add fields for Name, Email, and Message.
Include a Submit button with Bootstrap button styles.

Solution:

<div class="container my-5">
  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea class="form-control" id="message" rows="4" placeholder="Enter your message"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Exercise 4: Build a Carousel

Objective: Use the Bootstrap 4 carousel component to create an image slider.

Instructions:

Add three images to the carousel.
Include controls (Previous and Next) for navigation.

Solution:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Exercise 5: Design a Card Layout

Objective: Use the Bootstrap 4 card component to display a set of items.

Instructions:

Create a card with an image, title, text, and a button.
Repeat the card in a grid layout.

Solution:

<div class="container my-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
        <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.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
        <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.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Exercise 6: Add a Toast Notification

Objective: Create a dismissible toast notification.

Instructions:

Add a button to trigger the toast.
Use Bootstrap’s toast component to display the notification.

Solution:

<div class="container my-5">
  <button class="btn btn-primary" onclick="$('#myToast').toast('show')">Show Toast</button>
  <div class="toast" id="myToast" data-delay="3000" style="position: absolute; top: 20px; right: 20px;">
    <div class="toast-header">
      <strong class="mr-auto">Notification</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
    </div>
    <div class="toast-body">
      This is a Bootstrap 4 toast notification!
    </div>
  </div>
</div>

How to Get the Most Out of These Exercises

Customize: Experiment with colors, sizes, and content to make the components your own.
Combine Components: Try integrating multiple components into a single project, like adding a form to a modal.
Responsive Testing: Always check how your designs behave on different screen sizes.

Conclusion

These exercises cover a range of core Bootstrap 4 concepts, from grids and navigation bars to forms and carousels. By practicing these, you’ll gain hands-on experience and develop a solid understanding of the framework.

Why Practice Bootstrap 4?

Getting Started