Bootstrap 5

Last Updated : 27 Sep, 2023

Read

Discuss

Courses

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features.

Bootstrap5 Tutorial

Benefits of using Bootstrap:

Bootstrap makes it simple to get started with coding. Using Bootstrap, even if you don’t know much about coding, you can create an appealing landing page. The sole requirement is that you have some CSS and HTML experience.
Having a mobile-responsive website has become a requirement, and with Bootstrap on your side, this work is a breeze. It offers a fluid grid layout that adjusts to the size of the screen.
In Bootstrap, you’ll find a variety of templates. If you don’t like them, you can make your own using the CSS file. Furthermore, if you don’t have time to start from scratch, you can combine the customization with existing code to improve functionality.
One of the most notable benefits of Bootstrap is that it allows you to create landing pages that are tailored to the needs of your target audience. It makes recommendations for aspects like as pictures and call-to-action (CTA) that are most appealing to your target demographic and improve user experience.
Sliders, drop-down menus, tabs, and other interactive components are needed to make the pages more engaging. With Bootstrap on your side, you can quickly add these components because the Bootstrap package includes various JavaScript plugins.
On the Bootstrap website, there is easy-to-read and efficient documentation. The framework is simple, and the documentation makes UI design much easier.
One of the most significant benefits of utilising Bootstrap is its cross-browser compatibility. Heave a breath of relief when it comes to presenting your landing page across numerous browsers with Bootstrap by your side.

What’s new in Bootstrap 5?

jQuery Support: In Bootstrap 5, there is no need for jQuery library anymore that makes it easier to use. You can simply use Bootstrap without it.
CSS custom properties: Bootstrap 5’s generated CSS has about two dozen CSS custom properties, with dozens more on the pipeline for greater component customisation.
Improved Grid System: The grid system in Bootstrap 5 layouts and aligns information using a sequence of containers, rows, and columns. It is entirely responsive and developed with flexbox.
Improved Documentation: More information has been added to the documentation, particularly when it comes to customisation. Bootstrap 5 has a fresh look, as well as improved customization options.
Improved form Controls: In Bootstrap 5, all custom form controls are now customised. All radio buttons, checkboxes, files, ranges, and other controls have the same appearance and behaviour across browsers.
Bootstrap 5 Adds Utilities API: In Bootstrap 5, they’ve gone with an API approach with a new Sass language and syntax. This gives you the ability to build new utilities while also allowing you to remove or change the defaults.
New Bootstrap Icon Library: With almost 1,300 icons, Bootstrap now has its own open source SVG icon collection. Although it was created specifically for the framework’s components, you can use it on any project.

What has been dropped?

Color utility classes(For example, .bg-primary) are used instead of Badge color classes(for example, badge primary).
The .rounded-pill class is introduced to give a pill style to a badge instead of using the .badge-pill badge class.
Display Utility Classes like .d-block has replaced .btn-block button class.
The jumbotron component has been dropped as the same results can be achieved using utility classes.
Popper’s configuration is used instead of the flip option for dropdown components.
Media Components have been dropped as the same results can be achieved using utility classes.
.pre-scrollable has been dropped owing to less usage.
.text-justify has been dropped owing to responsiveness issues.
Support for IE has been completely dropped.

Bootstrap 5 CDN: You can import Bootstrap 5 from a CDN (Content Delivery Network), in case you don’t want to install yourself. 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>

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

npm install bootstrap

Here is an example to illustrate Bootstrap 5:

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;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </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: