Frontend Forever

Responsive Bootstrap Website

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Responsive Bootstrap Website. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

WHAT IS BOOTSTRAP?

The most widely used CSS framework for creating responsive and mobile-first websites is Bootstrap.

Bootstrap Files are Too Big! As was already noted, because of the sheer amount of functionality provided by its framework, Bootstrap files can be somewhat huge. Website load times may lengthen as a result, especially on slower networks.

Beginners could struggle to locate and correct this problem, but as was already noted, the customized tool on the Bootstrap website can assist you to remove any extra code for features you'll never use.

History of Bootstrap

On Twitter, Mark Otto and Jacob Thornton created the Bootstrap framework. On GitHub, it was made available as an open-source product in August 2011.
The most popular project on GitHub in June 2014 was Bootstrap.

Is Bootstrap Best?

One of the top and most popular HTML/CSS/JS front-end frameworks is Bootstrap. Almost all web designers who have created a few websites have heard of this well-known framework. Because it provides so many pre-made resources and components, Bootstrap may considerably speed up the construction of your application.

The key factor influencing Bootstrap's popularity in the online design sector is its distinct and alluring characteristics, which enable programmers to easily create completely responsive websites with excellent functionality.

What is meant by responsive web design?

An technique to creating web pages called responsive design uses flexible layouts, flexible graphics, and media queries in cascading style sheets. The objective of responsive design is to create web pages that recognise the size and orientation of the visitor's screen and adjust the layout accordingly

STEPS TO CREATE :

Name the new file bootstrap.html after creating it.
Set the background as cover after inserting the background image.
The image should have some linear gradients.
Include a link to the bootstrap website in your text.
The bootstrap would now be correctly inserted.
Include the navigation bar and give it a box-shadow.
Write the content in the beginning and center it.
Watch the step-by-step tutorial I'm giving.
Here is a Tamil tutorial link: https://youtu.be/V2j8xXoKpW0
Here is a link to an English tutorial: https://youtu.be/nA5oAGH-FhI
I hope this tutorial was enjoyable.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid col-md-8">
            <div class="container col-md-10">

<nav class="navbar navbar-expand-lg">
                          <span class="navbar-brand mr-auto" href="#"><img src="https://www.frontendforever.com/uploads/assets/ff.jpg"></span>
                          <b>FRONTEND FOREVER</b>
                          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav">
                            <svg width="25px" height="25px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                                </svg>
                          </button>
                          <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav">
                              <li class="nav-item">
                                <a class="nav-link" href="https://www.facebook.com/FrontendForever/?notif_t=page_invite_accept&ref=notif" title="Facebook"><svg style="color: white;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                                    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
                                    </svg>
                                    </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="https://www.instagram.com/frontendforever/?igshid=1ijri1kfpzx32" title="Instagram"><svg style="color:rgb(200, 165, 221);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                                    <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
                                    </svg>
                                    </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="https://www.youtube.com/channel/UCZV-wGSr0G2hdrwH6NpXuTQ/about" title="YouTube">
                                    <svg style="color: red;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
                                    <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.122C.002 7.343.01 6.6.064 5.78l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
                                    </svg></a>
                              </li>
                            </ul>
                          </div>
                      </nav>

<div class="main">
                    <h1>RESPONSIVE BOOTSTRAP WEBSITE</h1>
                    <h3>"DESIGN IS JOURNEY OF DISCOVERY</h3>
                </div>
                
                <div class="d-flex justify-content-center">
                    <button class="btn btn-primary">Get Started</button>
                </div>
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  </body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container-fluid{
      width: 100%;
      height: 100vh;
      background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,.1)),url(https://www.frontendforever.com/uploads/assets/bg.jpg);
      background-repeat: no-repeat;
      background-position: center;
}
.container{
      width: 100%;
      height: 100vh;
      box-shadow: 10px 0px 15px rgba(0,0,0,0.6),-10px 0px 15px rgba(0,0,0,0.6);
}
.navbar-brand img{
      width: 70px;
      height: 70px;
      border-radius: 50%;
}
b{
      color: whitesmoke;
      font-size: 30px;
      text-shadow: 1px 1px 1px red;
}
.navbar-nav{
      margin-left: auto;
}
.nav-item{
      padding: 0px 12px;
}
.nav-item a{
      text-align: center;
}
svg{
      width: 25px;
      height: 25px;
}
.navbar-toggler{
      margin: auto;
}
 .navbar{
      background-color: rgba(0,0,0,.1);
      box-shadow: 0px 2px 5px rgba(0,0,0,0.6);
}
h1{
      text-align: center;
      margin-top: 8%;
      font-size: 50px;
      color: white;
      text-shadow: 2px 2px 4px black;
}
h3{
      text-align: center;
      margin-top: 5%;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: rgba(245,241,4,1);
      text-shadow: 2px 2px 4px black;
}
 .btn{
      padding: 5px 10px;
      margin-top: 5%;
      font-weight: 600;
      font-size: 18px;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Responsive Bootstrap Website

About this Code

History of Bootstrap

Is Bootstrap Best?

What is meant by responsive web design?

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever