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>
Related
Am starting out on learning bootstrap 4 on my own and am having trouble as to why bootstrap is only showing part of my footer (i.e i can only see the "privacy policy" ) on my browser. I even tried creating a tag at the top but cant get it to display. The menu section is okay. Below is my HTML from my index file. I have no content yet on my CSS file. Any suggestion is highly welcomed. Also below is an image how it appears;
Bootstrap clipping words
<!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="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<title>Gamma</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand em-text" href="index.html">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="#navbarsExample09" aria-expanded="false" aria-label="Toogle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="nav navbar-nav mr-auto">
<li class="active"><a href="index.html" class="nav-
link">Home</a</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-12">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-lg-6 col-md-7 col-sm-12">
<p>Copyright ©2017, All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
You have more than 12 units for your columns.
Looks like you're missing a row around the Copyright div.
Should it look like this?
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-12">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="row>
<div class="col-lg-6 col-md-7 col-sm-12">
<p>Copyright ©2017, All Rights Reserved</p>
</div>
</div>
See the reference here for more details: https://getbootstrap.com/docs/4.0/layout/grid/
That's because you have a fixed navbar, which makes it overlap your footer. Give the content you don't want to be overlapped by the navbar a top margin.
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*/
}
here is the code that I am using but the dropdown is not being shown. My javascript ref erence is in the correct sequence. and i have also added a function for dropdown toggle.
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Include bootstrap CSS -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home </li>
<li> Login </li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook </li>
<li>Twitter </li>
<li> Google+ </li>
</ul>
</li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
</body>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
</body>
</html>
</html>
You have to insert the collapse plugin, and use include the wright versions of jquery and bootstrap. You don't have to insert any script of your own to make it works. Here is your code with the minimal modifications, just to make it works:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar Collapse</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home</li>
<li> Login</li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li> Google+</li>
</ul>
</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
</div>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</body>
</html>
Check this link jsfiddle to see a working example.
It's better if you change the tag of the navbar navbar-inverse navbar-static-top from div to nav. And also add the role="navigation" to every navbar to help with accessibility.
Hope it's useful!
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>
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