The Twitter Bootstrap API tells me to add my css to add padding to the body element in between the bootstrap css and the bootstrap-responsive css. I have done so in the _master file, but it doesn't seem to be adding the padding still.
Am I reading this incorrectly or could something else potentially be wrong?
My _master head section
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bootstrapped</title>
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div>
#RenderBody()
</div>
</div>
<script src="~/js/bootstrap.js"></script>
</body>
CSS
body {
padding-bottom: 40px;
}
A visualization of the body padding not working (scrolled all the way to the top)
What you need to do is to give a padding-top: 40px to the div which contains the body.
Ex: Fiddle
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div style="padding-top: 40px">
some content 1<br />
some content 2<br />
some content 3<br />
some content 4<br />
</div>
</div>
I think you might want to use padding-top: 40px instead?
Related
<!DOCTYPE html>
<html>
<head>
<title>GucciGang Website</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
</head>
<body>
<header>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="/">Real Python (for the web!)</a>
<ul class="nav">
<li class="active">Home</li>
<li>Welcome</li>
<li>222</li>
</ul>
</div>
</div>
</header>
<div class="container">
{% block content%}
{% endblock %}
</div>
</body>
</html>
With the template.html above with Bootstrap, I expected my page to look like
but it actually looks like
Which part of my code is wrong? Am I missing something?
Just add navbar-nav class to your unordered list tag
<ul class="nav navbar-nav">
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
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.
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>
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser
Here's the code:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<div style="height: 500px; background: red;"></div>
</div>
<div class="content">
<div style="height: 500px; background: #eee;">
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and a link to the live preview: http://jsfiddle.net/7W32Z/.
Why does the border end up below the sidebar? It has to do with the clearfix applied to the <ul class="tabs" /> element, because if I clear: right only, the border jumps up.
Float ul.tabs and the border should be fixed.
http://jsfiddle.net/laheab/7W32Z/3/