I am not sure why I can't view content beneath my navbar.All I get is blank in my in place of the <h1>Hello</h1>. Would appreciate some guidance for this code in particular, but also any resources to learn more about how to avoid this problem in the future.
<!DOCTYPE html>
<html>
<head>
<title>A random title piece.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../static/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="divider-vertical"></li>
<li>
<form class="form-search">
<div class="input- append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">
Search
</button>
</div>
</form>
</li>
<li>
<a id="swatch-link" href="../popular">Example 1</a>
</li>
<li>
<a id="swatch-link" href="../sold">Example 2</a>
</li>
<li>
<a id="swatch-link" href="../new">Example 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Hello</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/json2.js"></script>
</body>
The content is hidden beneath your header .Wrap your content with a div with class container and than let us know .
Here is a jsfiddle
Jsfiddle with padding
<div class=".container">
<h1>Hellow world</h1>
</div>
And add the followingin your css
.container > h1
{
margin-top:70px;
}
Or you can use the following , I suggest using this one :
.container > h1{
padding-top:70px;
}
Related
My Code: https://jsfiddle.net/jqno1x6p/
I have this code, at the top, I have a hero element where I would like to place an image at the bottom-right section of the hero element and then overflow into the next section. I am not sure how to accomplish this.
Here is how my Hero element is set up:
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
Not sure what do you mean by overflow into the next section... you can set the overflow:hidden on hero-image class, to hide the overflown portion of the image:
.hero-image {
overflow:hidden; // <-- hide the overflow
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
A different approach (and perhaps better one) would be to fit the image to your page, by setting the image width equal to your page width - the height would be adjusted:
img {
width: 100%;
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image" style="overflow:hidden">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
On my page navbar appears vertically instead of horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Home | Bootstrap
</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My bootstrap application</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search" />
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello world!</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
Bootstrap 4
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sample
Why is that? According to the docs it should horizontal by default.
Add navbar-toggleable-md class in nav element to make it looks horizontally in md view :
See this fiddle
Docs :
The original answer applied to Bootstrap 4 alpha. For Bootstrap 4.0+, the navbar-toggleable-* classes have changed to navbar-expand-*. Use one of the navbar-expand-* classes to keep the Navbar horizontal.
I am using bootstrap in codeine.io. I have moved the <h1> tag to the body section and then it appears but I want it in a div so I can center it to the middle of the page. What am I doing wrong?
<body>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
<header>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
</header>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<a href="#" class="back_down" style="display: inline;">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>
</body>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
Please research proper html structure.
Should be:
<html>
<head>
<!--All of your links and styles-->
</head>
<body>
<!--All of your content-->
</body>
</html>
Your html code in invalid. Try this:
<!doctype html>
<html>
<head>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
</head>
<body>
<a href="#" class="back_down" style="display: inline;">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
</div>
</body>
</html>
You end your body before you even put anything in it.
Also you put your header inside of your body...
Try this structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
All of your inputs and meta information will go between the header tags, and everything else should go between the body tags. You won't really need to worry about html for what you are doing.
The answer is pretty simple: move all your main HTML inside the body tag. And you also used header instead of head tag for your links. Your code should looks like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
</head>
<body>
<div>
<ul class = "nav nav-pills">
<li class = "pull-right">
About Me
</li>
<li class ="pull-right">
Portfolio
</li>
<li class = "pull-right">
Get In Touch
</li>
</ul>
<div class = "pageOne">
<div class="block text-center">
<h1>Birth of A Method</h1>
</div>
</div>
</div>
<div class ="btnList">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Facebook</a>
</div>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src="https://use.fontawesome.com/4880cded54.js"></script>
</body>
</html>
Cheers
I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}
Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I'm using Bootstrap columns to lay out my administration page and I'm having some trouble getting the footer to stay at the bottom. For some reason, the footer keeps flying up into the bottom of the second column instead of saying below the columns, despite not being included in the column structure. Why might this be happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administration</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/Administration.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="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 class="navbar-brand" href="/">Football Pool 2014</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Rules</li>
<li>Results</li>
<li>Weekly Picks</li>
<li>Winners Pool</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="xxx" /> <ul class="nav navbar-nav navbar-right">
<li>Administration</li>
<li>
Hello User!
</li>
<li>Log off</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Administration</h2>
<div>
</div>
<div>
<div class="col-md-6">
<a class="adminButton" href="/Home/CreatePerson">Create Person</a>
<a class="adminButton" href="/Administration/UpdateOrDeletePerson">Update or Delete Person</a>
<a class="adminButton" href="/Administration/ManageResults">Manage Results</a>
</div>
<div class="col-md-6">
<a class="adminButton" href="/Administration/UpdateWeeklyPicks">Manage Weekly Picks</a>
<a class="adminButton" href="/Administration/UpdateWinnersPicks">Manage Winners Picks</a>
</div>
</div>
<hr />
<footer>
<p>© 2014 - us</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"xxx"}
</script>
<script type="text/javascript" src="http://localhost:123/xxx/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
CSS:
body {
}
.adminButton
{
display:block;
background-color:#0072C6;
padding:30px;
width:300px;
border-radius:5px;
text-align:center;
font-size:20pt;
margin:1px;
color:#FFFFFF;
font-family:'Segoe UI Light';
}
.adminButton:hover
{
background-color:#1E82CC;
text-decoration:none;
color:#FFFFFF;
}
.adminButton:active
{
background-color:#212121;
}
Yeah I think drip is correct. Check out the Bootstrap docs on grids. The order should be container > row > column, though the column class is unneeded if you just want a single full width column. This will work:
<div class="row">
<footer>
<hr />
<p>© 2014 - us</p>
</footer>
</div>
you missed to add row check this
HTML
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>