I am using bootstrap 5 and I need to draw a thin line after the logo.png below. There should be no spaces between the line and logo
and still no spaces between the text and line.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
<nav>
How can i achieve this?
Use margin: 0 to get rid of the space between the elements
h2, hr {
margin: 0;
}
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="https://picsum.photos/100" />
</a>
<hr>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
</nav>
simply add a border-top to the text by adding the border-top-class
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
</div>
</div>
</nav>
This will do :
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" style="padding-bottom:0px;padding-top:0px;marin-bottom:0px;margin-top:0px;" />
</a>
<hr style="padding-bottom:0px;padding-top:0px;margin:0px;">
<h2 style="padding-top:0px ;padding-bottom:0px ;margin-bottom:0px;margin-top:0px;">Zombie Testing</h2>
</div>
</div>
<nav>
check at this:https://jsfiddle.net/sugandhnikhil/t6p4dubo/12/
Related
This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 2 months ago.
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="float-start .d-none .d-lg-block .d-xl-none">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Example 1</h1>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
i wanted the website can be visible only lg or md devices otherwise the logo will be hidden.
You need to add both, Bootstrap CSS and Bootstrap JS.
To hide logo on mobile, add Bootstrap classes d-sm-block d-none.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="d-sm-block d-none">
<div id="logo-img" alt="Logo image">Logo</div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Example 1</h1>
</a>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
What I have:
A navbar, with a group of buttons on the right-hand side.
When the navbar becomes too small (e.g. on a smartphone), the div divides the two buttons up into 2 rows. In that state, I want to align the 2 buttons inside the div to the right side, but no matter what I try, Bootstrap always aligns the items to the left side, as shown in the picture. (outline just for illustration)
Good:
Bad:
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<image class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2">
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>
How can I fix this?
Give the buttons div it's own flex container with d-flex, then add the justify-content-end class (aligns to the right) and flex-wrap class so that they wrap as desired.
More info: https://getbootstrap.com/docs/5.0/utilities/flex/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<img class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2 d-flex justify-content-end flex-wrap">
<a class="btn btn-orange m-1" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>
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
I mentioned the bootstrap navbar fix code correctly. When I am scrolling the screen, my sections overflowing the navbar. Navbar is not yet fixed in the top of the page. Kindly confirm the changes should be made in bootstrap.min.css or we should change in HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RaLas</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/oldcss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" crossorigin="anonymous">
</head>
<body>
<!-- Start: Navigation Clean -->
<nav class="navbar navbar-light navbar-expand-md navbar-inverse navbar-fixed-top navigation-clean sticky-top">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1"><img src="assets/img/Logo_name.png" style="margin-left: -5px;height: 40px;width: 200px;">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active navbar-text" href="#home" style="color: #205D84;"><strong>HOME</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#aboutus" style="color: #205D84;"><strong>ABOUT US</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#services" style="color: #205D84;"><strong>SERVICES</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#contactus" style="color: #205D84;"><strong>CONTACT US</strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- End: Navigation Clean -->
<section id="home" style="padding-top: 0px;padding-bottom: 0px;">
<header id="homepage" class="masthead text-center text-white d-flex home" style="background-image: url("assets/img/homepage_Background_only.jpg");margin-top: 0px;padding-top: 0px;">
<div class="container my-auto" style="margin-top: 161px;">
<div class="row" style="margin-top: 150px;">
<div class="col-lg-10 mx-auto" style="margin-top: -150px;"><img src="assets/img/Ralas_logo_homepage_png.png" style="width: 316px;">
<h2 style="margin-bottom: 7px;">Welcome to RaLas</h2>
</div>
</div>
<div class="col-lg-8 mx-auto" style="margin-top: 10px;"><a class="btn btn-primary text-center btn-xl js-scroll-trigger home_page_button button_hover" role="button" href="" style="background-color: rgba(22,138,221,0);padding-top: 5px;height: 30px;font-size: 15px;">Follow us</a></div>
<!-- Start: social media Icons -->
<div class="row" style="height: 400px;margin-top: 30px;">
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/insta.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Instagram</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/facebook.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Facebook</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
<div class="login-card"><img class="profile-img-card" src="assets/img/whatsapp.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Whatsapp</p>
</div>
</div>
</div>
<!-- End: social media Icons -->
</div>
</header>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<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.4.1/js/bootstrap.min.js"></script>
<script src='contatcjs/sampjs.js'></script>
<script src='contatcjs/faq.js'></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</body>
</html>
Try to replace the class navbar-fixed-top with just fixed-top class in <nav class>
I got 2 hr lines in my jumbotron. The first one aligns correctly as I want at the beginning of the page. The one at the bottom of the logo should be at the end of the page. I set a vh hight of 100.
.jumbotron{
height: 100vh;
How can I align the hr at the end? I tried something like align-items-end, but this didn't work out.
I'm using Bootstrap 4 and the html looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<hr style="background: white; justify-content-start">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="align-self-end" style="background: white;">
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
To solve this (while keeping the <hr> elements inside the jumbotron), add the classes d-flex flex-column h-100 to the container inside the jumbotron and then add the mt-auto class (margin-top:auto) and optionally the mb-0 class (margin-bottom:0) to the last <hr> element.
d-flex flex-column classes enable a flexbox column and h-100 gives it 100% height. mt-auto on the <hr> then pushes it down. Via the pb-* class on the container, you can then control how far from the bottom the <hr> sits. In this case, I've chosen pb-4.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron bg-info pb-0" style="height: 100vh;">
<div class="container d-flex flex-column h-100 pt-0 pb-4 header-h">
<hr style="background: white; height: 1px; width: 100%; border: 0">
<div class="align-items-start row justify-content-center mx-auto">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="https://placehold.it/500x100" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="mt-auto mb-0" style="background: white; height: 1px; width: 100%; border: 0">
</div>
<!-- container -->
</section>
<!-- Header -->
Note: I've also added mx-auto to the logo image div to center it horizontally.
Every thing is fine with your code, Except you have coded <hr> tags inside the jumbotron, just add those hr tags before and after the jumbotron, then you will get result as u expected
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
<style>
.jumbotron{
height: 100vh;}
</style>
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<hr style="background: white; justify-content-start"/>
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<hr class="align-self-end" style="background: white;"/>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>