In this blog post I will be discussing How-To Get Started with using Bootstrap, which is a free front-end framework used for providing faster and easier web development in making enhanced web sites and responsive web page elements. In this blog post I am referring to Bootstrap version 5, which at the time of this writing is the latest greatest version of Bootstrap.
Bootstrap is Mobile First and then upscales to PC secondly. Bootstrap uses Javascript, HTML elements, and CSS properties and therefore it requires the HTML5 doctype protocol. But not to worry, it is very easy to include and use Bootstrap, you mainly just need to make some initiation calls in the HTML5 web pages Head and Body sections, and then call the predefined Bootstrap Class objects within the HTML elements.
Bootstrap is readily available for you to use on your own web site. You can:
In the HTML5 web page you want to use Bootstrap 5 with, add the following lines of script anywhere within that web pages Head section. If you want to use Bootstrap with multiple web pages then you will need to repeat the process and add these links to the Head section of every HTML5 web page you want to use Bootstrap in.
This example links to Bootstrap 5 from an official content network provider. Alternatively, if you have downloaded and installed Bootstrap 5 files onto your web server (or hosted web site location) then simply change the URL address's in the below links to point to your severs copy instead of to the official content network providers copy:
<!-- Latest compiled CSS -->
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel ="stylesheet" crossorigin ="anonymous" >
<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel ="stylesheet" >
In the HTML5 web page you want to use Bootstrap 5 with, add the following lines of script to the very BOTTOM of the Body section. If you want to use Bootstrap with multiple web pages then you will need to repeat the process and add these links to the very BOTTOM of the Body section of every HTML5 web page you want to use Bootstrap in.
Note:, it seems that you could add these links to the HEAD section instead of to the Bottom of the Body section, I have tried it and it appears to still work and function Okay, however according to getbootstrap.com they recommend that these js script lines be added to the Bottom of the Body section instead of to the Head section, therefore this example shows it how they recommend it to be.
This example links to Bootstrap 5 from an official content network provider. Alternatively, if you have downloaded and installed Bootstrap 5 files onto your web server (or hosted web site location) then simply change the URL address's in the below links to point to your severs copy instead of to the official content network providers copy:
<!-- Latest compiled Bootstrap JavaScript -->
<script src ="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js " integrity ="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB " crossorigin ="anonymous" ></script >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js " integrity ="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13 " crossorigin ="anonymous" ></script >
Now that you have included Bootstrap into your web page Head and Body sections, you can now begin to use it to enhance your web page.
Below is an example of a complete HTML5 web page that uses Bootstrap 5 to demonstrate how easy it is to enhance HTML Button elements with:
<!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" />
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" />
<title >Bootstrap Example </title >
<!-- Latest compiled Bootstrap CSS -->
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel ="stylesheet" crossorigin ="anonymous" >
<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel ="stylesheet" >
</head >
<body >
<div class ="container mt-3" >
<h5 >Normal Buttons: </h5 >
<button type ="button" >Button1 </button >
<button type ="button" >Button2 </button >
<button type ="button" >Button3 </button >
<button type ="button" >Button4 </button >
</div >
<br/ >
<div class ="container mt-3" >
<h5 >Bootstrap enhanced Buttons: </h5 >
<button type ="button" class ="btn" >Basic </button >
<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-info" >Info </button >
<button type ="button" class ="btn btn-warning" >Warning </button >
<button type ="button" class ="btn btn-danger" >Danger </button >
<button type ="button" class ="btn btn-dark" >Dark </button >
<button type ="button" class ="btn btn-light" >Light </button >
<button type ="button" class ="btn btn-link" >Link </button >
<input type ="button" class ="btn btn-success" value ="Input" >
<input type ="submit" class ="btn btn-success" value ="Submit" >
<input type ="reset" class ="btn btn-success" value ="Reset" >
</div >
<!-- Latest compiled Bootstrap JavaScript -->
<script src ="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" crossorigin ="anonymous" ></script >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin ="anonymous" ></script >
</body >
</html >
When you run the above example then you should see something similar to the following:
Click Here to open the above Preview into a new window.
My hats off to the people who developed Bootstrap, it is in my opinion that you all have done an outstanding and excellent job, and I for one Thank you.
Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.
| About | Contact Us | Privacy | Terms & Conditions | © 2024 - T&J Divisions, LLC, All Rights Reserved |