(Bootstrap 4) : Align Button with the text to be same line - html

How to align all divs to be center on the same line. What I mean I want the button to be centered with text like such image, for example, the social icons are centered like text not down like mine in dark
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
<div class="container d-flex flex-sm-column justify-content-between py-3">
<div class="row py-4 text-center align-content-between flex-wrap">
<div class="col-lg-4 mb-3">
<p class="text-secondary">Copyright © Saud</p>
</div>
<div class="col-lg-4 mb-3 ">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">
Contact Us
</button>
</div>
<div class="col-lg-4 mb-3">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
Privacy Policy
</li>
<li class="list-inline-item">
Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>


To center align them, make the columns d-flex and use align-items-center...
<div class="row text-center py-4 align-content-between flex-wrap">
<div class="col-lg-4 d-flex justify-content-center align-items-center">
<p class="text-secondary mb-0">Copyright © Saud</p>
</div>
<div class="col-lg-4">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal"> Contact Us </button>
</div>
<div class="col-lg-4 d-flex justify-content-center align-items-center">
<ul class="list-inline quicklinks mb-0">
<li class="list-inline-item">
Privacy Policy
</li>
<li class="list-inline-item">
Terms of Use
</li>
</ul>
</div>
</div>
https://codeply.com/p/BBJM8P9UPR


You want to align all the elements by its' texts, right? If so, in the div.row add align-items-baseline class.
See Bootstrap and MDN documentation for details.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
<div class="container d-flex flex-sm-column justify-content-between py-3">
<div class="row py-4 text-center align-content-between flex-wrap align-items-baseline">
<div class="col-lg-4 mb-3">
<p class="text-secondary">Copyright © Saud</p>
</div>
<div class="col-lg-4 mb-3 ">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">
Contact Us
</button>
</div>
<div class="col-lg-4 mb-3">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
Privacy Policy
</li>
<li class="list-inline-item">
Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>

Related

How to move footer automatically downward when new content add into the body?

Hello everyone I have created a navigation bar and footer in different pages and then add into ever page through include PHP function. my issue when I add content a lot into the body then the body content overlap the footer. Currently I am using bootstrap 5 for this website
this is the code of footer
<!-- Footer -->
<footer class="text-center text-lg-start bg-info text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
Angular
</p>
<p>
React
</p>
<p>
Vue
</p>
<p>
Laravel
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
Pricing
</p>
<p>
Settings
</p>
<p>
Orders
</p>
<p>
Help
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info#example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
this is the code of navigation bar
<!DOCTYPE html>
<html lang="en">
<head>
<title>SMS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrapfile/bootstrap.min.css" rel="stylesheet">
<script src="bootstrapfile/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-info navbar-light">
<a class="navbar-brand" href="#">SMS</a>
<button class="navbar-toggler" type="button" data-bs-toggle = "collapse" data-bs-target="#mango">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mango">
<ul class="navbar-nav" id="mango">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Login Panel</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="studentLogin.php">Student Login</a></li>
<li><a class="dropdown-item" href="#">Teacher Login</a></li>
</ul>
</div>
</nav>
<br>
</body>
</html>
this is the code of registeration page
where i add navigation bar and footer with include function
<?php
include "navigation.php"
?>
<body>
<section class="vh-100" >
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 50px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Date of Birth</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Date of Join</label>
</div>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<label class="form-check-label" for="form2Example3">
<a style="text-decoration: none" class="text-danger" href="studentLogin.php">Back to Login Page</a>
</label>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="draw1.webp" class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php include "footer.php" ?>
</body>
this is the image
[enter image description here][2]

