How to Include Bootstrap 5 in our webpage ?

Published on : July 28,2022

Hi Dev,

In this article we will learn example about bootstrap 5. Let's start…

What is Bootstrap ?

Bootstrap is the one of the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap 5 is the newest version of Bootstrap.

Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts. Bootstrap was originally developed by a designer and a developer at Twitter in mid of 2010. Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint.

You can save a lot of time and effort with Bootstrap. So bookmark this website and continue on.

Tip: Our Bootstrap articles will help you to learn the basic as well as advanced features of the Bootstrap step-by-step through easy-to-understand explanation of every topic. If you're a beginner, start with the basics and gradually move forward by learning a little bit every day.

How to include Bootstrap in out app?

Step 1: Creating a Basic HTML file as bellow

Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as "index.html" on your system folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML File</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Step 2: Making this HTML File a Bootstrap Template

After make this plain HTML file a Bootstrap template, just include the Bootstrap CSS and JS files using their CDN links. Also, you should include JavaScript files at the bottom of the page, right before the closing </body> tag to improve the performance of your website pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap Template Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>

Step 3: Saving and Viewing the File

Now save the file on your desktop as "bootstrap-example-template.html".

To open this file in a web browser, navigate to it, then right click on it, and select your favorite web browser. Alternatively, you can open your browser and drag this file to it.

Adding Bootstrap Localy

Alternatively, you can also download the Bootstrap's CSS and JS files from their official website and include in your project. There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap 5 files from here.

Compiled download contains compiled and minified version of CSS and JavaScript files for faster and easier web development. The compiled version also includes optional JavaScript dependencies such as Popper bundled with Bootstrap JS (bootstrap.bundle.*). Whereas, the source download contains original source files for all CSS and JavaScript, along with a local copy of the docs.

Download and unzip the compiled Bootstrap. Now if you look inside the folders you'll find it contains the compiled CSS and JS files (bootstrap.*), as well as the compiled and minified CSS and JS (bootstrap.min.*). Use the bootstrap.min.css and bootstrap.bundle.min.js files.

Using the minified version of CSS and JS files will improve the performance of your website and saves the precious bandwidth because of lesser HTTP request and download size.

Hope it can help you…

Categories : Bootstrap

Tags : Sass jquery HTML Bootstrap

Praful Sangani

I'm a passionate full-stack developer with expertise in PHP, Laravel, Angular, React Js, Vue, Node, Javascript, JQuery, Codeigniter, and Bootstrap. I enjoy sharing my knowledge by writing tutorials and providing tips to others in the industry. I prioritize consistency and hard work, and I always aim to improve my skills to keep up with the latest advancements. As the owner of Open Code Solution, I'm committed to providing high-quality services to help clients achieve their business goals.