Bootstrap 4 Navigation Bar Dropdown Issue - html

I tried to split this navigation bar dropdown menu in to two columns but they clash with each other.
And the other issue is, the Search bar stays at bottom when in mobile. And page is not responsive. I don't know if this is caused by navigation bar issue. Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #C0C0C0;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test Test Test</a>
<a class="dropdown-item" href="#">Test Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">itemitemitemitem</a>
<a class="dropdown-item" href="#">itemitemitemitemitem</a>
<a class="dropdown-item" href="#">item</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


I'll answer the dropdown question that goes along with the title.
You don't want to nest a container inside of the dropdown. Also increase the min-width on the dropdown to fit the content.
https://www.codeply.com/go/9wUCwUErKL
<div class="dropdown-menu" style="min-width:360px" aria-labelledby="navbarDropdown">
<div class="row no-gutters">
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">Test Test Test</a>
<a class="dropdown-item px-2" href="#">Test Test</a>
<a class="dropdown-item px-2" href="#">Test</a>
</div>
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">itemitemitemitem</a>
<a class="dropdown-item px-2" href="#">itemitemitemitemitem</a>
<a class="dropdown-item px-2" href="#">item</a>
</div>
</div>
</div>
There is no longer col-xs-* in Bootstrap 4, it's just col-*.

Related

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)*
}

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>

CSS Image re align,different lcd/screen

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;

Bootstrap 4 - 3 images and a form inline

im trying to replicate this image as an exercise. original image
But, right now it looks like this. current homepage
Based on my html file, under 'banner' comment, i created a 'jumbo div' so that all elements inside it wrap in a full width dekstop. Then, under 'jumbo div' i created some 'col-sm-n container' so that the elements inside my 'jumbo div' take the amount of space which i assigned.
So, my questions is this the correct way for me to do it to achieve just like the original image. And if yes, what did i do wrong because there are like huge gap after the navbar and those elements not inline.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</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 dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-4">
<img src="http://i68.tinypic.com/2462d89.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

element is itself an inline element. If you want all images to be align side by side use the max-width:100%; and float the elements properly and clear float in the end. As you are using bootstrap classes then use them in combination of col-3 to place all four images in one line.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
figure img{max-width:100%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</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 dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>