Let's see, there are some errors in your navigation.php code, because you are opening the <html> and <body> tag. And right after, in registation.php you are calling navigation.php and you are opening another <body> tag. That is, you are joining 2 HTML documents. Instead of <br> you can use mb-2 or another "mb-" class from Bootstrap, because it means margin-button and leaves a dividing space between another element.
Also, inside footer.php place your scripts (remember that you are one line before the <body> so just place them at the end of the footer tag.
Registration page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SMS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrapfile/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
include "navigation.php"
?>
<section>
<div class="container">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 50px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Date of Birth</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Date of Join</label>
</div>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<label class="form-check-label" for="form2Example3">
<a style="text-decoration: none" class="text-danger" href="studentLogin.php">Back to Login Page</a>
</label>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="draw1.webp" class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php include "footer.php" ?>
</body>
</html>
Navigation.php:
<nav class="navbar navbar-expand-sm bg-info navbar-light mb-2">
<a class="navbar-brand" href="#">SMS</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mango">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mango">
<ul class="navbar-nav" id="mango">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Login Panel</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="studentLogin.php">Student Login</a></li>
<li><a class="dropdown-item" href="#">Teacher Login</a></li>
</ul>
</div>
</nav>
Footer.php:
<!-- Footer -->
<footer class="text-center text-lg-start bg-info text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
Angular
</p>
<p>
React
</p>
<p>
Vue
</p>
<p>
Laravel
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
Pricing
</p>
<p>
Settings
</p>
<p>
Orders
</p>
<p>
Help
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i> info#example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- HERE PASTE YOUR JAVASCRIPT TAGS, REMEMBER THATS THE END OF THE BODY TAG -->
<script src="bootstrapfile/bootstrap.bundle.min.js"></script>

I hope you're working on a project so it will be important to setup Partials.
Partials pages are default pages we setup so that whenever we render a new page first the code goes through partial before execution. The best practices are setup a 'Layout page'and a 'Partials page'.

Bootstrap 5 Tabs is not opening correctly

I want to make Vertical bootstrap tabs but when I tried to use the code from bootstrap 5 docs I faced a problem when opening the tabs as you can see in the screenshot the tabs are showing next to each other when I switch between them so what I'm missing in this
]
code
<div class="d-flex align-items-start center rounded" style="direction: rtl;">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="btn btn-lg btn-primary" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="btn btn-lg btn-primary dflex" id="v-pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Store</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="container contain bg-light rounded">
<div class="row" style="direction:rtl;">
<h4 class="title" >Home</h4><br>
</div><hr />
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">إجمالي الأرباح :</span>
<span class="spanValue" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-credit-card iconstate"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">المصروفات :</span>
<span class="spanValuespent" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-dollar-sign spenticon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Making bootstrap5 col only go down to footer

For this project I have to display a specific email adresses mailbox. In particular I need the 'Mail Card List' to be a scrollable component instead of stretching down the page, past the footer. I have tried using the 'max-height: ;' css style but that sets a fixed height. I am after a variable height (so it will work on different screen sizes, etc).
I
Any advice on how to achieve this (or even where to look) would be great. Thank you.
JsFiddle: https://jsfiddle.net/6fr9bh4v/4/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EMAIL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- MAILBOX PAGE -->
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">user#domain.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Dan
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
1/1/2000
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Test email!
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL CARD LIST -->
<div class="col-3" style="overflow-y: scroll;">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer fixed-bottom">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

Replace the inline style rule for overflow, you are using bootstrap, use the overflow-scroll class.
For the overflow to work you need to give it height, but since this is to be dynamic (to work across devices), so you will need to make it relative to viewport
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll vh-100">
.
.
.
</div>
With the above changes you'll see improvements but, you will need to consider the height that the rest of the elements (navigation etc) take. And when you have this in pixels, you can use CSS calc() to subtract it from the full viewport height. Create a class for your custom height relative to the viewport, for example:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px; /* add min-height to prevent it from becoming way too small if not enough vertical space*/
}
To allow space for the footer add margin on the "mailbox page" container div, mb-5
Remove fixed-bottom from <footer>
Full code:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<!-- https://getbootstrap.com/docs/5.1/getting-started/introduction/ -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">LarryMail</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<!-- API ACCESS | ON BACK LIST
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">API</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--
{% block content %}
{% endblock %}
-->
<!-- HOME PAGE
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">LarryMail</h1>
<p class="lead">Unlimited mailboxes. Courtesy of Larry.</p>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</main>
-->
<!-- MAILBOX PAGE -->
<div class="container mb-5">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">admin#crazyforher.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<!-- IF MAILBOX EMPTY
<p>
Select a message at left, or enter a different username into the box on upper right.
</p>
-->
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll custom-height">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

How can I use bootstrap to adjust my row outlines for the two cards?

