1- Your kind Advise guys please as I tried many times with no hope (Using Bootstrap 4)
Header Section refused to follow (d-flex justify-content center classes as normal!!! as I want to center the text of hungry...... and all those texts.
2- Font Awesome has a weird thing (first to see) .. I want to make a circle around it like that logo but while Inspect I found SVG???
#import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto&display=swap');
body{
font-family: 'Lato', sans-serif;
}
input[type="text"]{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #c0c0c0;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
header .container{
padding: 35px 20px 0;
max-width: 950px;
}
nav a{
text-transform: uppercase;
}
i{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
color: red;
}
.bg-dark{
background-color: #343a4000!important;
}
.navbar-brand{
text-transform: capitalize;
}
.navbar-dark .navbar-brand{
font-size: 1.5rem;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(255, 255, 255);
font-size: 1rem;
}
header{
background: url('https://images.unsplash.com/uploads/1412198485051133af17f/5049dacb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat center center/cover;
min-height: 724px;
color: #fff;
}
.showcase-text h1{
font-size: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
<!-- FontAwesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Wow.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
<!-- Hover.css Lib -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link rel="stylesheet" href="css/app.css">
<title>Cairo Eat | Best Restaurants in Egypt at your Hand</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#"><span><i class="fas fa-utensils food-icon mr-1"></i> </span> CairoEat</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
</li>
</ul>
</div>
</nav>
<div class="container text-center d-flex flex-column justify-content-center">
<h1>Hungry? Find the food you're looking for.</h1>
<p>Your city's best eats, ready to be ordered online.</p>
<input type="text" placeholder=" City or Address">
<!-- <input type="submit" value="Search" class="btn btn-danger p-2 pl-3 pr-3"> -->
<button type="submit" class=" btn btn-danger p-2 pl-3 pr-3">Search</button>
</div>
</header>
</body>
</html>
For your first question follow the below answer:
As I saw your code there is a typo in line 49 where you declare the div classes
<div class="container tex-center d-flex flex-column justify-content-center">
the tex-center is incorrect and it should be text-center.
so the result should be like this:
<div class="container text-center d-flex flex-column justify-content-center">
For your second question you can do the followings:
First of all, you can add a class to your span like this:
<span class="icon"><i class="fas fa-utensils food-icon"></i> </span>
And create a style for it like this:
span.icon {
color: #343a40;
background-color: white;
border: 1px solid white;
border-radius: 50%;
padding: 5px;
margin: 0 5px;
}
Note: I just add a simple class="icon" for better illustration you can name it whatever you want as long as you keep changing the style class name also.
UPDATE
For solving your first issue there are several things you can do, to resolve the issue follow the instruction below:
Giving d-flex to the header tag
nav.navbar {
top: 0;
width: 100%;
}
<header class="d-flex flex-column justify-content-center position-relative">
<nav class="navbar navbar-expand-md navbar-dark bg-dark position-absolute">
...
</nav>
...
</header>
NOTE: ... is to illustrate your other items into the relative div and you should put your other items instead of them.
Related
This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 1 year ago.
I am trying to make my navigation bar responsive. When I resize my browser to test, the nav bar does collapse but the button is not visible. I tried to set the nav bar background as bg-dark but the button will still be invisible.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</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>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p style="font-size: x-large;">Delicious Homemade Cakes</p>
</div>
</div>
<div id="best-sellers "class="container">
<h2>Best Sellers</h2>
<hr>
<div id="best-seller-cakes" class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/chocolate_cake.jpg">
<h4>Good<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/red_velvet_cake.jpeg">
<h4>Awesome<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/strawberry_cake.jpg">
<h4>Great<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/cake_seven.jpg">
<h4>Delicious<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
</div>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
.nav-link{
padding: 0 0 .2rem
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: medium;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
text-align: center;
}
h2{
text-align: center;
}
#best-sellers{
text-align: center;
}
#best-seller-cakes{
text-align: center;
}
h4
{
font-size: x-large;
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Edit: Removed webpage link as link no longer exists
Resulting change - The issue is in your HTML.
Add this two classes to the <nav> </nav> element in your HTML more details cna be found on the bootsrap page.
navbar-dark bg-dark
or the result will be -
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
by changing these two classes or modify their properties you can change the behavior. And don't override the bootstrap classes, add your own to override the CSS properties you need to change
Add this Class navbar-dark bg-transparent
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
your issue is on the a css file called_transitions.scss
I have looked at your code and I found out you have a css rule that will set the navbar's display property to none when it goes below 750 width-pixels
Try looking at this file and either edit it to just compress your navbar or try removing the code
on the code, this is the part that makes your navbar not visible when scaling
.collapse {
&:not(.show) {
display: none;
}
}
You actually apply transparent background and border css on Collapse button, this is the reason why collapse button not visible.
Goto line no 109 on _navbar.scss file and you will find below CSS.
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
Just replace background-color: transparent; to background-color: white;
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid white;
border-radius: .25rem;
}
I hope it'll resolve your issue. Thank You
I am making a system to view the db on the web but
db columns are buried to the right because of the empty space on the left How to solve this
All css is applied.
I know it's a css problem, and I think it's a problem in the lower menu of _Layout, but I don't know exactly what the problem is.
this project is made blazor server
but i use only razor page
this current page cshtml
#page "/MyPage/Leader"
#model WebApplication1.Pages.Mypage.LeaderModel
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = "_Layout";
}
<tbody>
#foreach (var item in Model.borad_tbl)
........
this is layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebRP</title>
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
#*<a class="navbar-brand" asp-page="">MyPage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>*#
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
css
site css
#import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
a, .btn-link {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
If you want to remove the empty space on the left,Try to add the following code to your layout:
<style>
.container {
margin-left:0px;
}
</style>
Update:
You need to make sure you add the css into layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebRP</title>
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
#*<a class="navbar-brand" asp-page="">MyPage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>*#
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</body>
</html>
<style>
.container {
margin-left:0px;
}
</style>
With the css:
I want to change the height and background color of the <hr> tag in HTML. Although the height and color change, but it seems the background color opacity is reducing slightly. Why is this happening?
My Code:
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
How can I get the original color and why is this problem happening? I am using the current version of Chrome (Windows 10).
Edited
I get such output in the browser when I run the whole code:
My whole code:
<!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">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: url(./images/bg-masthead.jpg) no-repeat center center/cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
In your reboot.scss you have an hr style with opacity:.25;.
Add:
hr {
opacity:1;
}
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#ff0000;">
<!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">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
/*background: url(./images/bg-masthead.jpg) no-repeat center center/cover;*/
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
hr {
opacity:1;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
You have a reboot.css in bootstrap file that has opacity: .25, so you have to reset your hr by adding opacity: 1 to it
I'm making a single page scrollable website and want to have the first page to be just a navbar, image, and a header. Now the problem is that I was unable to center the header. Well, at least I got it to center horizontally. But I'm unable to center it vertically. I hope somebody can spot the issue because I've been puzzling this annoying issue for hours.
This: https://startbootstrap.com/previews/grayscale/ is the idea I'm going for, to make it clear.
Here is the code
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
nav {
font-size: medium;
}
.nav-item a {
color: white !important
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p,
h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
} */
.mx-auto {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container">
<div class="mx-auto text-center">
<h1 class="my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
No need to use styles. Bootstrap does it for you :
<header class="row align-items-center masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
Add two classes to header div that I have added above.
Note : after you added row class maybe you have to add col to your content elements.
There is two option to do vertical center
you need to give the position to your navigation bar so it does not calculate in flexbox, for that you need to change your code a little bit.
you need to cut out your navigation bar height from your page, so it does not calculate in flexbox, I calculated your navbar height and its equal to 86px so, I will cut 172px from your page
Now you need to choose best way, from my side, first is better than second.
1st Idea
Just added align-items-center vh-100 in masthead class tag and added CSS
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex vh-100 align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
2nd Idea
Just added align-items-center in masthead class tag and added CSS
.masthead {
height: calc(100vh - 172px);
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.masthead {
height: calc(100vh - 172px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
I want the image to fill in the column of the page:- https://i.stack.imgur.com/VtgcW.jpg
I am trying to recreate a website to test my skills the website is:-https://www.simplesite.com
It is working when I assign it to the body but when I assign it to the div then there is white space below. I have tried a lot of things still can't get rid of this white space. Any help would be appreciated
HTML:-
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
CSS:-
#mainNavbar .navbar-brand {
font-size: 2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("imgs/starter5.jpg") center center;
background-repeat: no-repeat;
background-size: ;
}
Please check this jsfiddle link. Hope this solves your problem. Below is the same code.
#mainNavbar .navbar-brand {
font-size:2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("https://previews.123rf.com/images/dolgachov/dolgachov1407/dolgachov140701912/29971506-business-interview-employment-and-office-concept-business-team-with-tablet-pc-computer-interviewing-.jpg") center center / cover;
background-repeat: no-repeat;
background-size: ;
min-height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
https://jsfiddle.net/yudizsolutions/nartkmud/4/
First of all You need the background size to fit the fold, which means set it to cover (please note that the image size should be 1920x1080 to look good and not pixelated).
add/change this:
.contain {
background: url("imgs/starter5.jpg") 50% 0;
background-repeat: no-repeat;
background-size: cover;
}
If the image is good than it should fill all the 1st fold of the page!
Your css need little modification. Please try the below height property in your contain class :
.contain {
background: url(imgs/starter5.jpg) center center;
background-repeat: no-repeat;
height: 100vh;
}