I've read the different posts here asking for footer help; but unfortunately I do not see anything here that have worked in assisting me.
I am building a web app where I am trying to fix the footer to the bottom of the page without overlapping my nav bar (Orange bar) on the left hand side.
Currently my page and code are:
fixed bottom, overlapping nav
<div class="container-fluid">
<div class="HeaderBar row">
<div class="col-md-12">
<img src="images/systemslogo.png" />
</div>
</div>
<div class="FeatureBar row">
<div class="col-md-12">
<p>Welcome</p>
</div>
</div>
<div class="row min-vh-100">
<div class="navbar col-md-1" style="background-color: #f78a00;">
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<AlertSuccess/>
#Body
</div>
</div>
<div class="row fixed-bottom" style="background-color: #CCCCCC;">
<div class="col-md-12">
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
If I remove the "fixd-bottom"; the footers width fixes; but then the footer floats to the top of the page like so:
Floating footer proper width
I have also attached my end goal image; I have blocked out the personal content.
End Goal
I have tried:
Position relative with Bottom 0
margin left (although moves footer over; it screws up when looking at mobile view where there should be no margin. (wasn't sure if I should do a media query and use this option)
Position Absolute with mb-0
Other ideas, but cannot recall
what I have tried.
I am building this app in Blazor with Bootstrap 4.5.2
Thanks everyone for the assistance. I've been googling and trying for past 2 hours with on success.
You're looking for position: fixed;
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
Source # https://www.w3schools.com/css/css_positioning.asp
Related
Hi I feel dumb for asking the following but im at a loss. I am trying to create the following layout for a website but have not been able to create exactly what I want. I know it should be very simple to do but I'm a developer not a UI / UX wizard.
So im looking to have a side bar on the left with menu items, a top nav (fixed to the top of the page) and a footer fixed to the bottom of the page with the main body of the site scrolling within the area left between the top nav and footer.
There are also pages where I would like the content in the main body to be vertically and horizontally aligned (form input)
Ideally im looking to use bootstrap 5.2 but am not against using css grids or whatever magical methods there may be to get to what im looking to do. I'm also looking to try and make this all responsive hence starting to use Bootstrap I didn't want to have to implement my own media queries to do it.
Thanks in advance for any help or suggestions, I have been hitting my head against a brick wall with this for far too long and thought I would reach out and see if anyone was able to help.
You have two distinct columns, (1) sidebar and (2) everything else.
Within the main row, we can form the two columns: col-2 and col-10, with the first acting as our sidebar and the other acting as our main column.
In the main column, we add a row and then add to it the nav, main content and footers.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 bg-dark text-light">
sidebar
</div>
<div class="col-10 bg-light">
<div class="row h-100">
<div class="col-12 bg-primary nav">
nav
</div>
<div class="col-12 main">
<p>1</p>
<div style="height: 5000px;">a</div>
<p>2</p>
</div>
<div class="col-12 bg-primary footer">
footer
</div>
</div>
</div>
</div>
</div>
In the CSS we set the height for the nav and footer, and then use calc() to measure the height our main content should be and set the overflow to scroll to get the scrollbar if the content is larger than the height.
.nav {
height: 60px;
}
.main {
height: calc(100vh - 120px);
background: #f1f1f1;
overflow: scroll;
}
.footer {
height: 60px;
}
I want to show the image in right side of the top using bootstrap4, but don't know how to resize the image height to meet the same height (keep ratio) as left part
code (want to remove 200px)
<div class="container">
<div class="row">
<div class="col-sm">
<div class="alert alert-success">
why cannot I still use table for this kind of tasks? why cannot I still use table for this kind of tasks?
</div>
<div class="alert alert-info">
It is end of 2021
</div>
<div class="alert alert-info">
Now I'd updated to div, this contents can have more text
</div>
</div>
<div class="col-sm">
<img width="200px" src="https://www.codeply.com/images/partner_creativetim.png" />
</div>
</div>
</div>
see https://www.codeply.com/p/flP5E5EpWk
I approached it a different way although this may require you to edit the height and width of your image a little.
First I removed the image from that Div and added a class bg-smile
<div class="col-sm bg-smile">
<!-- stays empty -->
</div>
I've also added mb-0 to remove the bottom margin from the 3rd text box so the image exactly lines up at the bottom.
Then added a few CSS instructions for the new class and to make the smile image a background of the Div and center it.
.bg-smile{
background: url(https://www.codeply.com/images/partner_creativetim.png) 50% 50% no-repeat;
}
I'm trying to create a partial view for my home work and I have approximately done that, but there is one issue that is annoying me: Overflow-Y is not working in any case. I tried to set the height of my DIV tag in % and also in PX but in both cases it doesn't work.
I want to add the scroll option when content overflows the height of the nested DIV tag.
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;height:70%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;overflow-y:auto">#RenderBody()</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
But this is not working at all, I even tried to set the height in PX. The height of DIV increase as content is added to the body.
table-cell don't seems to support overflow, so you need to add a child and set its height ( and set its overflow-y ).
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;">
<div style="height:200px;overflow-y:auto;">#RenderBody() -> "xxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxx"</div>
</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/