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.
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
<!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://email@example.com/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <!-- Bootstrap JS Bundle with Popper --> <script src="https://firstname.lastname@example.org/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.
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
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