htmlcssresponsive-designbootstrap-5

Bootstrap Responsive Layout, Totally changing the small screen design from the medium and large design

So at first i build a footer using html css and js. and then i discovered bootstrap and trying to create it using bootstrap, mobile first design <576px.

I've done the footer in the medium and large desktop using css before i discovered bootstrap. and now i've done the footer in small screen using bootstrap. however i am not baffled to how i changed the layout from my small screen to my medium and large screen.

so i wanted to keep both design but i am unable to do so. i am aware how to create the medium and large screen using bootstrap but now that i've coded the small screen i don't know how to build the responsive code to medium and large screen.

so basically or so it should, the medium and large screen will be using grid with 1 row and 3 col-4. but i failed to find how to convert it from my current code.

current code for mobile:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer</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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
  </head>
  <body>
    <footer class="container-fluid bg-secondary fixed-bottom">
      <h1 class="text-black text-center">Ready To Meet The Future?</h1>
      <h6 class="text-center mb-3 fw-normal">Stay up to date with our news and articles</h6>
      <div class="container">
        <div class="row mx-0 px-0 justify-content-center mb-3">
          <div class="col-7 offset-1 px-0">
            <input class="rounded border-0 w-100 h-100" type="email" placeholder="Email Address" />
          </div>
          <div class="col-4">
            <button class="btn btn-danger w-100 h-100" onclick="ClickSubscribe()">Submit</button>
          </div>
        </div>
      </div>
      <hr class="d-md-none my-1" />
      <div class="row px-1">
        <div class="col-3 text-center">
          <a href="#" class="text-black text-decoration-none">Home</a>
        </div>
        <div class="col-3 text-center">
          <a href="#" class="text-black text-decoration-none">About</a>
        </div>
        <div class="col-3 text-center">
          <a href="#" class="text-black text-decoration-none">Product</a>
        </div>
        <div class="col-3 text-center">
          <a href="#" class="text-black text-decoration-none">Contact Us</a>
        </div>
      </div>
      <hr class="my-1 py-0" />
      <div class="container-fluid px-1">
        <div class="row">
          <div class="col-5 offset-1 px-0">©Watches</div>
          <div class="col-5 text-end px-0">
            <a href="#"><i class="fa-brands fa-instagram text-black ms-2"></i></a>
            <a href="#"><i class="fa-brands fa-twitter text-black ms-2"></i></a>
            <a href="#"><i class="fa-brands fa-whatsapp text-black ms-2"></i></a>
            <a href="#"><i class="fa-brands fa-facebook text-black ms-2"></i></a>
          </div>
        </div>
      </div>
    </footer>
    <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>

old code using css only

    <div class="footer-section">
      <div class="footer-subscribe">
        <!-- TODO: Make it 2 Line, Responsive? -->
        <h1>Ready To Meet The Future?</h1>
        <div class="footer-subscription">
          <input
            class="footer-email"
            type="email"
            placeholder="Email Address"
          />
          <button class="footer-subscribe-button" onclick="ClickSubscribe()">
            Submit
          </button>
        </div>
      </div>
      <div class="footer-nav">
        <div class="footer-link">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Product</a>
          <a href="#">Contact Us</a>
        </div>
        <div class="footer-contact">
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-whatsapp"></i></a>
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <hr />
      <span>Copyright By Watches</span>
    </div>
  </div>

CSS

.footer-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.footer {
  width: 100%;
  background-color: #e7e7e7;
  padding: 20px 10% 20px;
}

.footer a {
  text-decoration: none;
  color: black;
}

.footer h1 {
  margin: 0px;
  font-size: 56px;
}

.footer-section {
  display: flex;
  justify-content: space-between;
}

.footer-subscribe {
  flex: 1;
  margin-right: 10px;
  gap: 3rem;
  border-right: 2px solid;
}

.footer-subscription {
  display: flex;
  margin-right: 3rem;
  margin-top: 1rem;
}

.footer-email {
  width: 60%;
  padding: 1rem;
  margin-right: 3rem;
  border: none;
  border-radius: 36px;
  box-sizing: border-box;
  outline: none;
}

.footer-subscribe-button {
  background-color: red;
  color: white;
  border: none;
  padding: 0px 2rem;
  font-size: 16px;
}

.footer-nav {
  flex: 1;
  display: flex;
}

.footer-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 10px;
  border-right: 2px solid;
}

.footer-contact {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-contact i {
  font-size: 20px;
}

.footer-copyright {
  margin: 20px 0px;
  font-size: 12px;
  font-weight: bold;
}

.footer-copyright hr {
  border-top: 2.5px solid black;
}

@media (max-width: 768px) {
  .footer h1 {
    font-size: 36px;
  }

  .footer-subscribe {
    margin-right: 20px;
    border-right: 1px solid;
  }

  .footer-subscription {
    flex-direction: column;
  }

  .footer-email {
    width: 100%;
    margin: 0 0 1rem 0;
  }

  .footer-subscribe-button {
    width: 100%;
    padding: 1rem;
  }

  .footer-nav {
    flex-direction: row;
  }

  .footer-link {
    border-right: 1px solid;
    margin-right: 20px;
  }

  .footer-contact i {
    font-size: 28px;
  }
}

This is the medium large design Medium Large Screen

This the small design Small Screen

So basically i wanted to keep both design but i am unable to do it. i actually have a trick but it basically created 2 design separately instead making it responsive. so i could just do d-md-none for the small design and create the medium and large design. but obviously this is not the way

Solution

  • Shouldn't you do 1 row and 3 col-4 first then? you can adjust the design after designing the medium and large screen. Then you can adjust the small screen from those code. the small screen design will need to be changed but it is what it is