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
Related
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.
I am trying to create a header with dynamic height and is fixed at the top of the page while scrolling (visible throughout scrolling). The reason for dynamic height is due to the resizing of browser, so when the text in the header is wrapped, the height of the header is increased.
Therefore, the increased height covers part of the main body before the start of scrolling. Although I already tried to add padding-top: YYpx to the main body, when the height of header changes, it covers the main body's element. Basically, I would like to have 2 continuous containers but not overlapping each other, and the 1st will sticky at the top while scrolling the 2nd container.
I would like to scroll using the whole page instead of only having the scrollbar in the 2nd container. If this is not possible, then scrolling within the 2nd container can be accepted as answer as well, provided that the contents of 2nd container will shift down according to the new height of 1st container.
I have been struggling this for few days, I tried this, but the .header-container covers part of the background which is not something I intended.
I was trying to use navbar as header, but it turns out really restricting on what I can put inside, so I made a custom header instead to fix at the top.
Before (Without using CSS #media):
https://jsfiddle.net/q19of4j6/1/
After (I tried to use CSS to shift the 2nd container manually):
https://jsfiddle.net/q19of4j6/
Resize the above jsfiddle to see the problem.
Using #media to shift the container is not feasible for me.
What I have now:
CSS
.custom-navbar {
padding: 0.5rem 1rem;
}
body > main {
padding-top: 112px;
}
#media (max-width: 1153px) {
body > main {
padding-top: 136px;
}
}
#media (max-width: 955px) {
body > main {
padding-top: 160px;
}
}
HTML
<body>
<header>
<!--Fixed navbar-->
<nav class="custom-navbar fixed-top navbar-light bg-light">
<!-- Contents in the header that I wish to keep at the top while scrolling-->
</nav>
</header>
<main role="main">
<div class="container-fluid">
<table class="table table-striped table-bordered dataTable" cellspacing="0"
width="100%" role="grid">
<!--Contents of table, and contents that will move while scrolling-->
</table>
</div>
</main>
</body>
I would expect that while resizing the browser width(not yet start to scroll), the contents inside the main will shift according to the new height of header.
But now, when the header height increases, it covers part of the contents of main.
I would still expect the header to be fixed at the top of the page and contents in main can scroll using the full page scrollbar.
As you can see here, there's no simple way to have dynamic fixed header height. Most solutions involve setting a defined header height or JS.
IMO, the simplest solution is to use position: sticky instead of position: fixed:
https://www.codeply.com/go/ElHS24d2vT
<header class="sticky-top">
<!--Fixed navbar-->
<nav class="custom-navbar navbar-light bg-light">
<div>
whateverlalallala
</div>
</nav>
</header>
<main role="main">
<div class="container-fluid">
<table class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid"></table>
<p style="background:red">1</p>
<p style="background:blue">2</p>
<p style="background:orange">3</p>
<p style="background:green">4</p>
</div>
</main>
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;
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% }
How do i keep my footer at the bottom of the page even when I click the toggle for the sidebar? The footer I made is at the bottom but whenever i click the sidebar toggle it goes up like this
Im using bootstrap btw.
This is how I did it. I'm not entirely happy with the outcome as the height of the footer is a fixed number (I would prefer if the height could be dynamic).
<div id="wrapper">
All your contents, div, nav etc go in here
<div id="push"></div> <!--add the push div here -->
</div>
<footer>
</footer>
The CSS:
#push, footer {
height:100px; /*or whatever height you need */
}
I'm not sure what your codes look like, so I can only hope that this helps.
I think you are looking for this: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
It is a plugin which makes your footer sticky. You can find the code in the examples folder of your bootstrap download.