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>
Related
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)*
}
when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5
You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler
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>
I'm currently using Bootstrap 4 to make my online portfolio. The only issue I have right now is that I cannot align a div vertically. I'm also adding a .png image that should flow over the vertically centered div. The image pushes the whole div down. What do I need to use to fix this issue?
This is the result I'm looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</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">
<ul class="navbar-nav ml-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">
<a class="nav-link" href="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<div class="col-md-12" style="background-color: #F9DB0F;">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<img src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661" width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
this might help:
in style.css:
.bg {
background-color: #F9DB0F;
margin: 250px 0;
}
.div-center {
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 0;
}
.my-pic {
position: absolute;
top: -200px
}
in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- style should be loaded after the bootstrap files -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</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">
<ul class="navbar-nav ml-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">
<a class="nav-link" href="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<!-- I added a bg class -->
<div class="bg col-md-12">
<div class="container">
<div class="row">
<!-- I added a div-center class -->
<div class="center col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<!-- I added a my-pic class -->
<img class="my-pic"
src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661"
width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
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;