Gautam Vaja for CodeParrot

Posted on Sep 30 • Edited on Oct 3 • Originally published at codeparrot.ai

Explore bootstrap 5 components

#webdev #css #bootstrap #ui

Bootstrap 5, one of the most popular front-end frameworks, brings a range of useful components and utilities that help developers build responsive and visually appealing websites quickly.

Cards

Cards are a versatile component in Bootstrap 5 that allow you to display content in a clean, organized manner. They are perfect for showcasing information in a way that's both aesthetically pleasing and functional.

Basic Structure

A basic card consists of a container with the class .card, containing elements like the card header, body, and footer.

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Customizing Cards

You can customize cards extensively:

Images: Add images using .card-img-top or .card-img-bottom.
Layouts: Use card decks, groups, or columns for different layouts.
Colors: Utilize contextual classes like .bg-primary, .text-white.

<div class="card text-white bg-primary mb-3">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Text content goes here.</p>
  </div>
</div>

Use Cases

User Profiles: Display user information with an avatar.
Product Listings: Showcase products with images and descriptions.
Blog Posts: Summarize articles with titles and excerpts.

Datepicker

While Bootstrap 5 doesn't include a native datepicker, integrating one is straightforward using third-party libraries like Tempus Dominus or Bootstrap Datepicker.

Implementation

First, include the required CSS and JS files:

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

<!-- Vanilla JS Datepicker CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/js-datepicker/dist/datepicker.min.css"
  rel="stylesheet"
/>

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

<!-- Vanilla JS Datepicker -->
<script src="https://cdn.jsdelivr.net/npm/js-datepicker/dist/datepicker.min.js"></script>

Then, initialize the datepicker:

<div class="container mt-4">
  <label for="datepicker" class="form-label">Select a Date:</label>
  <input type="text" id="datepicker" class="form-control" placeholder="Choose a date" />
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const picker = datepicker('#datepicker', {
      formatter: (input, date) => {
        const value = date.toLocaleDateString();
        input.value = value;
      },
    });
  });
</script>

Customization Options

Formats: Customize the date format.
Start and End Dates: Limit the selectable date range.
Themes: Apply different styles.

Sidebar

Sidebars are essential for navigation, especially in complex web applications.

Creating a Responsive Sidebar

You can create a responsive sidebar using Bootstrap's grid system and collapse component.

<nav id="sidebarMenu" class="collapse d-lg-block sidebar">
  <div class="position-sticky">
    <ul class="nav flex-column">
      <!-- Menu Items -->
    </ul>
  </div>
</nav>

Interactive Sidebars

Enhance user experience by adding interaction:

Hover Effects: Use CSS to highlight menu items.
Collapsible Menus: Implement sub-menus that expand on click.
Icons: Incorporate icons using Font Awesome or Bootstrap Icons.

Checkbox

Checkboxes allow users to select multiple options from a set.

Styling Checkboxes

Bootstrap 5 provides custom checkbox styles:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

Checkbox Groups

Group checkboxes for better organization:

<div class="form-group">
  <label>Select Options:</label>
  <div class="form-check">
    <!-- Checkbox Items -->
  </div>
</div>

Footer

Footers are crucial for providing additional navigation and information.

Designing Footers

Create a simple footer:

<footer class="bg-light text-center text-lg-start">
  <div class="text-center p-3">
    © 2023 Your Company
  </div>
</footer>

Sticky Footers

Make the footer stick to the bottom:

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

<body class="d-flex flex-column">
  <div id="page-content">
    <!-- Main content -->
  </div>
  <footer id="sticky-footer" class="bg-dark text-white-50">
    <div class="container text-center">
      © 2023 Your Company
    </div>
  </footer>
</body>

Conclusion

Mastering these Bootstrap 5 components can significantly enhance the functionality and aesthetics of your web projects. By understanding how to customize and implement Cards, Datepickers, Sidebars, Checkboxes, and Footers, you can create user-friendly and visually appealing websites. Keep experimenting with different styles and configurations to find what works best for your specific needs.

Further Reading: