What is Bootstrap ?

Last Updated : 03 Apr, 2024

Bootstrap is one of the popular front-end frameworks which has a nice set of predefined CSS codes. The updated version of Bootstrap5 was officially released on 16 June 2020. Bootstrap is a CSS framework that makes mobile-friendly web development and provides responsiveness.

The framework is available for free and can be utilized in two ways either by downloading the zip files and incorporating Bootstrap libraries/modules into the project or by directly including the Bootstrap URL and using the online version.

Bootstrap QuickStart

fvg

Table of Content

Features of Bootstrap
Reason to learn Bootstrap?
Bootstrap Components
Bootstrap Integration Techniques
Advantages and Disadvantages

Features of Bootstrap

Bootstrap is the Fastest and Easiest way to create web pages.
Bootstrap is widely used to create Platform-independent web pages.
Bootstrap is popular for creating Responsive web pages.

Reasons to learn Bootstrap?

Using pre-styled components makes development faster.
Bootstrap is based on the mobile-first concept that works well on all screen sizes.
Bootstrap makes it easy to Use the grid system for a well-organized and responsive page layout without complex coding.
Bootstrap offers pre-built components and styles, making projects faster to complete.

Bootstrap Components

The table below illustrates the Bootstrap Components.

Component	Description
Bootstrap Containers	Containers are used to create a responsive fixed-width layout.
Bootstrap Colors	Bootstrap provides a variety of color classes.
Bootstrap Text Colors	Text Colors Classes are used for changing text color.
Bootstrap Responsive Columns	Grid system for creating responsive layouts.
Bootstrap Columns	Bootstrap offers different available column classes that can be utilized to manage the widths of non-grid elements.
Bootstrap Tables	Styled and responsive HTML tables.
Bootstrap Alerts	Displaying contextual feedback messages.
Bootstrap Buttons	Pre-styled buttons with various options.
Bootstrap Cards	Flexible and extensible content containers.

Example 1: Here is an example to illustrate Bootstrap 5 styling including, Cards, Container, buttons, colors, and text-colors.

HTML

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

<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <div class="container">
        <div class="card my-4 mx-auto" 
             style="width:200px">
            <div class="card" style="width:200px ">
                <img class="card-img-top" src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/504/Web/Content/DSA-to-Dev_1705410853.webp"
                     alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">
                        DSA to Dev:
                        A Complete Guide
                    </h4>
                    <p class="card-text">
                        Developer Guy love to develop
                        front-end and back-end
                    </p>
                    <a href="https://www.geeksforgeeks.org/" 
                       class="btn btn-success mx-4">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Output

Bootstrap Integration Techniques

Bootstrap can be integrated into our project either through CDN links or by using package managers like npm.

Method 1: Using Bootstrap 5 CDN

You can import Bootstrap 5 from a CDN (Content Delivery Network). You can get CDN support for Bootstrap’s CSS and JavaScript.

<!-- Compiled CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Method 2: Using Bootstrap 5 NPM

You can also get Bootstrap 5 via NPM(Node Package Manager).

npm install bootstrap

Example 2: Here is an example to illustrate Bootstrap 5 styling including, colors, text-color, and buttons.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
</head>

<body>
    <div style="text-align: center;width: 600px;"></div>
    <div style="width: 600px; height: 200px;
                margin:20px;text-align: center;">
        <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-danger">
            Danger
        </button>
        <button type="button" class="btn btn-warning">
            Warning
        </button>
    </div>
</body>

</html>

Output:

Output

Advantages and Disadvantages

Advantages

Large and active community support.
Responsive features make it easy to create mobile-friendly websites without extra custom coding and media queries.
Bootstrap offers efficient web development with its pre-designed components and responsive grid system.

Disadvantages

Bootstrap is beginner-friendly, but learning all its features and utility classes may take time.
Due to the large file size, Bootstrap impacts website performance resulting in faster load times.
Websites developed only with Bootstrap may have a generic appearance, and extra effort may be needed for a distinct look.

Suggest improvement

What is Bootstrap Container ?

Share your thoughts in the comments