How can I adjust the card bodies to not have the same height. As you can see in the below screenshot the cards have the same height resulting in the first two looking not professional. I want them to look like this: .
The outline of the first two card in terms of the height is stretched and it looks silly. How can I adjust the outline of them to look like in the image above with the red outline?
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Multi car savings <i class="fas fa-car"></i></h4>
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
<li class="list-group-item">2 cars £50</li>
<li class="list-group-item">3 cars £70</li>
<li class="list-group-item">5 cars £100</li>
</ul>
12
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Armed forces & NHS <i class="fas fa-address-card"></i></h4>
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
<li class="list-group-item">10% off for armed forces from the final quoted price</li>
<li class="list-group-item">10% off for NHS staff members from the final quoted price</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Car Clubs <i class="fas fa-car"></i></h4>
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
<p class="text-uppercase text-dark font-weight-bold">Only applies to CCK small stickers</p>
<li class="list-group-item">5% off £100</li>
<li class="list-group-item">10% off £200</li>
<li class="list-group-item">15% off £300</li>
</ul>
<ul class="list-unstyled mt-3 mb-4">
<p class="text-uppercase text-dark font-weight-bold">Only Large to CCK small stickers</p>
<li class="list-group-item">5% off £100</li>
<li class="list-group-item">10% off £200</li>
<li class="list-group-item">15% off £300</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
</div>
</div>
</div>

Use this on cards container
.card-deck {
align-items: flex-start;
}

Background Picture in webpage

