Bootstrap: Boosting the CSS

November 10, 2024

What is Bootstrap

Bootstrap is a popular, lightweight, open source.......framework.
In programmer's term it is a CSS framework that make your website devlopment faster then the plain CSS.

How to use it ?

you can use it by these two methods :
  1. online CDN importing :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  1. by installing it :

you can download it by going to its official website or you can install it by typing this in cmd :

npm i bootstrap

What are the benefits?

benefits????
once you get deep in it you love it more.

  1. it can help in structuring the page.

example:

  <section class="container-fluid">
            <div class="row">
              <div class="col-4"></div>
              <div class="col-4"></div>
              <div class="col-4"></div>
            </div>
          </section>

this will divide the width in 3 equal parts.

  1. Carausel
<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

this code will make a simple carausel that is much interractive and easy to implement.

  1. Responsive support

Using this you can make your website responsive as it have Breakpoints.

and benefits ar goes on because it has really good features.

Quick guide

Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps.

  1. Create a new index.html file , paste this code in that file
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
  1. Include Bootstrap’s CSS and JS. Place the <link>tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle before the closing </body>.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
  1. Hello, world! Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout. Happy coding:)!!!
Copyright © ChetanSharma 2024