DEV Community

Cover image for Web Dev Day 5: Bootstrap Guide
Bhupesh Kumar
Bhupesh Kumar

Posted on

Web Dev Day 5: Bootstrap Guide

#webdev #bootstrap #programming #css

What is Bootstrap?

Bootstrap is a popular open-source front-end framework used for developing responsive and mobile-first websites quickly and efficiently. It was originally developed by Twitter and released in 2011.

Key Features

  1. Responsive Grid System: A flexible 12-column layout system for creating responsive designs.
  2. Pre-styled Components: Includes a wide range of UI components like buttons, forms, navbars, modals, and more.
  3. CSS and JavaScript: Provides CSS styles and JavaScript plugins for enhanced functionality.
  4. Customization: Easily customizable using Sass variables and built-in themes.
  5. Cross-browser Compatibility: Ensures consistency across modern browsers.
  6. Extensive Documentation and Community Support: Large community and comprehensive documentation available.

Basic Example

A simple Bootstrap layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">Column 1</div>
            <div class="col-md-4">Column 2</div>
            <div class="col-md-4">Column 3</div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Bootstrap simplifies the process of designing responsive, visually appealing web pages with its ready-to-use components and customization options.

Benefits of Bootstrap

  1. Responsive Design

    • Mobile-first approach ensures websites look great on all devices.
    • 12-column grid system for flexible layouts.

  2. Pre-styled Components

    • Consistent design with buttons, forms, navbars, and more.
    • Saves time on custom styling.

  3. Customizable

    • Easily modify default styles with Sass variables.
    • Supports custom themes.

  4. Cross-browser Compatibility

    • Ensures uniform appearance across all major browsers.

  5. Comprehensive Documentation

    • Detailed documentation with examples and code snippets.
    • Large community support.

  6. Built-in JavaScript Plugins

    • Enhances functionality with interactive components like modals and carousels.

  7. Consistency

    • Standardized UI elements for a uniform look and feel.

  8. Speed of Development

    • Rapid prototyping with ready-to-use components.
    • Reusable components across projects.

  9. Integration with Other Tools

    • Compatible with modern frameworks (React, Angular, Vue.js).
    • Works with build tools like Webpack and Gulp.

  10. Accessibility

    • Supports ARIA attributes for better accessibility.

Bootstrap helps developers build responsive, consistent, and visually appealing websites quickly and efficiently.

Using Bootstrap

1. Include Bootstrap in Your Project

Using a CDN:

  • Quick and easy way to get started.
  • Add Bootstrap CSS and JS files via a CDN link in your HTML.

Using NPM:

  • Install Bootstrap for projects using Node.js.
  • Import Bootstrap CSS and JS in your project files.

2. Create a Basic Layout

  • Utilize Bootstrap's responsive grid system.
  • Structure your layout using containers, rows, and columns to create a responsive design.

3. Use Bootstrap Components

  • Buttons: Pre-styled button classes for various styles (e.g., btn-primary, btn-secondary).
  • Forms: Form controls with built-in validation styles.
  • Navbar: Responsive navigation bar components.

4. Customize Bootstrap

Using Sass:

  • Modify Bootstrap's default styles with Sass variables.
  • Create a custom Sass file to override Bootstrap variables and compile it into custom CSS.

Bootstrap simplifies web development with its responsive grid system, pre-styled components, and extensive customization options. It allows for rapid development of consistent and visually appealing websites while ensuring responsiveness and cross-browser compatibility.

Container

In Bootstrap, a container is a layout element used to contain and organize content within a web page. There are two types: .container for fixed-width content and .container-fluid for full-width content.

  • .container: Provides a fixed-width container for content. Ideal for standard layouts.
  • .container-fluid: Creates a full-width container that spans the entire viewport. Suitable for wide layouts or sections.

Usage:

  • Structuring Content: Wraps content to ensure consistent spacing and alignment.
  • Responsive Design: Adapts to different screen sizes for readability and aesthetics.
  • Grid System Alignment: Works seamlessly with Bootstrap's grid system for responsive layouts.

Example:

<div class="container">
    <!-- Fixed-width content -->
</div>

<div class="container-fluid">
    <!-- Full-width content -->
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap's container classes provide a framework for creating structured, responsive web layouts with ease.

Buttons

Bootstrap buttons come in various styles and sizes, making it easy to add interactive elements to your website. Here’s a quick rundown:

  • Styles: Bootstrap provides styles for primary, secondary, success, warning, danger, info, light, and dark buttons. There are also outline buttons for a different look.
  • Sizes: Buttons can be large, medium, small, or block-level (full-width).
  • Usage: Use primary buttons for main actions, secondary buttons for alternate actions, and other styles for specific contexts or emphasis.

