HTML & CSS

How to download and Install Bootstrap 5 with basic Template Example

Description:

Continuing the tutorial on learning the Bootstrap CSS framework, this time we will discuss how to download and install Bootstrap 5. In my previous article, I discussed the history and some alternatives to the Bootstrap CSS framework.




Bootstrap 5 Installation:

The term “bootstrap installation” is actually not quite right, because Bootstrap only consists of a collection of CSS and JavaScript files that you just need to download and copy.¬†Still, we need a way to input Bootstrap files, and this is what we’ll cover.

At the time I wrote this tutorial, Bootstrap had just released an update to version 5.3. To download the Bootstrap file, please open the official Bootstrap website at getbootstrap.com, then click the Download button in the middle of the page.

download and Install Bootstrap 5

On the Download page, scroll down a bit until the title “ Compiled CSS and JS “, then click the Download button again

download and Install Bootstrap 5



It will take a few moments to download the bootstrap-5.3.0-dist.zip file (about 1.4 MB in size).

download and Install Bootstrap 5

Please extract this file to a folder. This time I will extract it to the bootstrap folder on drive c:

download and Install Bootstrap 5

There are 2 folders in this file, namely the CSS folder and the js folder. Each folder contains quite a number of files, but we only need 2 of them, namely css\bootstrap.css, and js\bootstrap.bundle.js.



Basic HTML Bootstrap Templates

We already have a Bootstrap file, now let’s test creating an HTML file to access it. Make sure that in the bootstrap folder, there is a CSS folder containing the bootstrap.css file and a js folder containing the bootstrap.bundle.js file.

create an index.html file in the  bootstrap folder, then paste the following code:

<!DOCTYPE html>

<html>

<head>

¬† <meta charset=”UTF-8″>

¬† <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  <title>Welcome to BootStrap Tutorial</title>

¬† <link rel=”stylesheet” href=”css/bootstrap.css”>

</head>

<body>

¬† <div class=”container”>

    <h1>Welcome to BootStrap Tutorial</h1>

  </div>

¬† <script src=”js/bootstrap.bundle.js”></script>

</body>

</html>

The process of importing the CSS file is done from the <link> tag in line 7. Then inside the <body> tag there is an additional <div class=‚ÄĚcontainer‚ÄĚ> tag. The .container class is a default Bootstrap class that I deliberately added to test whether the bootstrap CSS file has been successfully accessed or not. Finally, in line 13 there is a <script> tag for importing the Bootstrap JavaScript file.



After that open the index.html file in a web browser:

download and Install Bootstrap 5

One proof that the Bootstrap CSS code has been successfully accessed is that the “Welcome to BootStrap Tutorial” text is slightly to the center as an effect of the <div class=‚ÄĚcontainer‚ÄĚ> tag. In addition, the text appears in a sans-serif font (a font without “feet”) which when running on Windows 10 will use the Segoe UI font.

Next, to test whether the Bootstrap JavaScript file can also be accessed, write the following code in index.html:

<html>

<head>

¬† <meta charset=”UTF-8″>

¬† <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  <title>Bootstrap Tutorial</title>

¬† <link rel=”stylesheet” href=”css/bootstrap.css”>

</head>

<body>

¬† <div class=”container”>

¬†¬†¬† <h1 id=”myPopover” data-bs-toggle=”popover” data-bs-placement=”bottom”

¬†¬†¬† class=”text-center” title=”Welcome to ProgrammingDigest”

¬†¬†¬† data-bs-content=”welcome to programming Digest Website”>

    Bootstrap Tutorial </h1>

  </div>

¬† <script src=”js/bootstrap.bundle.js”></script>

  <script>

¬†¬†¬† new bootstrap.Popover(document.getElementById(‘myPopover’))

  </script>

</body>

</html>

For now, you may ignore the intent of the program code above. Inside I wrote some new attributes into the <h1> tag as well as a line of JavaScript code at the end of the <body> tag. These are used to create the Popovers effect.




Open it in a web browser, then click on the title “Bootstrap Tutorial”:

download and Install Bootstrap 5

If when clicked a small box appears under the title “Bootstrap Tutorial”, it means that the¬†default Bootstrap file¬†bootstrap.bundle.js can be accessed.¬†But if it doesn’t appear, please check again if there is a typo or the¬†bootstrap.bundle.js¬†file is in another folder.

That’s a discussion on how to download and install Bootstrap 5 files. Basically, we just need to access the CSS and JS files that come with Bootstrap. Next, we will discuss How to create a Button (Button) using bootstrap 5.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button