I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _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"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
Related
I need help with bootstrap container and row width.
I have created a container and a row inside it. I have everything inside the row, but for some reason content sizes are different as displayed on jsfiddle and image preview.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>xGhost.cz | Československý Gamehosting.</title>
<!-- meta data -->
<meta name="author" content="Jan Dvořák">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- styles -->
<link rel="stylesheet" href="css/style.css">
<!-- BOOTSTRAP START -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- BOOTSTRAP END -->
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="row">
<div class="col-lg-1">
<img src="img/xGhost.svg" alt="" style="width: 300px; height: auto;"/>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2">
<a class="navbar-brand" href="#" style="font-style: italic;">xGhost.cz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
<li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
<div class="row gx-2 mt-3">
<div class="col-md-8">
<div class="box">
<div class="box-heading">Novinky & Blog</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-heading">Přihlášení</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
text-align: center;
}
.nav-link:hover {
color: rgba(39, 174, 96, 1.0) !important;
}
.box {
width: 100%;
height: auto;
}
.box-heading {
background: #212529 !important;
color: #fff;
text-align: center;
padding: 7px;
width: 100%;
}
JSFiddle: https://jsfiddle.net/1c9w3taq/
Image preview
On the image you can clearly see, where the spaces are. It all should be aligned from side to side inside the container. Logo column width is missing a few pixels on the right and the two boxes in the bottom are not touching the sides of parrent container.
The problem is from this div.
<div class="col-md-8">
as well as <div class="col-md-4">
Yes they both equal 12 but they contain a margin.
To fix this you can add a class like this.
.nomargin{
margin: 0px !important;
}
And use the class like this
This will remove the default bootstrap margin.
I am trying to get the background of my block section to encapsulate the image, or be responsive to what is put inside. Honestly, I don't even know what I am trying to ask, I just want the white space to respond to the image size, so I can have a background color/image behind a set block section for my About me. I have tried messing with padding/margin but I cannot seem to get it done correctly. In case the image doesn't load, I have my .html and .css code below
Code
Product
html {
position: relative;
min-height: 100%;
}
body {
background-color: lightskyblue;
}
hr {
border: 0;
clear: both;
display: block;
width: 100%;
background-color: #212529;
height: 1px;
}
.block {
background-color: #fff;
padding: 30px;
margin-bottom: 30px;
}
.photo {
float: left;
height: 320px;
width: 320px;
margin: 0 20px 10px 0;
}
html {
position: relative;
min-height: 100%;
}
main {
margin: 80px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Jake's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="index.html" id="logo">
<h1>Jacob Beeson</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<section class="row">
<div class="col-md-12">
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
</article>
</div>
</section>
</main>
</body>
<footer>
</footer>
</html>
You'll need <div style="clear:both"></div> after <p>I am a ...</p>
Your article block should look like this:
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
<div style="clear:both"></div>
</article>
Also see this fiddle: https://jsfiddle.net/j8Lacshf/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" 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">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Hello there!</h1>
<h3>My name is James McGill and I'm a front-end web developer.</h3>
</div>
</section>
<div class="wrapper">
<h1>My skills</h1>
<br><br>
<h2>HTML</h2>
<div>90%</div>
<h2>CSS</h2>
<div>70%</div>
<h2>Javascript</h2>
<div>60%</div>
<h2>jQuery</h2>
<div>55%</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover; /*This makes the image cover the whole page space*/
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.intro {
height: 100%;
width: 100%;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
.content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
Hey guys,
if you view my site on your browser you will see that as you scroll down the 'h1' which says "My skills" is located just before the start of the next page.
https://codepen.io/JamesMcGill/pen/KGNEWd On codepen it's even worse.
I am having a difficult time trying to figure out why this is happening.
Well, technically it is not on the same page. However, it does appear within the same background image as the contents on the main welcoming page.
Please, give me some suggestions on how I might be able to address this issue.
Thank you..
You applied the background-image to the body element, which will cause it to fill the screen. If you want it to only cover the first section, you should apply the background-image rule to that specific section.
It is doubling up at the bottom because background-repeat: repeat is the default and you have not declared an alternative. If you want if to fill the screen, you can add background-size: cover, or simply add background-repeat: no-repeat to prevent the doubling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
Since I am not able to make the background transparent, means I want the image opacity should be minimum and the text written on it should be highlighted. Please help me out from this. As I used css opacity but the whole div is getting transparent with the text also written on it.
Here is my html and css:
.bgimg{
background: url('bg2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 600px;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Book Appointment
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
</div>
I think this is what you need. We can achieve background transparent by using pseudo class. Please check the below code.
.bgimg{
width: 100%;
height: 600px;
}
.bgimg::after {
content: "";
background: url('https://images.pexels.com/photos/137219/pexels-photo-137219.jpeg?auto=compress&cs=tinysrgb&h=350');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="" class="nav-link text-white hvr-underline-from-center" >Book Appointment</a>
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
I am trying to put my "Sanchez Designs......Ms Sanchez....and "Web Developer, Artist and Higher Education" buttons midway into the page, right about at the peak of the mountain. I have researched and tried but am unable to move it. I thought padding-top would do the trick but nope. Any suggestions?
Also, I'm learning web development so please be gentle. Thanks!
body {
background-image: url('images/background3.jpeg');
width: 100%;
height: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: 'Lato', sans-serif;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" 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="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">Andrea Designs</a>
<!--Toggle Button-->
<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>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_artist.html">Artist</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_highered.html">Higher Education</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="content">
<h1> Sanchez Designs</h1>
<h5> Ms. Sanchez is an aspiring Web Developer</h5>
<hr>
<ul class="list-inline intro-social-buttons">
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_about.html" class="btn btn-dark btn-lg">
<span class="network-name">Web Developer</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_artist.html" class="btn btn-dark btn-lg">
<span class="network-name">Artist</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_highered.html" class="btn btn-dark btn-lg">
<span class="network-name">Higher Education</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<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>
IF you want padding top try
padding-top : 20px!important
if you want div test in center why you try padding top or bottom . you can use a extra div and give style display: flex; align-items: center;
.banner {
height: 80vh;
align-items: center;
vertical-align: middle;
display: flex;
}
like : https://www.w3schools.com/code/tryit.asp?filename=FNBF6UP5MV4S
There are a lot of way to add padding or margin here.
You can add padding-top to your .col-lg-12 if your content and navbar have 2 different container by simply add another class and add padding to it.
HTML
<div class="col-lg-12 text-center padding-content">
<div id="content">
...
CSS
.padding-content {
padding-top: 30px;
}
Demo: https://www.bootply.com/jpU6nmgw8z
Or you can add margin to your navbar
CSS
.navbar {
margin-bottom: 30px;
}
Demo: https://www.bootply.com/k6vGFbX5XC
Did you try adding margin-top to say, the "content" div?
#content {
margin-top: 5%;
}
Codepen link: https://codepen.io/anon/pen/zpRQVL