Example:

<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-outline-danger">Danger</button>
Enter fullscreen mode Exit fullscreen mode

Bootstrap buttons provide consistency and responsiveness, making them a convenient choice for web development.

Badges

Bootstrap badges are small components used to highlight information or provide visual feedback. Here's a quick summary with examples:

Features: Badges offer visual indicators, flexible usage, and customization options.

Example:

<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-light">5</span>
</button>

<a href="#" class="btn btn-success">
    Inbox <span class="badge badge-pill badge-danger">10</span>
</a>

<h4>Important <span class="badge badge-warning">!</span></h4>
Enter fullscreen mode Exit fullscreen mode

Bootstrap badges are versatile and can be added to buttons, links, or headings to display counts, statuses, or other relevant information in a visually appealing manner.

Alert

Bootstrap alerts provide contextual feedback messages to users. Here's a brief summary with examples:

Features: Alerts offer contextual styles, dismissible options, and flexible usage.

Example:

<div class="alert alert-success" role="alert">
  Success alert!
</div>

<div class="alert alert-warning" role="alert">
  Warning alert!
</div>

<div class="alert alert-danger" role="alert">
  Error alert!
</div>

<div class="alert alert-info" role="alert">
  Info alert!
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap alerts are versatile and can be easily integrated into any part of a webpage to provide feedback or notifications to users.

Button Group

Bootstrap button groups allow you to group buttons together for better organization and appearance. Here's a quick summary with an example:

Features: Button groups organize multiple buttons, ensuring visual consistency and responsive behavior.

Example:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap button groups help improve user interfaces by grouping related buttons together in a visually consistent manner.

Navbar

Bootstrap navbar is a responsive navigation component that's easy to customize. Here's a quick overview with an example:

Features: Navbar adjusts for different screen sizes, supports various styles, and accommodates flexible content.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

Bootstrap navbar simplifies navigation setup with its responsive design and easy-to-use components.

Card

Bootstrap cards are versatile containers for displaying content. Here's a concise summary with an example:

Features: Cards offer flexibility, responsiveness, and customization options.

Example:

<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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap cards simplify content presentation with their adaptable design and numerous customization possibilities.

Grid

Bootstrap's grid system is a flexible way to create responsive layouts. Here's a quick summary with an example:

Features: Responsive, based on a 12-column layout, and easy to use.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap's grid system simplifies layout creation, providing flexibility and responsiveness across devices.

Form Controls

Bootstrap's form controls offer pre-styled elements for easy form creation. Here's a quick summary with examples:

Features: Pre-styled form inputs, selects, textareas, and more for consistent appearance and validation states.

Example:

<form>
  <div class="form-group">
    <label for="exampleInputUsername">Username</label>
    <input type="text" class="form-control" id="exampleInputUsername" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Bootstrap's form controls simplify form creation and enhance user experience with consistent styling and validation states.

Select in Forms

Bootstrap's select dropdowns offer pre-styled options for form selections. Here's a brief summary with an example:

Features: Styled select dropdowns for consistent appearance and responsiveness.

Example:

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Bootstrap select dropdowns enhance form elements with consistent styling and usability.

Checkbox and Radio in Form

Bootstrap's pre-styled checkboxes and radio buttons enhance form inputs with consistent styling and functionality. Here's a brief summary with examples:

Checkbox Example: 

<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>
Enter fullscreen mode Exit fullscreen mode

Radio Button Example: 

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap's styled checkboxes and radio buttons improve the appearance and usability of form inputs.

Form Layout

Bootstrap's form layout system enables the creation of structured and responsive forms with ease. Here's a concise overview with an example:

<form>
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="inputEmail" class="form-label">Email</label>
      <input type="email" class="form-control" id="inputEmail">
    </div>
    <div class="col-md-6">
      <label for="inputPassword" class="form-label">Password</label>
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Bootstrap's form layout system simplifies the creation of responsive and structured forms, ensuring consistency and usability across different screen sizes.

Bootstrap Website: https://getbootstrap.com/docs/5.3/getting-started/introduction/

Top comments (0)

Read next

mdarifulhaque profile image

2924. Find Champion II

MD ARIFUL HAQUE -

kaja_uvais_a8691e947dd399 profile image

Create a Infinite Scrolling Marquee with HTML and CSS

Kaja Uvais -

jfelipegarcia profile image

While Loops

Juan Garcia -

bst53 profile image

JavaScript Higher-Order Functions Made Easy: Learn with a Real-Life Example! 💡

Burhanuddin S. Tinwala -