What is Bootstrap 5?

Last Updated : 23 Jul, 2025

Bootstrap is a popular open-source front-end framework designed for developing responsive, mobile-first websites and web applications. It provides a collection of HTML, CSS, and JavaScript components that simplify the process of creating modern and responsive designs, making it easier for developers of all skill levels to build good-looking and functional web applications quickly.

bootstrap-5tutorial-copy-2
What is Bootstrap


Key Features of Bootstrap

  • Responsive Design: Bootstrap is built on a mobile-first approach, meaning it scales efficiently across devices of all sizes, from mobile phones to desktops.
  • Predefined Components: Bootstrap offers a wide range of reusable components like buttons, modals, navbars, forms, alerts, and more.
  • Utility Classes: The framework includes various utility classes that allow developers to add styles and functionality directly in HTML.
  • Customization with Sass: Bootstrap is highly customizable through Sass, a powerful CSS preprocessor. Developers can modify variables, maps, and functions to customize the framework’s appearance and behavior according to their project's requirements.
  • JavaScript Plugins: Bootstrap includes a set of JavaScript plugins that enhance the functionality of components, such as modals, carousels, tooltips, and dropdowns.
  • Built-in Accessibility: Accessibility is a key focus of Bootstrap, and the framework includes numerous accessibility enhancements to make sure that web applications are usable by as many people as possible.

History and Development

Bootstrap was originally developed by Mark Otto and Jacob Thornton at Twitter in 2010. It started as an internal tool named Twitter Blueprint before being released as an open-source project in August 2011. Since its public release, Bootstrap has undergone several major updates. Key updates include the introduction of a responsive grid system in Bootstrap 2, a mobile-first approach in Bootstrap 3, and the shift to Sass and flexbox in Bootstrap 4.

Today, Bootstrap continues to be maintained and improved by a dedicated team of developers and an active community. It remains one of the most widely used front-end frameworks in the world, powering millions of websites and applications across the internet.

Getting Started with Bootstrap

To get started with Bootstrap, you can include its CSS and JavaScript files directly from a CDN, or you can download the source files and include them in your project. The basic setup involves linking Bootstrap’s CSS in the <head> of your HTML and adding the JavaScript bundle just before the closing </body> tag. For a more customized setup, you can use package managers like npm to install Bootstrap and integrate it with build tools like Webpack or Parcel.

Key Parameters and Attributes of Bootstrap Components

Bootstrap provides various parameters and attributes that allow developers to control and customize the behavior and appearance of its components. Below is a detailed list of some commonly used parameters and attributes across various Bootstrap components:

1. Grid System Parameters

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. The grid system is fully responsive and uses a set of classes to specify the layout:

  • .container: A fixed-width container that aligns the content within a specific width based on the viewport size. You can also use .container-fluid for a full-width container that spans the entire width of the viewport.
  • .row: A row wrapper that contains columns and helps align them properly within the grid system.
  • .col-{breakpoint}-{size}: Defines column widths and adjusts the layout across breakpoints (e.g., .col-md-6 for a column that takes up 6 out of 12 grid spaces on medium screens).

2. Navbar Attributes

The Navbar component is used for navigation headers:

  • role="navigation": Indicates that the element is a navigation section. This is used primarily for accessibility purposes.
  • .navbar-expand-{breakpoint}: Controls when the navbar expands (e.g., .navbar-expand-lg expands the navbar at the large screen size).
  • .navbar-light / .navbar-dark: Defines the color scheme of the navbar. .navbar-light uses light backgrounds with dark text, while .navbar-dark uses dark backgrounds with light text.
  • .navbar-toggler: A button element used to toggle the collapse and expand of the navbar content in responsive views.

3. Button Attributes

Bootstrap buttons can be easily customized using various classes and attributes:

  • type="button": Defines the button type (button, submit, reset).
  • .btn-{color}: Changes the button color (e.g., .btn-primary, .btn-success, .btn-danger).
  • disabled: Disables the button, preventing any interaction with it.
  • data-bs-toggle="button": Toggles the button's active state. Useful for creating toggle buttons.

