How can I add a backgorund image that fits my content? - html

I am developing my friend's windsurf club website. The problem I have right now is, I am trying to give it a lavish look, and behind the <h1> and <h2> elements, I want my background image to lie. Right now, I have put the image and set the repeat to no-repeat but it is far apart from my content. Is it something about bootstrap? How can I correct it? The thing that I am trying to achieve is similar to these examples: image 1 image2 But right now it looks likes this: mywebsite
body {
background-color: #B1B2FF;
font-family: 'Poppins', sans-serif;
}
.navbar-brand,
.nav-link {
color: #EEF1FF;
}
.addbg {
background-image: url("images/24.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 400px;
border-radius: 1%;
}
#top h2 {
font-family: 'Noto Serif Gujarati', serif;
letter-spacing: 0.8px;
color: #EEF1FF;
}
/* font-family: 'Noto Serif Gujarati', serif;
font-family: 'Poppins', sans-serif; */
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Gujarati:wght#200;300;400&family=Poppins:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bojark Windsurf</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paketlerimiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkımızda</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Top Part -->
<section id="top">
<div class="container-fluid text-center addbg">
<div class="row ">
<div class="col-12">
<h1>Bojark Windsurf</h1>
<h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
</div>
</div>
</div>
</section>
<!-- Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

i think you can use inner html, I think that's what I can help
<div class="p-5 text-center bg-image" style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');height: 400px;">

Backgrounds lie completely in the CSS file, not the HTML file. They are inherintly behind all HTML elements. To create a background as it looks like you have done partly? I would remove the .addbg and add this line of code into the body info
background: url("images/24.jpg");

Related

Bootstrap background image won't scroll

<!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">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!--Font awesome icons-->
<script src="https://kit.fontawesome.com/4e9b2916e9.js" crossorigin="anonymous"></script>
<!--Google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Bakery</title>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white p-2 h5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="No solo pan y café logo brown">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<div class="d-flex me-lg-5 mx-auto">
<ul>
<li><span class="social-icon social-facebook"><i class="fa fa-facebook"></i></span></li>
<li><span class="social-icon social-google"><i class="fa fa-google"></i></span></li>
<li><span class="social-icon social-tripadvisor"><i class="fa fa-tripadvisor" aria-hidden="true"></i></span></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!--Main-->
<section>
</section>
<!--Js-->
<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>
</body>
</html>
It's my first post here so here goes nothing!
I'm in the process of learning html/css and right now I'm stuck on Bootstrap 5 background image.
I try to set it on the whole body, but the problem is it shows only a part of the image, the rest should be there when I scroll down but I can't scroll anything.
Here's the screenshot of the website, as you can see, a lower part of the background is missing, I should be able to scroll down but it just won't let me. Who would've thought a background image is such a pain in the neck in Bootstrap.
What am I doing wrong? Please be gentle! Thanks!
Website screenshot Website screenshot
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
}
You should use background-attachement, not background-position.
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Source: Mozilla MDN on background-attachment
Wrap your .row with .container or .container-fluid and it will solve the issue.
And if it won't scroll in mobile view you can make sure to use the meta tag in your head tag

Not able to customize google fonts in css

I linked google fonts into my code.
and I'm not able to customize it like
font-family:"Montserrat-Black or thin or light as required
I tried linking the regular style and then changing it too but still isn't working.
font weights are also not working
i used bootstrap 4 also here.
my whole code is given below
HTML
<meta charset="utf-8">
<title>TinDog</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/7258ec066a.js" crossorigin="anonymous"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand">tinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
CSS
background-color: #ff4c68;
color: white;
}
body{
font-family: 'Montserrat-Thin', sans-serif;
}
.container-fluid{
padding:3% 15%;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
}
/* Navigation Bar */
.navbar{
padding-bottom: 4.5rem;
}
.navbar-brand{
font-family:"Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.nav-item{
padding:0 18px;
}
.nav-link{
font-family:"Montserrat-Light";
font-size: 1.2rem;
}
In this code, I've selected the montserrat-black family.
In the body font-family:"Montserrat-Thin" works
but in the .nav-link font-family:"Montserrat-Light" doesn't.
why is that so?
The font families are not named with their weight. You have to use font-family: 'Montserrat', sans-serif; for all of them and use font-weight declarations separately to set the weight. For example:
font-family: 'Montserrat-Thin', sans-serif;
becomes:
font-family: 'Montserrat', sans-serif;
font-weight: 300;
This is clear if you read the CSS that Google Fonts is actually giving you (by opening the link in the browser)—you can see that the #font-face blocks are all named "Montserrat".
(Of course you'll also need to add the 300 weight to the Google Fonts link as #Jontee said: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;900&display=swap" rel="stylesheet"> )
So you only imported one of the fonts. This should import both of them:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;900&display=swap" rel="stylesheet">
Here you can select the fonts and then select embed and it will fix create the link for you.
https://fonts.google.com/specimen/Montserrat?preview.text=monster&preview.text_type=custom&query=montserrat&sidebar.open=true&selection.family=Montserrat:wght#300
This is what Matt was meaning.
Font weight 100 is Thin
Font weight 300 is Light
Font weight 900 is black
If you look at the link in the Html file it shows the different weights. wght#100;300;900
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;900&display=swap" rel="stylesheet">
<style>
.one{
font-family: 'Montserrat', sans-serif;
font-weight: 100
}
.two{
font-family: 'Montserrat', sans-serif;
font-weight: 300
}
.three{
font-family: 'Montserrat', sans-serif;
font-weight: 900
}
</style>
<body>
<h1 class="one">
Thin
</h1>
<h1 class="two">
Light
</h1>
<h1 class="three">
Black
</h1>
</body>
</html>

Cant Make the Image fit Parent Element

I'm new to bootstrap 4. I'm trying to build a responsive website using bootstrap for practice. I have an issue with my image not resizing to fit the screen.
<html lang="en">
<head>
<!-- Required Meta Data -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;700&display=swap" rel="stylesheet">
<!-- Bootstraps CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Custome CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
CANDY
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navLinks" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUR
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="text-white text-center d-none d-lg-block">
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
</div>
</div>
<div class="col-lg-6 px-0">
<img class="img-fluid" src="imgs/img1.jpg" alt="Hand Donut">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- JQuery First, Then Popper.js, then Bottstarp JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In this my image is not covering the entire column space and leaving a portion.
even when i resize the screen to medium resolution image is not covering full screen
when i try to add css to it they are being crossed of.
CSS File
body{
background: #f5d9d5;
font-family: "Nunito", sans-serif;
}
#mainNavbar{
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link{
color: white;
}
#mainNavbar .nav-link:hover{
color: #EA1C2C;
}
#mainNavbar .navbar-brand{
color: #EA1C2C;
}
<img class="img-fluid" style="float:right;" width="100%" src=...>
This will make the image fit the parent div
and should probably solve your issue

Title for the next page appearing under the same background image

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

Padding-top won't work

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