Here are a few exercises you can try to practice your Bootstrap 5 skills:
Exercise 1: Create a Responsive Navbar
- Create a navbar with a brand logo on the left and navigation links on the right.
- Make the navbar collapse into a burger menu on smaller screens.
- Add a dropdown menu to one of the navigation links.
Exercise 2: Build a Pricing Table
- Create a pricing table with three different pricing plans.
- Each plan should include features, pricing details, and a call-to-action button.
- Ensure that the pricing table is responsive and adjusts its layout on smaller screens.
Exercise 3: Design a Contact Form
- Create a contact form with fields for name, email, subject, and message.
- Add appropriate form validation to the input fields.
- Customize the form elements, such as labels, placeholders, and button styles.
Exercise 4: Develop a Photo Gallery
- Create a grid layout to display a collection of photos.
- Use the Bootstrap card component to display each photo with a title and description.
- Make the photo gallery responsive and ensure that the images adjust their size on different devices.
Exercise 5: Implement a Modal Popup
- Create a button that triggers a modal popup when clicked.
- Customize the modal with relevant content, such as a title, body text, and close button.
- Add additional features to the modal, such as a form or image carousel.
Remember to include the necessary Bootstrap CSS and JavaScript files in your HTML document to utilize Bootstrap components and features. You can also refer to the official Bootstrap documentation and examples for guidance.
These exercises will help you practice using different Bootstrap 5 components and understand how to create responsive and visually appealing web elements. Feel free to modify and expand upon these exercises to further enhance your skills with Bootstrap 5.
Here are some Bootstrap 5 exercises with examples:
Exercise 1: Create a Responsive Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Logo</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 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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Exercise 2: Build a Pricing Table
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Basic</h5>
<h6 class="card-subtitle mb-2 text-muted">$19.99/month</h6>
<ul class="list-unstyled">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<a href="#" class="btn btn-primary">Choose Plan</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Pro</h5>
<h6 class="card-subtitle mb-2 text-muted">$29.99/month</h6>
<ul class="list-unstyled">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<a href="#" class="btn btn-primary">Choose Plan</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Premium</h5>
<h6 class="card-subtitle mb-2 text-muted">$39.99/month</h6>
<ul class="list-unstyled">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<a href="#" class="btn btn-primary">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>Exercise 3: Design a Contact Form
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control"
id="name" placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="subject" class="form-label">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Enter the subject">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>These examples demonstrate how to create a responsive navbar, a pricing table, and a contact form using Bootstrap 5 classes and components. Feel free to customize them further and experiment with different Bootstrap features to enhance your skills with Bootstrap 5.