CSS Image re align,different lcd/screen - html

I am having trouble in displaying a background image in a static web page. Is is showing different height when I view on different LCD's, how can I make sure height is adjusted to approx 80% of the area, I even give percentage in Style for height but it didn't worked for me.
See this Image for Reference:
<html>
<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>Bakheet Japan</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<style>
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
width: 100%;
display: block;
width: auto;
height: 450px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#"><h3>Bakheet Japan</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="background-
image:url('css/arid-
barren-daylight-813873.jpg');">
<img class="img-fluid d-block mx-auto" height="230" width="240"
src="css/41435f27-bfd3-452a-b442-f8c4ca429a55.png" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan
2018</p>
</div>
</body>
</html>


Just added height to your <header> of 80vh (Viewport Height)
Which mean 80% of your screen height.
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
display: block;
height: 80vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#">
<h3>Bakheet Japan</h3>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');">
<img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan 2018
</p>
</div>


.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
display: block;
height: 80vh;background-size: cover;
background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#">
<h3>Bakheet Japan</h3>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="">
<img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan 2018
</p>
</div>
I made slightly changes for not repeating the image


height: 80vh;
background-image: url('image_path');
background-size: cover;

Related

Bootstrap Navbar text alignment

This is how I want to align text:
And this is my navbar:
I've been trying for exactly 2 days to make this style, somehow I couldn't do it like on Max Back's site
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="">
<span>Emre İlhan</span>
<img src="assets/icons8-verified-account-20.png" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav nav-pills ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><span class="tex-black-50">01</span> Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">02</span> Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">03</span> Link</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Try this code for navbar text-right
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand text-right" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

try this
<!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>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.img-container{
background-color: black;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgb(76, 76, 76);
}
.img{
border-radius: 50%;
width: 40px;
height: 40px;
}
.main{
display: flex;
}
.text{
margin-left: 5px;
padding: 3px;
}
</style>
<body>
<div class="main" >
<div class="img-container">
<img src="33720.jpg" class="img" alt="">
</div>
<div class="text">
<div>Emre Ihan <i class=" fa fa-check"></i></div>
<div style="color: gray;"><i class=" fa fa-check"></i>offical</div>
</div>
</div>
</body>
</html>

Bootstrap Navbar not working when in mobile mode

I'm quite new to BOOTSTRAP 5 (Web Development in general) and I am currently trying to make a simple website with it. I've selected a navigation bar but whenever I change my browser to mobile mode, the drop-down which appears does not work at all and all my elements in my navbar disappear. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style type="text/css">
#jumbotron{
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck{
margin-left: 1rem;
}
#logo-space{
background-color: blue;
width: auto;
height: auto;
}
#logo{
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN{
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>

You also need to link the JavaScript Bundle for Bootstrap. The mobile menu only works with JS.
The JS Bundle code is:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
All you gotta do is to add the JS dependency to make it work:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#jumbotron {
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck {
margin-left: 1rem;
}
#logo-space {
background-color: blue;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>

You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the size of the nav bar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}

how to image center in Navbar Responsive?

It's My code navbar
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mr-auto" style="
margin-right: 18%!important;
margin-left: 8%;
">
<li class="nav-item">
<a class="nav-link" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produk</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
the result of the codingan looks like this picture
picture
but I want the result like this image
I want the result like this image
Please help me to solve this problem thank you.

First step would be to add 2 <ul>. One will be visible on mobile screen and other on desktop.
For Mobile in the middle before the li
<ul class="navbar-nav">
<a class="image-logo" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" alt="mdb logo" height="52">
</a>
</ul>
For Desktop
<ul class="navbar-nav">
<a class="image-logo-center" href="#">
<img src="https://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</ul>
Add your media queries in css.
#media screen and (min-width: 992px) {
.image-logo-center{
height: 100px;
display: block;
}
.image-logo{
display: none;
}
}
#media screen and (max-width: 500px) {
.image-logo{
position: absolute;
height: 52px;
top: 1%;
left: 35%;
}
.image-logo-center{
display: none;
}
}
Full Code : https://codesandbox.io/s/optimistic-meadow-37ofm?file=/index.html

Add more CSS and make changes according to your need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
#media (max-width: 991.98px){
.navbar-brand{
display: none;
}
.navbar-brand-center{
display: flex;
justify-content: center
}
.center-logo{
width: 75%;
}
.nav-item{
text-align: right;
width: 113%;
}
}
#media (min-width: 993px){
.navbar-brand-center{
display: none;
}
}
</style>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container">
<div class="center-logo">
<a class="navbar-brand-center" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mr-auto" style="
margin-right: 18%!important;
margin-left: 8%;
">
<li class="nav-item">
<a class="nav-link" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produk</a>
</li>
<li class="navbar-nav mr-auto">
<a class="navbar-brand" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</li>
<li class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>

Removing Whitespace below the content in Webpage

