Responsive website using Bootstrap 5 and CSS Media queries

By Shuvranil Mondal

In this project, we are going to learn how to make a responsive website using Bootstrap 5 and CSS media queries.

What is Bootstrap?

Bootstrap is nothing but it is a CSS open-source framework. It is generally used to make the website visually good on every device. It is also used for mobile-first front-end web development and It contains CSS- and JavaScript-based design templates.

what is CSS media query?

It is a very useful and powerful feature in CSS3. It is used to render HTML elements according to different conditions such as screen resolution.

Features of my website:

- Well-Formatted Content That Is Easy to read.

- Mobile Compatibility.

- First and optimze

- Single Page Website

- Elements  filtration feature

- Smooth animation

Steps :

- First we have to incert this two Bootstrap JavaScript plugins in our html head tag.

script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">/script

script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous">/script

- After that we need to link Bootstrap stylesheets in our html head tag to load their CSS.

link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"

- Here is my media qurey code 

@media (max-width: 700px) {
  html {
    font-size: 50%;
  }
  .navbar .cont {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .navbar .cont ul.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navbar .cont ul.navbar-nav .nav-item a {
    font-size: 2rem;
  }
  .carousel-item .carousel-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    left: 50%;
    padding-top: 0;
  }
  .list-box {
    padding: 0;
  }
  #menu {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #close-btn {
    left: 85%;
  }
  .about-f .about-content {
    padding: 0 3rem;
  }
}