CSS and below is the HTML
/*!
* Start Bootstrap - Grayscale v5.0.2 (https://startbootstrap.com/template-overviews/grayscale)
* Copyright 2013-2018 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
*/#mainNav{min-height:56px;background-color:#fff}#mainNav .navbar-toggler{font-size:80%;padding:.75rem;color:#64a19d;border:1px solid #64a19d}#mainNav .navbar-toggler:focus{outline:0}#mainNav .navbar-brand{color:#161616;font-weight:700;padding:.9rem 0}#mainNav .navbar-nav .nav-item:hover{color:fade(white,80%);outline:0;background-color:transparent}#mainNav .navbar-nav .nav-item:active,#mainNav .navbar-nav .nav-item:focus{outline:0;background-color:transparent}#media (min-width:992px){#mainNav{padding-top:0;padding-bottom:0;border-bottom:none;background-color:transparent;-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out}#mainNav .navbar-brand{padding:.5rem 0;color:rgba(255,255,255,.5)}#mainNav .nav-link{-webkit-transition:none;transition:none;padding:2rem 1.5rem;color:rgba(255,255,255,.5)}#mainNav .nav-link:hover{color:rgba(255,255,255,.75)}#mainNav .nav-link:active{color:#fff}#mainNav.navbar-shrink{background-color:#fff}#mainNav.navbar-shrink .navbar-brand{color:#161616}#mainNav.navbar-shrink .nav-link{color:#161616;padding:1.5rem 1.5rem 1.25rem;border-bottom:.25rem solid transparent}#mainNav.navbar-shrink .nav-link:hover{color:#64a19d}#mainNav.navbar-shrink .nav-link:active{color:#467370}#mainNav.navbar-shrink .nav-link.active{color:#64a19d;outline:0;border-bottom:.25rem solid #64a19d}}.masthead{position:relative;width:100%;height:auto;min-height:35rem;padding:15rem 0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(22,22,22,.1)),color-stop(75%,rgba(22,22,22,.5)),to(#161616)),url(../img/bg-masthead3.jpg);background:linear-gradient(to bottom,rgba(22,22,22,.1) 0,rgba(22,22,22,.5) 75%,#161616 100%),url(../img/bg-masthead3.jpg);background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover}.masthead h1{font-family:'Varela Round';font-size:2.5rem;line-height:2.5rem;letter-spacing:.8rem;background:-webkit-linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.masthead h2{max-width:20rem;font-size:1rem}#media (min-width:768px){.masthead h1{font-size:4rem;line-height:4rem}}#media (min-width:992px){.masthead{height:100vh;padding:0}.masthead h1{font-size:6.5rem;line-height:6.5rem;letter-spacing:.8rem}.masthead h2{max-width:30rem;font-size:1.25rem}}.btn{-webkit-box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;padding:1.25rem 2rem;font-family:'Varela Round';font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.btn-primary{background-color:#64a19d}.btn-primary:hover{background-color:#4f837f}.btn-primary:focus{background-color:#4f837f;color:#fff}.btn-primary:active{background-color:#467370!important}.about-section{padding-top:10rem;background:-webkit-gradient(linear,left top,left bottom,from(#161616),color-stop(75%,rgba(22,22,22,.9)),to(rgba(22,22,22,.8)));background:linear-gradient(to bottom,#161616 0,rgba(22,22,22,.9) 75%,rgba(22,22,22,.8) 100%)}.about-section p{margin-bottom:5rem}.projects-section{padding:10rem 0}.projects-section .featured-text{padding:2rem}#media (min-width:992px){.projects-section .featured-text{padding:0 0 0 2rem;border-left:.5rem solid #64a19d}}.projects-section .project-text{padding:3rem;font-size:90%}#media (min-width:992px){.projects-section .project-text{padding:5rem}.projects-section .project-text hr{border-color:#64a19d;border-width:.25rem;width:30%}}.signup-section{padding:10rem 0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(22,22,22,.1)),color-stop(75%,rgba(22,22,22,.5)),to(#161616)),url(../img/bg-signup.jpg);background:linear-gradient(to bottom,rgba(22,22,22,.1) 0,rgba(22,22,22,.5) 75%,#161616 100%),url(../img/bg-signup.jpg);background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover}.signup-section .form-inline input{-webkit-box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;padding:1.25rem 2rem;height:auto;font-family:'Varela Round';font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.contact-section{padding:5rem 0 0}.contact-section .card{border:0;border-bottom:.25rem solid #64a19d}.contact-section .card h4{font-size:.8rem;font-family:'Varela Round';text-transform:uppercase;letter-spacing:.15rem}.contact-section .card hr{border-color:#64a19d;border-width:.25rem;width:3rem}.contact-section .social{margin-top:5rem}.contact-section .social a{text-align:center;height:3rem;width:3rem;background:rgba(255,255,255,.1);border-radius:100%;line-height:3rem;color:rgba(255,255,255,.3)}.contact-section .social a:hover{color:rgba(255,255,255,.5)}.contact-section .social a:active{color:#fff}body{font-family:Nunito;letter-spacing:.0625em}a{color:#64a19d}a:focus,a:hover{text-decoration:none;color:#3c6360}.bg-black{background-color:#161616!important}.bg-primary{background-color:#64a19d!important}.text-primary{color:#64a19d!important}footer{padding:5rem 0}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Grayscale - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">iSalon</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Features</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Devs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">iSalon</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5"><i>"Style on the go, wherever you go."</i></h2>
<!-- for admin only <h2 class="text-white-50 mx-auto mt-2 mb-5"><b>(Admin Mode)</b></h2> -->
Learn About iSalon
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">About iSalon</h2>
<p class="text-white-50">Getting our haircuts or nails polished or even having a massage </p>
</div>
</div>
<img src="img/ipad.png" class="img-fluid" alt="">
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
<!-- Featured Project Row -->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/bg-masthead.jpg" alt="">
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Shoreline</h4>
<p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!</p>
</div>
</div>
</div>
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-01.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Misty</h4>
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-02.jpg" alt="">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Mountains</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section -->
<section id="signup" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5">Interested to join in?</h2>
<form class="form-inline d-flex">
<button type="submit" class="btn btn-primary mx-auto">Sign up now!</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Address</h4>
<hr class="my-4">
<div class="small text-black-50">4923 Market Street, Orlando FL</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4">
<div class="small text-black-50">
hello#yourdomain.com
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Phone</h4>
<hr class="my-4">
<div class="small text-black-50">+1 (555) 902-8832</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright © Your Website 2018
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>
I am new at bootstrap and I got a template from the web. It is inside a folder and the file is in html. I have made another separate file of folder that contains a simple php login form. When i turned in for my xampp and went to localhost. so when I opened my downloaded template (via dragging the html file). It looked like this
I have modified the background picture. And tried to connect my login (login button directs to login form) form with this and opening it via xampp but this pops up.
Did I miss something in my css? I have checkede and it was all the same. Please someone help