Open In App

Bootstrap 5 Approach

Last Updated : 15 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Approach simplifies customization and extension, providing principles and strategies for tailored development. It manages viewport behavior, ensuring optimal rendering on diverse devices. By setting viewport width and scale, enables responsive design, adjusting content for optimal viewing.

Bootstrap 5 facilitates the different approaches to customizing the design of the webpage which are described below:

ConceptDescription
ResponsiveBootstrap’s styles apply progressively with min-width queries for mobile-first responsiveness.
ClassesBootstrap primarily uses classes for selectors, simplifying overrides and variations.
Z-index ScaleUtilizes two z-index scales for component elements and overlays like modals and tooltips.
UtilitiesUtility classes combat CSS bloat, optimize performance, and reduce the need for custom CSS.
Flexible HTMLFocuses on single classes, avoids immediate children selectors for flexible component implementation.

Example 1: In this example, we use a responsive navbar and a section with introductory text. It utilizes Bootstrap 5 classes for styling and responsiveness.

HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                   initial-scale=1.0"
        />
        <link
            rel="stylesheet"
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        />
        <title>Responsive Navbar</title>
    </head>

    <body>
        <nav
            class="navbar navbar-expand-lg 
                   navbar-light bg-light"
        >
            <div class="container">
                <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 ml-auto"
                    >
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >
                                Home
                            </a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >
                                About
                            </a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >
                                Services
                            </a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                            >
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <header
            class="bg-secondary text-white text-center py-3"
        >
            <h2>Bootstrap 5 Example</h2>
        </header>

        <section class="container mt-5">
            <div class="row">
                <div class="col-md-6">
                    <h2>Introduction</h2>
                    <p>
                        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
                        really a nice set of
                        predefined CSS codes.
                        Bootstrap uses different
                        types of classes to make
                        responsive websites.
                        Bootstrap 5 was officially
                        released on 16 June 2020
                        after several months of
                        redefining its features.
                    </p>
                </div>
            </div>
        </section>
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">

        </script>
    </body>
</html>

Output:

Bootstrap 5 Approach Example Output

Example 2: In this example, we are demonstrates a responsive grid layout using Bootstrap 5. It divides the page into two columns on medium screens and larger, displaying two cards side by side, each containing title and content.

HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <link
            rel="stylesheet"
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        />
        <title>Responsive Grid Layout</title>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div
                        class="card bg-secondary"
                    >
                        <div class="card-body">
                            <h5
                                class="card-title"
                            >
                                Card 1
                            </h5>
                            <p class="card-text">
                                This is the
                                content of card 1.
                            </p>
                            <p class="card-text">
                                Bootstrap is a
                                free and
                                open-source
                                collection of CSS
                                and
                                JavaScript/jQuery
                                code used for
                                creating dynamic
                                websites layout
                                and web
                                applications.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card bg-primary">
                        <div class="card-body">
                            <h5
                                class="card-title"
                            >
                                Card 2
                            </h5>
                            <p class="card-text">
                                This is the
                                content of card 2.
                            </p>
                            <p class="card-text">
                                Bootstrap is a
                                free and
                                open-source
                                collection of CSS
                                and
                                JavaScript/jQuery
                                code used for
                                creating dynamic
                                websites layout
                                and web
                                applications.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Output:

Bootstrap 5 Approach Example Output



Previous Article
Next Article

Similar Reads

Bootstrap 5 Approach z-index Scales
Bootstrap Z-index scales provide a new axis to arrange the content on the screen. It plays a very important role in how components interact with one another. A component with a higher z-index value is always in front of the component with a lower z-index value. Z-index in Bootstrap is of two types Component Elements and Overlay Elements. Component
2 min read
Bootstrap 5 Approach Classes
Bootstrap 5 is a popular front-end framework used by web developers to create responsive and mobile-first websites. One of the most useful features of Bootstrap 5 is the approach classes. Bootstrap 5 Approach Classes are a new set of classes introduced in Bootstrap 5 that allow developers to style components in a more flexible and customizable way.
2 min read
Bootstrap 5 Approach z-index Scales Component Elements
Bootstrap z-index allows providing different axis to the components on the screen. It helps in defining the order of the overlapping elements. It sets the position or order of the elements along the z-axis. An element with a greater z-index will appear before the others. Component elementsPre-built elements like button groups, input groups, and pag
2 min read
Bootstrap 5 Approach Responsive
Bootstrap 5 responsive approach ensures web page visibility across devices. Media queries, such as min-width and occasionally max-width, are used to address responsiveness. Efforts are made to minimize reliance on media queries while accommodating complex component needs. Bootstrap 5 Approach Responsive: MixinDescription@include media-breakpoint-on
2 min read
Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc. Steps: Make sure the Angular CLI present in your system if not then run the command in the terminal to do so. npm install -g @angular/cli Create a new project on visual studio code by running the code ng new project-
2 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP,
2 min read
Difference between Bootstrap 4 and Bootstrap 5
What is Bootstrap? It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc. bootstrap helps to design the frontend. Bootstrap has made the work for developers easie
3 min read
Bootstrap Cheat Sheet - A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens. What is Bootstrap Cheat Sheet?A
27 min read
Best approach for “Keep Me Logged In” using PHP
We all have noticed the "Keep Me Logged In" checkbox in most of the websites we log in to. There are different ways and approaches to achieve this through code. The best approach among those is saving the User information in the user browser as cookies. Basically, we have to store both the Username and the Password in the user's browser as cookies.
2 min read