Logo gets cut in responsive view - css

Bootstrap 4
I got the problem, that the Logo in the header gets cut when I watch it in the Chrome developer tools for example in the responsive view Galaxy S5
I think the Logo Container is too big and needs to go after the navbar but I have no clue to do it so.
/* === Navigation ===*/
.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
color: #fff;
font-size: 0.9em;
font-weight: bold;
}
.navbar-dark {
background-color: #2e82b0;
}
.navbar {
min-height: 80px;
}
.navbar>.container {
border-bottom: 1px solid #fff;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 1.4em;
padding-bottom: 1.4em;
}
}
#media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
font-size: 1.2em;
}
}
**CSS**
/* === Header ===*/
.hero-bg {
background-color: #2e82b0;
}
.img-logo {
max-width: 60%;
margin-top: 15%;
margin-bottom: 10%;
}
.line {
border-bottom: 1px solid #fff;
}
<!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>
<!-- Navigation
============================================================================================= -->
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top py-0">
<div class="container">
<button class="navbar-toggler btn-round" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle">
<span class="icon-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</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
============================================================================================= -->
<!-- Header -->
<section id="home" class="hero-bg">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- Scripts
============================================================================================= -->
<!-- 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>


Whenever you use the fixed-top class for your navbar, you need to add the appropriate top margin and/or top padding to the container that follows your navbar. And don't use percentages for margin/padding in this case. Use rem units or px instead.
Here's a working example (click "run code snippet" below and expand to full page):
<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>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top py-0">
<div class="container">
<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">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</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 mt-5 pt-5">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo col">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="https://placehold.it/260x130" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
Notice: This code snippet doesn't use any of your custom css and for spacing only the classes mt-5 pt-5 are used in this case.

Related

Bootstrap 5 - justify-content - hower background for whole <li>

I have a code currently. This is dirt.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta class="nav-lin" tags -->
<meta class="nav-lin" charset="utf-8">
<meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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>
.container {
max-width: 1170px;
}
.bg-dark {
background-color: #90080a !important;
}
ul li {
border-right: 1px solid #c88383;
}
ul li:hover {
background-color: #7b0204;
}
ul li:last-child {
border: none
}
.nav-link {
padding: 0.5rem 0;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<header class="text-white bg-dark">
<ul class="nav justify-content-around">
<li>
<a class="nav-link text-white py-3" href="#">Trio Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Engagement Rings</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3 " href="#">More</a>
</li>
</ul>
</header>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
I want to determine. Why the background does not extend to the whole li. How to achieve this? Elements are incorrectly arranged. I want to achieve → https://i.imgur.com/JXoaFlo.png. I would like to work on the Flex container.
I need to find out what is missing. This is my first time with bootstrap and a total of coding.

Bootstrap 4 not centering vertically

Something really strange happening, I am using the right classes and style to center my h1 and paragraph. The div with my col-12 that contains the H1 and the other col-12 that contains the paragraph should be close one to another in the center of the Row div.
Why it is not working even tho I am using justify-content center and align-items center? Thank you!
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

You need to consider align-content-center (https://getbootstrap.com/docs/4.1/utilities/flex/#align-content)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b align-content-center">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

Unusual Background Issue when using Bootstrap theme - ASP.NET Core

I have a html page using a bootstrap theme. I have a slight problem with CSS styling. It is a problem I have never come across. The problem is that the background doesn't fill the page on page load, only when the page is resized dos it fill the page. Any suggestions?
Thanks,
James Hyland
Here is the _Layout.cshtml code;
#{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#side-navbar-footer {
position: fixed;
bottom: 0;
padding: 10px 15px;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
border-top: 1px solid black;
}
.dropdown-toggle{
color:black;
}
#page-wrapper {
background: radial-gradient(white 10%, grey );
background-size: cover;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HBL Website</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav id="navbar-top" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Hylands Biggest Loser</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<a asp-controller="Account" asp-action="Login"><i class="fa fa-sign-out fa-fw"></i> Login</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-line-chart"></i> My Progress<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weights
</li>
<li>
Target Weight
</li>
<li>
My Summary
</li>
<li>
</ul>
</li>
<li>
<i class="fa fa-users"></i> My Group<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Members
</li>
<li>
Summary
</li>
<li>
</ul>
</li>
<li>
<a style="bottom:0" href="tables.html"><i class="fa fa-copyright"></i> Needlecast Ltd. 2017</a>
</li>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
#RenderBody()
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
#RenderSection("Layout", required: false);
#RenderSection("Scripts", required: false)
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
</body>
</html>
And here is the Index.cshtml code (which isnt causing the issue);
#{
ViewData["Title"] = "About";
}
<style>
*{
text-align:center;
}
</style>
<body >
<img src="~/img/asset 1.jpg"/>
<h1>Welcome to Hylands Biggest Loser!</h1>
<h2>Click the buttons on the side. They will allow you to view your weights, progress, and your overall weekly summary.</h2>
<h2>You can also view the other members in your group, as well as a weekly summary for all members.</h2>
</body>

