In this project, we are going to learn how to make a responsive website using Bootstrap 5 and CSS media queries.
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.
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.
- Well-Formatted Content That Is Easy to read.
- Mobile Compatibility.
- First and optimze
- Single Page Website
- Elements filtration feature
- Smooth animation
- 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; } }
Submitted by Shuvranil Mondal (Shuvranil002)
Download packets of source code on Coders Packet
Comments