Bootstrap | Notion

So, let’s get started with the Bootstrap. Bootstrap is a frontend toolkit. It is not a proper framework, but mere toolkit which can actually turn out to be extremely helpful most of the times.

What is so special about Bootstrap? Most fascinating thing about Bootstrap is the ease of use. It is extremely easy to use and learn at the same time. Here, I will tell you exactly how to learn bootstrap and use it in your website.

Adding it to your project:

There are couple of ways you can integrate bootstrap into your project, I will tell you the most easy one and your homework is to find other ways:

Here are the steps:

Go to the Bootstrap website and click on Docs (https://getbootstrap.com/docs/5.3/getting-started/introduction/)
Next you will is the Quick Start subheading there. Under which there are 3 parts. Follow all the three parts and you are good to go.
- I am also explaining the three parts here: First make open your index.html file and write the basic template code and there include the following <meta> tag inside your <head>
```
<head>
.
.
.
<meta name="viewport" content="width=device-width, initial-scale=1">
.
.
.
</head>
```
- In step 2 you will see Bootstrap’s CSS and JS. So you need to copy the <link> tag containing CSS and JS files. Place the CSS file (<link> tag) inside <head> and place JS file just before closing the body tag (</body>).
```
CSS file:
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

JS file:
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
```
- And now you can run the project! You can try out by adding different components from their library. For example trying adding Accordian and see if it works.
- This is how your index.html should look like:
- But how to actually use the components:
  - On the bootstrap website only in the left panel if you will scroll down you will see a section named Components and there you will see many different components out there:
  - Click on Accordian and you will be redirected to a page. You should be able to see an example of Accordian on their website and below that they will provide you the code for the same.
  - Copy the code and paste it inside your body tag and run your file in the browser. You should see the exact same thing in your website. Voila! You did it. We finally integrated bootstrap in our website and we finally included our first component in the website. Now try exploring more components and if possible try using most of the components in your website. Try adding buttons, make a form, card, dropdowns, Modal, navbar, etc.
  Also if you face any kind of difficulty in understanding this or anything else regarding web-dev in general reach out to me without any hesitation. Feel free to share your experience, problems, other related stuff so that we can grow together!
  
  Cheers!