I tested many codes to pin the footer on the bottom of the page but none of them worked.
This is my footer tag:
<footer class="container py-5 navbar-fixed-bottom">
And the div after that:
<div class="row" style="height: 100%">
What's wrong? Why it didn't work?
Emergency question: please help
I'm working with Django(If that helps)
Hard to say with only these few lines of code but if you're using bootstrap 4 with Django then the bootstrap classes to fix the navbar to the bottom would usually be class="navbar fixed-bottom" but you could also use css to do this:
footer {
position: fixed;
bottom: 0;
}
Hope this helps.
Related
How can i keep the footer sticky at the bottom when that certain page doesn't have enough content in it. Bootstrap class "sticky bottom doesn't work properly in such cases"
<body class="d-flex flex-column min-vh-100">
Add these to body, and these to footer
<footer class="mt-auto">
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
Don't forget to add
body { padding-bottom: 70px; }
or otherwise the page content may be covered
This will be an easy question for most of you no doubt. I am trying to make a web page for my friend using this theme:
http://www.templatemo.com/live/templatemo_452_stone
I'm trying to move the header "STONE" more to the left, any ideas on how to do this?.. Also if possible I'd like the front-page image to be slightly higher up than it is.
Thanks in advance, I've got a headache from all the messing with it!
Looks like your .container class has a set width of 1177px. If you only want the header to move and not the links as well, then you'll have to add some negative margin.
.navbar-header {
margin-left: -50px;
}
Change your class container to container-fluid as below.
<div class="site-header">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
The final output would be as below.
The difference between container and container-fluid as stated in the answer here is
.container-fluid continuously resizes as you change the width of your
window/browser by any amount, leaving no extra empty space on the
sides ever, unlike how .container does. (Hence the naming: "fluid" as
opposed to "digital", "discrete", "chunked", or "quantized").
You have to set this css rule to achive it:
div.row {
margin-left: -100px !important;
}
But as I don't know about your html/css structure it may have side effects...
You can also search in the html for the line:
<div class="row">
and put the style inlined:
<div class="row" style="margin-left: -100px">
Of course change -100px for the number of pixels you want. In the original css it's set to -15px;
I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}
Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>
/////////////////////////////////////////////////
body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover;
}
Edit:
Firefox + Chrome + IE10 results ===|================|===
Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.
Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.
The solution was simple. This is how I div it:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div> <===================this Div wrapping jumbotron
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</div>
</body>
No changes to any part of the CSS. I don't know why it works, but it just works.
If you're just trying to remove the padding, then you'll want to put padding:0; in your .specialjum and make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important; if it needs to be called before. Also repeat this for margin-right: and add in width:100%; if it isn't stretching to the width of the page which I believe it should already.
See this jsFiddle
For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>.
I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.
In order to make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):
#if (ViewData["Title"].Equals("Home"))
{
#RenderBody()
}
else
{
<div class="container container-main">
<main role="main">
#RenderBody()
</main>
</div>
}
Change width of .container to 100%:
container { width: 100% }
There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.