4. Modal Component Attributes

Modals are used to display content in a layer above the rest of the page:

  • id="modalId": Unique identifier for targeting and controlling the modal.
  • tabindex="-1": Removes the modal from the focus order, making it non-focusable until it is triggered to display.
  • data-bs-toggle="modal": Used to trigger the modal to open.
  • data-bs-dismiss="modal": Used on buttons or links inside the modal to close it.

5. Tooltip and Popover Attributes

Tooltips and popovers provide additional information on hover or click:

  • data-bs-toggle="tooltip" / data-bs-toggle="popover": Activates a tooltip or popover.
  • title="Tooltip text": Sets the text displayed within a tooltip.
  • data-bs-placement="{top|bottom|left|right}": Defines where the tooltip or popover should be positioned relative to the target element.
  • data-bs-trigger="{hover|focus|click}": Specifies how the tooltip or popover is triggered (hover, focus, or click).

6. Accordion Attributes

Accordions allow you to toggle the visibility of content:

  • data-bs-toggle="collapse": Toggles the accordion panel when clicked.
  • data-bs-target="#collapseId": Points to the specific panel to expand or collapse.
  • aria-expanded="true|false": Indicates whether the accordion panel is expanded or collapsed.

7. Form Control Attributes

Forms and form controls in Bootstrap are designed to provide an intuitive and responsive layout:

  • type="text|email|password|number": Specifies the type of input for form controls.
  • .form-control: Applies styling to input fields, making them responsive and easy to style.
  • placeholder="Enter text": Provides a hint to the user about what input is expected.
  • required: Marks the input as required before form submission.

8. Alert Component Attributes

Alerts provide contextual feedback messages:

  • role="alert": Indicates the element is an alert, improving accessibility.
  • .alert-{color}: Specifies the color and style of the alert (e.g., .alert-success, .alert-warning).
  • data-bs-dismiss="alert": Adds a close button to the alert, allowing it to be dismissed.

9. Responsive Utilities

Bootstrap includes utility classes for responsive display control:

  • .d-{breakpoint}-none: Hides an element at the specified breakpoint (e.g., .d-lg-none hides the element on large screens).
  • .d-{breakpoint}-block: Displays the element as a block at the specified breakpoint.
  • .d-{breakpoint}-inline: Displays the element as an inline element at the specified breakpoint.

Example: Here’s a complete example of a Bootstrap-based webpage, showcasing various Bootstrap components, utility classes, and attributes. This example demonstrates how to use the grid system, navbar, buttons, modals, forms, and more.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS from CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">My Website</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">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</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>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Grid System -->
    <div class="container my-4">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/150" 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>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">Launch modal</button>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <h2>Responsive Grid</h2>
                <p>This section uses Bootstrap's grid system. The grid is responsive and adjusts according to the screen
                    size.</p>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    This is a Bootstrap modal. You can place any content here, including forms, images, and more.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="container my-4">
        <h2>Contact Us</h2>
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <!-- Bootstrap JavaScript from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
        crossorigin="anonymous"></script>
</body>

</html>


Explanation of the Example:

  • Navbar: This section uses Bootstrap's navbar component with expandable and collapsible options for responsive navigation. The navbar-light and bg-light classes define its color scheme.
  • Grid System: The example demonstrates the use of Bootstrap’s grid system with .row and .col-md-* classes to create a responsive layout that adjusts across different screen sizes.
  • Card Component: A Bootstrap card is used to display content in a styled box with an image, title, text, and a button that triggers a modal.
  • Modal: The modal component is a dialog box that is activated by a button within the card. It uses data-bs-toggle="modal" and data-bs-target="#exampleModal" attributes to control its behavior.
  • Form: A simple contact form demonstrates the use of various form controls like text input, email input, password input, and a checkbox, styled using Bootstrap’s .form-control and other utility classes.

Output

Comment

Explore