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>
Related
I have tried multiple things that I have read trying to correct this issue, the big one that I've seen says that when you load you will see an error in the console, there is no error so I don't believe that one is my problem. My navbar will collapse as the screen gets smaller, but when you click on the hamburger nothing happens.
Here is my HTML
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<div class="d-none d-lg-block center">
<p class="navbar-brand d-none d-lg-block nav-quote">"She believed she could so she did." -R.S. Grey
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#aboutmelink">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html">My Resume</a></li>
<li class="nav-item"><a class="nav-link" href="index.projects.html">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html.html">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions
and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and
we no longer hosted websites so my next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img
src="./assets/sylvan_home_logo.png"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego"
href="https://www.sylvanlearning.com/stem/robotics-science"
target="_blank"><img
src="./assets/lego.jpg"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img
src="./assets/tynker.png"
height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
Try this. The main thing here is Navigation bar. I haven't changed the rest. It seems that your markup was not in proper order. I have solved it for you.
Also I have used scripts from your question. I haven't changed their order.
Run the code Snippet
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and we no longer hosted websites so my
next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img src="./assets/sylvan_home_logo.png" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego" href="https://www.sylvanlearning.com/stem/robotics-science" target="_blank"><img src="./assets/lego.jpg" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img src="./assets/tynker.png" height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
How to increase height of menu bar in this code,
how decrease column size and height
how put a rich css for this design can anyone help me without any custom css.
in notice column data should display in that yellow color place only
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a 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>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar" id="side1">Links</div>
<div class="col-md-8">
<div class="page-header">
<h1>Student Management System</h1>
</div>
<p class="lead">Home Page.</p>
</div>
<div class="col-md-2 sidebar" id="side2">notice</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
</html>
I didn't get your actual requirement, but menubar height can be increased by adding following CSS.
Note: This is a workaround, may not be responsive
.navbar{
height : 100px !important; /*keep your own height here*/
}
I wand to create a footer with links and with copyright info at the end:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlaBla</title>
<link href="bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse">
<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>
<label class="navbar-brand" for="BlaBla">BlaBla</label>
</div>
</div>
</div>
<div class="container body-content">
<hr />
<footer>
<nav class="navbar navbar-inverse" role="navigation">
<div>
<ul class="nav navbar-nav">
<li>Corporate Information</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
<li>Help</li>
<li>© BlaBla 2016 All Rights Reserved</li>
</ul>
</div>
</nav>
</footer>
</div>
</body>
</html>
But here the copyright is shown on the top of the navbar, and it is dark grey, not light gray, and I did not find any Bootstrap class.
I do not want to use the style HTML attribute, I want to solve it with pure Bootstrap. Is there any solution?
Use it like:
<ul>...</ul>
<p class="navbar-text pull-right">© BlaBla #DateTime.Now.Year All Rights Reserved</p>
Bootply
To "...copyright info at the end" - use .pull-right class, which is basically float: right.
And to color the text, use .navbar-text class.
You may want to use the class navbar-text.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Link</li>
</ul>
<p class="navbar-text">
Text
</p>
</div>
</nav>
https://jsfiddle.net/t2rrgynf/
I think is this what you want.
<footer class="footer navbar-fixed-bottom">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block
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;
}