I just started coding and i am building a Website with bootstrap. I want to create a simple Container (id="test") with a background image. I don't know why but i just does not set the background image and i am out of ideas. I am also using external CSS. I just found out that the collapse button is not working. Please help me fix those two Problems.
greetings,
Johannes Getzner
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-default">
<div id="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand">Example</a>
</div>
<div class="collapse navbar-collapse">
<ul id="listleft" class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul id="listright" class="nav navbar-nav navbar-right">
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="test">
</div>
</div>
</body>
</html>
CSS
#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 100%;
}
#test{background-image: url("background2.jpg");
}
Your css looks like it might be ok, but doesn't look like you're setting a height or width on that empty div. Probably you're getting a 0px by 0px empty div with the background of your image
The div with id="test" doesn't have any content; therefore it doesn't have a height. So whatever background you give it won't show up.
Solution: give the div a height in the css.
#test {
background-image: url("background2.jpg");
height: 100px; /* or whatever */
}
(or, put something in the div, like text or something.)
Change the order of style links in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
Related
I've got a screenshot and code of my current site:
CODE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
SCREENSHOT
Website Navbar
I would like the whole navbar to stretch across the top.
Any help would be appreciated!
Hey there is so many mistakes in your code copy paste this code its working fine
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</body>
</html>
Use position: absolute, top: 0px and left: 0px to put the navbar in the top-left corner of the page.
Then use width: 100% to make it "stretching" accross the top.
So basically you'll add this to the <style>:
.navbar {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
Here is your full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
.navbar { /*This will do the trick.*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
A living demo here: https://codepen.io/marchmello/pen/bGVGzWW?editors=1000
I am trying to change/remove the border radius of the navbar component. I tried the solution discussed here, How to remove the "border-radius" of the navbar-inverse in Bootstrap 3?.
I have created a fiddle at : https://jsfiddle.net/fts1b0z9/
HTML :
<!DOCTYPE html>
{% autoescape true %}
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "mainDiv">
<nav class="navbar navbar-inverse" style="border-radius:none !important">
<div class="container-fluid">
<div class="navbar-header" style="border-radius:none !important">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</div>
</body>
</html>
{% endautoescape %}
CSS:
.navbar-header{
color: #5e0231;
background-color: #5e0231;
}
.container-fluid{
color: #5e0231;
background-color: #5e0231;
width:1000px;
}
.mainDiv{
width:1000px;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
If you notice, the maroon color spills out of the border. I am not sure how to fix this.
It would be great if someone could help me fix this.
Thanks!!
The simplest:
.navbar-inverse {
border-radius: 0;
}
isn't working? Or it isn't what you mean?
Define your custom stylesheet after the bootstrap declaration.
.navbar {
border-radius: 0;
}
I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!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">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}
I am working on sticky footer. I have created html and css but css seems to be not working. can anyone let me know where I am going wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="C:\Users\Man\Desktop\testi.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TESTING</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Performance</li>
<li>Book Library</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p class="text-muted credit">Testing project Martin Bean </p>
</div>
</nav>
</div>
</body>
</html>
testi.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 260px;
background-color: #fdfdfd;
}
Are you using firefox, You need to change file path like this
<link rel="stylesheet" href="file:///C:/Users/Man/Desktop/testi.css">
I'm making a website using the Bootstrap FlatUI Framework and I found something weird happening. When I use <br> tags after the nav bar it makes this weird white box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS:GO - Premium Betting</title>
<meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="dist/css/flat-ui.min.css" rel="stylesheet">
<link href="docs/assets/css/demo.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="dist/js/vendor/html5shiv.js"></script>
<script src="dist/js/vendor/respond.min.js"></script>
<![endif]-->
<style>
html {
background-color: #485B6E;
}
.logo {
width: 300px;
}
.navbar {
height: 90px;
}
.navbar-nav {
margin-top: 35px;
}
.place {
height: 32px;
background-color: #ecf0f1;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-tasks"></span>
</button>
<a class="navbar-brand" href="#"><img class="logo" src="img/home/main_logo_complete.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="a{text-transform: uppercase;}">
<li>HOW TO PLAY</li>
<li>SUPPORT</li>
<li><img src="img/icons/sits_small.png"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<br><br>
<div class="place"></div>
<br><br>
<div class="container">
<p>Hello</p>
</div>
<script src="dist/js/vendor/jquery.min.js"></script>
<script src="dist/js/flat-ui.min.js"></script>
<script src="docs/assets/js/application.js"></script>
</body>
</html>
Image:
That's not a "weird white box". That's your site's body color showing through where you have content not inside an element with a differently-colored background. You can eliminate the breaks, put some padding in that div (to push it below the navbar) and see basically the same thing.
.place {
...
padding-top: 150px;
overflow: hidden;
}
Demo