Sometimes, you need to create an amazing responsive website, but there is less time to write custom CSS? There is nothing to worry about, we can simply use Bootstrap 5 to create an amazing responsive website without having to write more or any custom CSS.
Below is the demo image of the project.
As stated earlier, the project uses almost no custom CSS for creating a responsive website. Below is the coding used for creating this project.
Layout for responsive website (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Own Bootstrap Website</title>
<!-- include bootstrap css cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- include bootstrap icons cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<style>
@media screen and (min-width: 768px) {
.news-input {
width: 50%;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top">
<div class="container">
<a href="#" class="navbar-brand"> DeveloperAnil </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav_menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#fundamentals" class="nav-link">Fundamentals</a>
</li>
<li class="nav-item">
<a href="#faqs" class="nav-link">FAQs</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">Skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- showcase section -->
<section class="bg-dark bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-between">
<div class="pt-5 pt-lg-0">
<h1>Learn to be a <span class="text-danger">Web Developer</span></h1>
<p class="lead my-4">
You can also become a web developer on your own. Have faith in you and keep practicing.
</p>
<a href="https://thinkshare.one" target="_blank" class="btn btn-warning btn-lg"> Let's Learn Together </a>
</div>
<img src="showcase.jpg" class="img-fluid w-50 d-none d-sm-block">
</div>
</div>
</section>
<!-- Newsletter -->
<section class="bg-info bg-gradient text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Want Regular Updates?</h3>
<div class="input-group news-input">
<input type="text" class="form-control" placeholder="Enter Email">
<button class="btn btn-dark btn-lg" type="button">Subscribe</button>
</div>
</div>
</div>
</section>
<!-- fundamentals section -->
<section id="fundamentals">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="fundamentals.jpg" class="img-fluid shadow-lg">
</div>
<div class="col-md p-5">
<h2>Learn Frontend</h2>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minima saepe provident repellat cumque id velit maiores. Nisi, dolores praesentium!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, error laudantium ipsum iure, quas, quibusdam et debitis aspernatur quos atque fuga totam numquam modi autem facilis eius rerum accusamus consequatur?
</p>
<a href="#" class="btn btn-dark mt-3">
Read More
<i class="bi bi-chevron-right"></i>
</a>
</div>
</div>
</div>
</section>
<section id="backend" class="bg-dark text-light">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md p-5">
<h2>Learn Backend</h2>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde rem veniam, sed modi veritatis quis blanditiis cum quaerat, reiciendis sunt.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Deleniti minus, maiores, similique eligendi alias voluptate quis, ad, dolor sapiente quod obcaecati cupiditate eos dolorem itaque delectus ratione? Inventore, aliquam, temporibus.
</p>
<a href="#" class="btn btn-light mt-3">
Read More
<i class="bi bi-chevron-right"></i>
</a>
</div>
<div class="col-md">
<img src="backend.jpg" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- faqs section -->
<section class="p-lg-5 p-3" id="faqs">
<div class="container">
<h2 class="text-center mb-4">Frequently Asked Questions</h2>
<div class="accordion accordion-flush" id="questions">
<!-- faq 1 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-one">
How long will it take to be a frontend developer?
</button>
</h2>
<div id="question-one" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit harum vel incidunt nobis ex eveniet nostrum ullam vitae assumenda, voluptatibus atque. Minus omnis, deleniti cupiditate dolor doloribus, corrupti nemo quae at, obcaecati et, mollitia vero non. Accusamus nesciunt laborum voluptatibus, expedita quisquam, magnam dignissimos assumenda dolorum, excepturi doloribus laboriosam qui.
</div>
</div>
</div>
<!-- faq 2 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-two">
What are the languages used in frontend development?
</button>
</h2>
<div id="question-two" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit harum vel incidunt nobis ex eveniet nostrum ullam vitae assumenda, voluptatibus atque. Minus omnis, deleniti cupiditate dolor doloribus, corrupti nemo quae at, obcaecati et, mollitia vero non. Accusamus nesciunt laborum voluptatibus, expedita quisquam, magnam dignissimos assumenda dolorum, excepturi doloribus laboriosam qui.
</div>
</div>
</div>
<!-- faq 3 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-three">
Which is better? PHP or Python?
</button>
</h2>
<div id="question-three" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit harum vel incidunt nobis ex eveniet nostrum ullam vitae assumenda, voluptatibus atque. Minus omnis, deleniti cupiditate dolor doloribus, corrupti nemo quae at, obcaecati et, mollitia vero non. Accusamus nesciunt laborum voluptatibus, expedita quisquam, magnam dignissimos assumenda dolorum, excepturi doloribus laboriosam qui.
</div>
</div>
</div>
<!-- faq 4 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-four">
Can I get a job after the course completion?
</button>
</h2>
<div id="question-four" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit harum vel incidunt nobis ex eveniet nostrum ullam vitae assumenda, voluptatibus atque. Minus omnis, deleniti cupiditate dolor doloribus, corrupti nemo quae at, obcaecati et, mollitia vero non. Accusamus nesciunt laborum voluptatibus, expedita quisquam, magnam dignissimos assumenda dolorum, excepturi doloribus laboriosam qui.
</div>
</div>
</div>
<!-- faq 5 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-five">
Do you help in interview and job hunting?
</button>
</h2>
<div id="question-five" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit harum vel incidunt nobis ex eveniet nostrum ullam vitae assumenda, voluptatibus atque. Minus omnis, deleniti cupiditate dolor doloribus, corrupti nemo quae at, obcaecati et, mollitia vero non. Accusamus nesciunt laborum voluptatibus, expedita quisquam, magnam dignissimos assumenda dolorum, excepturi doloribus laboriosam qui.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skills section -->
<section id="skills" class="p-lg-5 p-3 bg-dark bg-gradient">
<div class="container">
<h2 class="text-center text-white">
Develop Your Skills
</h2>
<p class="lead text-center text-white mb-5">
We have 5+ years of experience in this field and will be helping you build your skills.
</p>
<div class="row g-4">
<div class="col-md-6 col-lg-6">
<div class="text-light">
<p class="lead fw-bold">HTML</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="text-light">
<p class="lead fw-bold">CSS</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="text-light">
<p class="lead fw-bold">JavaScript</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="text-light">
<p class="lead fw-bold">PHP</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="text-light">
<p class="lead fw-bold">MySQL</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section class="p-lg-5 p-3" id="contact">
<div class="container">
<div class="row g-4">
<div class="col-md">
<h2 class="text-center mb-4">Contact Info</h2>
<ul class="list-group list-group-flush lead">
<li class="list-group-item">
<span class="fw-bold">Main Location:</span> 40 Main Street, NSW, 1234
</li>
<li class="list-group-item">
<span class="fw-bold">Contact:</span> (555) 555-5555
</li>
<li class="list-group-item">
<span class="fw-bold">Email:</span> dummy@enrolmentemail.com
</li>
</ul>
</div>
<div class="col-md">
<!-- lets include a map -->
<div style="width: 100%"><iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=300&hl=en&q=Auburn%20Station+(Home)&t=&z=14&ie=UTF8&iwloc=B&output=embed"><a href="https://www.maps.ie/distance-area-calculator.html">area maps</a></iframe></div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="p-3 bg-dark text-white text-center position-relative">
<div class="container">
<p class="lead mb-0">
Copyright © 2023 DeveloperAnil
</p>
<a href="#" class="text-white position-absolute bottom-0 end-0 p-lg-2 p-3">
<i class="bi bi-arrow-up-circle h1"></i>
</a>
</div>
</footer>
<!-- include bootstrap js to make accordion work -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>The code for responsive website above imports the Bootstrap 5 CSS using CDN. Throughout the project, we can see different classes used in the HTML tags that are coming out of the box from Bootstrap 5.
Video Tutorial
Subscribe YouTube Channel
https://www.youtube.com/@developeranil