How to use Bootstrap in a Project?
- HTML and additional CSS classes from Bootstrap are what Bootstrap components use.
- If we want Bootstrap in our project, we have options. we can download the compiled CSS and JavaScript files or use something called a content delivery network (CDN).
- The way to use Bootstrap classes is by putting them right on the HTML elements. That helps with style and setting up things.
Bootstrap can set up in several ways:
By using npm:
One way is using npm (Node Package Manager). To do this, go to your project folder in the terminal(or cmd). Run the command npm install bootstrap. Bootstrap will automatically download and set up in your project.
npm install bootstrap
to install with npm we have to run the following command, this will install bootstrap.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Downloaded By NPM</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-danger text-center">Bootstrap Downloaded By NPM</h1>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
By downloading files:
- Another option is Download Bootstrap by manually from its official site (https://getbootstrap.com/). Then, add it to your project’s HTML file with a relative path.
- Download Bootstrap from https://getbootstrap.com/docs/5.3/getting-started/download/ Compiled CSS and JS there was a zip file, so extract it and include it in your project directory.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct manually Download example</title>
<link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-success text-center">The manually Download example</h1>
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
By using CDN:
- You can also use Bootstrap via a CDN (Content Delivery Network). To do this, add the Bootstrap CSS and JavaScript CDN links to the <head> section of your HTML file.
- The latest bootstrap cdn can found in the bootstrap website https://getbootstrap.com/docs/5.3/getting-started/introduction/ .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap CDN example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-info text-center">bootstrap CDN example</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: Each method is easy and straightforward. You can decide what suits you best depending on the project’s requirements!
Getting Started with Bootstrap
Bootstrap is a popular and open-source tool for building websites and web apps that work great on any device. It provides a range of ready-to-use HTML, CSS, and JavaScript components. Like buttons, forms, and navigation bar, etc. These elements can be put right into any project.
Bootstrap’s main use is to make building user interfaces easier and quicker. It provides uniform and flexible tools that suits various devices and screen sizes. Bootstrap uses a flexible grid system. This system allows developers to make layouts that adjust themselves to different screen sizes.
Contact Us