I have a React app where I have a header, container and footer. For animation purpose of route loading, I have to use position: absolute on the page rendering part of the container.
The container has a row and 2 columns. One for menu and other is the place where pages are rendered.
Now the problem is since Container second column is position: absolute footer goes below to the highest column.
Is there any way to make both columns inside row to have the same height? I am using Bootstrap 4.Any other suggestion is appreciated.
<header>..</header>
<div class="row">
<div class="col-4">
</div>
<div class="col-8"> //This is positioned absolute
<div class="page"><div> // class that applies position
</div>
</div>
<footer>..<footer> //footer goes below any column whichever has more height.
Edit:
CSS:
.page {
position: absolute;
left: 0;
right: 0;
}
All other classes are Bootstrap.
You can see the issue if you can log in to the below app with any email and any password.
https://healthrecordstack.now.sh/
As in the picture below, the footer overlaps the content. Footer sits just below the menu column as the content column is given a position absolute.
.row
{
display:flex;
min-height:80vh;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should use table as below example:
.table-row{display: table; table-layout: fixed; }
.table-col{display: table-cell; float: none; vertical-align: top; }
<header>..</header>
<div class="row">
<div class="table-row">
<div class="col-4 table-col"> </div>
<div class="col-8 table-col"> //This is positioned absolute ......
</div>
</div>
</div>
<footer>..<footer>
Related
Using Bootstrap4 to create a two column layout, the left column should scroll (currently it's not) and the right column should not scroll (currently it does as shown by the scroll bar in the image). The map should always be the height of the window (referred to as the "viewport" in Bootstrap, I think). FYI, the contents of the left column grows with time as the server pushes more hosts into it:
HTML:
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">list of hosts (should scroll)</div>
<div class="col-md-10" id="map">google map (should NOT scroll)</div>
</div>
</div>
</div>
CSS:
.col-md-2 {
border-right: 1px solid black;
min-height: 100vh;
overflow-y: scroll;
padding: 0;
}
Thanks
Here's an example that uses a fixed sidebar: https://jsfiddle.net/Lbn21js8/1/
I added an id selector to the sidebar, and a background color:
<div id="app">
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-md-2 bg-light ">list of hosts (should scroll)</div>
<div class="col-md-10 ml-auto" id="map">google map (should NOT scroll)</div>
</div>
</div>
</div>
With this CSS:
#sidebar {
border-right: 1px solid black;
overflow-y: scroll;
padding: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
The linked jsFiddle appends a new paragraph to the sidebar every 1.5 seconds, so if you wait long enough you'll see the sidebar's scrollbar become active/scrollable.
With this, as long as you constrain the map section to never be bigger than the viewport, you won't see a scrollbar for the page.
I used this CSS and it worked for me:
CSS:
#map {
margin-left:20%;
position:fixed;
}
This will allow the left column col-md-2 to be scrollable and prevent the right column col-md-10 from scrolling. By adding margin-left:20%;, the right column won't overlap the content on the left.
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
I'm trying to get my bootstrap carousel acting as the background in a fixed position. In my actual code I've got it to a full width and height that fills the screen, but it only stays in one place. I added 'position: fixed' to a class on my section containing the carousel so it'd float at the front and I was going to z-index it to behind the rest of my content, but it just completely disappears?
I've replicated the problem in this simplified example:
http://jsfiddle.net/v9FMw/4/
HTML
<div class="fill bg-green">
<div>content section (scroll down)</div>
</div>
<div class="fill bg-white">
<div>content section (further x)</div>
</div>
<div class="fill bg-green fixed-section"> <!-- fixed section declared here -->
<-- carousel code -->
</div>
<div class="fill bg-white">
<div>content section</div>
</div>
CSS:
.fill {
width: 100%;
height: 100%;
position: relative;
}
.fixed-section {
position: fixed; /* controls fixed carousel positioning here */
}
You have to give the container top: 0.
.fixed-section {
position: fixed;
top: 0;
}
Updated Fiddle
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
I am trying to use Twitter's bootstrap CSS framework and within there so far only the grid layout.
Now I simply want to align the content of each grid cell <div> to the bottom.
I am obviously no CSS buff at all.
This is the html:
<div class="container">
<div class="row">
<div class="span4">
<img src="someprettyhighimage.gif"/>
</div>
<div class="span8">
some text/links that need to be bottom aligned
</div>
</div
</div>
</div>
I cannot find a way to make the second column <div> with the text (and/or the first) be bottom aligned.
Does anybody know the css magic I would need for that?
(Or also how I would make both <div>s bottom-aligned?
Thanks a lot,
Sebastian
You need to set the position property of the class="row" div to relative and then set the position property of the div containing text to absolute and the bottom property to 0.
.row { position: relative; }
.span8 { position: absolute; bottom: 0; }
Check it out on jsfiddle:
http://jsfiddle.net/A8XE2/