Set all your main wrapper elements to have a height of 100% and your background should always take up at least 100% of the page.
Add this css style:
html, body, #wrapper, #page-wrapper { height: 100%; }

Header image is getting covered by Bootstrap 's menu

The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">

Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.

The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

I'd like to display a header as 100% width on browser with Bootstrap

I'd like to display the black header as 100% of browser, but when I make the browser wide and narrow, the header is not showed as 100% width.
You can see it in this photo.
How should I change or add css code?
My site is here.
Sorry, I forgot to write my code. My code is following this.
$(document).ready(function(){
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
});
html {
font-size: 62.5% !important; /* 10 px */
}
/*header {
position: absolute;
text-align: center;
top: 0px;
z-index: 1000;
color: #fff;
width: 100%;
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}*/
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-inner {
margin-bottom:50px;
}
/*.logo {
float: left;
text-align: left;
display: inline-block;
}*/
.transparent-header {
z-index: 22;
position: absolute;
width: 100%;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#carousel-example-generic {
width: 100%;
height: 100%;
position: relative;
}
.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
display: table-caption;
}
.nav.navbar-nav li,
.nav.navbar-nav li a {
display: inline-block;
}
#gnav {
font-size: 0.9em;
/*width: 100%;*/
}
#logo
img {
display: block;
margin: auto;
}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<meta name=”robots” content=”noindex,nofollow,noarchive,noodp,noydir”>
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
{% block additional_css %}{% endblock %}
{% block custom_css %}{% endblock %}
</head>
<body>
<div id="wrapper">
<!-- <div class="container" id="range">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:Yellow;">ExtraSmall</div>
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3" style="background-color:green;">Small</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" style="background-color:blue;">Midium</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" style="background-color:Red;">Large</div>
</div>
</div> -->
<!-- Header -->
<header id="header" class="header clearfix fixed transparent-header" >
<div class="container-fluid" id="header-inner">
<div class="row">
<!-- Global Navigation -->
<div id="gnav" class="" data-spy="affix" data-offset-top="94">
<nav class="navbar navbar-inverse" id="">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">商品紹介</a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">ご注文</a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">お問い合わせ</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">会社案内</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- .nav .navbar-nav -->
</nav> <!-- .navbar .navbar-default -->
</div> <!-- #gnav .col-md-9 -->
<!-- Logo -->
<div id="logo" class="">
<a href="#">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/20120422044236" id="logo-img" class="img-responsive logo-img" height="50" width="50">
</a>
</div> <!-- #logo .col-sm-3 -->
</div> <!-- .row -->
</div> <!-- .container -->
</header> <!-- #header .clearfix -->
<section id="">
<article id="apple">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg" alt="First slide">
</div>
<div class="item">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-2.jpg" alt="Second slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div>
<span>Bootstrap carousel</span>
</div>
</article>
</section>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
</div> <!-- #wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

/** Full Width Header CSS **/
#gnav{
width: 100%!important;
}
This css fix your header issue.

As i can see, you are setting width with jquery, so you need jquery on resize to fit again the full width:
$( window ).resize(function() {
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
});
Change this line of code:
$(document).ready(function(){
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
});
to:
$(document).ready(function(){
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
$( window ).resize(function() {
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
});
});

You may try to use vw (viewport width) units on you header. For more information, you can read documentation

Create custom css file and write your css code here, custom css should be below of bootstrap.css
like this
<link rel="stylesheet" href="boostrap.css">
<link rel="stylesheet" href="custom.css">

Resources