So I am relatively new to Web Development and am following Colt Steele's udemy course, I started doing this landing page but towards the end when I try to set the height of HTML to 100% and then there's like whitespace down. I have tried to search for a reason and I think my div container's height is causing some issues.
P.S: I also tried to make the HTML height auto which worked fine, but then again causes an issue in responsive mode, and even the navbar size decreases and doesn't cover to the end of the screen.
body{
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
}
html{
height: auto;
}
#content{
text-align: center;
padding: 25%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>

You need to add height: 100% to your body and html as well to make sure the body changes dynamically when window size changes.
My Chrome View
Live Demo: (Run snippet below and click full screen to see the image is cover in the page and there is no white space.)
Edit: Bootstrap has its own alot of native flex box classes which you can use instead of custom CSS. We can just use align-items-center and h-100 to make sure about content text stays in middle and good things it will be repsonsive as well. We do not need to use any Custom CSS padding or margin on content.
body {
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
height: 100%;
}
html {
height: 100%;
}
body {}
#content {
text-align: center;
color: white;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-12 mx-auto">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>

How do I collapse a navbar for mobile devices?

.navbar {
background:white;
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 4em;
transform: rotate(30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: -0.5em;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: -1em;
}
.head-text{
padding-top:1px;
font-family:Righteous;
text-align:center;
color:#78ece9;
}
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="http://computervision.in/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://computervision.in/css/style.css" rel="stylesheet">
</head>
<!------ Include the above in your HEAD tag ---------->
<body id="top">
<nav class="navbar p-0 fixed-top">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or + 91 xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<div class="dropdown">
<img class="position-relative" src="http://computervision.in/images/IN.png" height="50">
<div class="dropdown-content2">
<a class="my-font" href="courses.php">Courses</a>
<a class="my-font" href="login.php">Student Login</a>
<a class="my-font" href="#">Make Payments</a>
<a class="my-font" href="#">Student Review</a>
<a class="my-font" href="#">Verify Certificates</a>
<a class="my-font" href="#">Online Registration</a>
</div>
</div>
<div class="dropdown">
<img class="position-relative ml-3 mr-2" src="http://computervision.in/images/PV.png" height="55">
<div class="dropdown-content">
<a class="my-font" href="#">Gallery</a>
<a class="my-font" href="#">Hot Jobs</a>
<a class="my-font" href="#">Placement Cell</a>
<a class="my-font" href="#">Top Placements</a>
<a class="my-font" href="#">Placement Drive</a>
<a class="my-font" href="placement.php">Placement Testimonials</a>
</div>
</div>
</div>
</div>
<div class="bottom d-flex w-100">
<div class="navbar-brand">
<a class="navbar-brand mr-0" href="#"> <img src="http://computervision.in/images/logo.png" height="60"> </a>
<button class="navbar-toggler" id="nav1" type="button" data-toggle="collapse" data-target="#navMain" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<ul class="nav mt-auto flex-grow-1 pl-4 position-relative" role="navigation" id="navMain">
<li class="nav-item active"><a class="nav-link my-font" href="index.php">Home</a></li>
<li class="nav-item"><a class="nav-link my-font" href="about.php">About</a></li>
<li class="nav-item "><a class="nav-link my-font" href="why.php">Why Computer Vision</a></li>
<li class="nav-item"><a class="nav-link my-font" href="courses.php">Courses</a></li>
<li class="nav-item"><a class="nav-link my-font" href="services.php">Services</a></li>
<li class="nav-item"><a class="nav-link my-font" href="events.php">Events</a></li>
<li class="nav-item"><a class="nav-link my-font" href="blogs.php">Blogs</a></li>
<li class="nav-item"><a class="nav-link my-font blink" href="contact.php">Contact</a></li>
<li class="nav-item"><a class="nav-link my-font" href="register.php">Register</a></li>
</ul>
</div>
</nav>
<!-- Contact Us Section -->
</body>
</html>
I have tried a lot of codes for This Code in order to make it responsive in mobile devices, so that when a user accesses my page from mobile he gets a collapsed navigation bar. I have tried in every way, the navbar collapse class doesn't even seem to work. so I have removed the whole code for collapsing the navbar. Please help me out, i've been stuck in here for many days. Thanks anyways.

.navbar {
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav, .navbar-nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 2.5em;
transform: skew(-30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: 0;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: 0;
}
.navbar.navbar-expand-lg {
flex-wrap: wrap;
}
.navbar-toggler {
color: rgba(0,0,0,.5);
border-color: rgba(0,0,0,.1);
}
.navbar .bottom.d-flex {
flex-wrap: wrap;
}
.navbar-toggler-icon {
border:1px solid #ddd;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg p-0">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<img class="position-relative" src="http://computervision.in/images/IN.png" height="50">
<img class="position-relative ml-3 mr-2" src="http://computervision.in/images/PV.png" height="55">
</div>
</div>
<div class="bottom d-flex w-100">
<a href="" class="navbar-brand mr-0">
<img src="http://computervision.in/images/logo.png" height="60">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 flex-grow-1 pl-4 position-relative">
<li class="nav-item active"><a class="nav-link text-white active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Blogs</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
You just have to modify CSS as per your design. Hope this will work for you.

here is small example for a collapsing navbar. Please give it a try. Run the snippet in the post and fullscreen to see how it works.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>