DEV Community

Cover image for Bootstrap
Rakshambika
Rakshambika

Posted on

Bootstrap

#webdev #vscode

Bootstrap – The Most Popular CSS Framework

What is Bootstrap?

Bootstrap is a free and open-source front-end framework used to create responsive and mobile-friendly websites quickly. It provides ready-made CSS classes and JavaScript components that help developers design websites without writing extensive CSS from scratch.

Bootstrap was originally developed by Twitter and is now one of the most widely used frameworks for web development.

Why Use Bootstrap?

Before Bootstrap, developers had to write large amounts of CSS to style websites. Bootstrap simplifies this process by providing pre-built components and utility classes.

Advantages of Bootstrap

  • Faster website development
  • Mobile-first responsive design
  • Consistent styling across browsers
  • Easy-to-use grid system
  • Large collection of ready-made components
  • Extensive documentation and community support

Features of Bootstrap

1. Responsive Grid System

Bootstrap uses a 12-column grid system to create responsive layouts.

Example:

<div class="container">
    <div class="row">
        <div class="col-md-6">Left Section</div>
        <div class="col-md-6">Right Section</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This layout divides the page into two equal columns on medium and larger screens.

2. Pre-built Components

Bootstrap provides many ready-to-use UI components such as:

  • Buttons
  • Cards
  • Navigation Bars
  • Alerts
  • Modals
  • Forms
  • Dropdowns

Example:

<button class="btn btn-primary">
    Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

3. Utility Classes

Bootstrap includes utility classes for:

  • Margins (m-3)
  • Padding (p-3)
  • Text Alignment (text-center)
  • Colors (text-primary)
  • Display (d-flex)

Example:

<p class="text-center text-success">
    Welcome to Bootstrap
</p>
Enter fullscreen mode Exit fullscreen mode

4. Mobile-First Design

Bootstrap follows a mobile-first approach, meaning designs are optimized for mobile devices first and then adapted for larger screens.

How to Add Bootstrap to a Project

The easiest way is using the Bootstrap CDN.

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
Enter fullscreen mode Exit fullscreen mode

For JavaScript components:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Container

A container is used to wrap website content.

Fixed Width Container 

<div class="container">
    Content Here
</div>
Enter fullscreen mode Exit fullscreen mode

Full Width Container 

<div class="container-fluid">
    Content Here
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Button Example 

<button class="btn btn-success">
    Submit
</button>

<button class="btn btn-danger">
    Delete
</button>
Enter fullscreen mode Exit fullscreen mode

Bootstrap provides different button styles using predefined classes.

Bootstrap Card Example 

<div class="card" style="width:18rem;">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Card</h5>
    <p class="card-text">
      This is a simple card component.
    </p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Cards are commonly used for displaying products, blog posts, and user profiles.

Popular Bootstrap Components

Component Purpose
Navbar Navigation menu
Card Display content in a box
Modal Popup dialog
Alert Display messages
Carousel Image slider
Form Controls User input fields
Accordion Expandable content sections

Bootstrap Versions

  • Bootstrap 3
  • Bootstrap 4
  • Bootstrap 5 (Latest widely used version)

Bootstrap 5 removed the dependency on jQuery, making websites faster and more modern.

Top comments (0)