I have a couple of divs sat side by side that need the button to be on the bottom.
I need the button to sit on the bottom of the .col-sm-4 container, without the h3 tag pushing it further out. Does anyone have a hack or some kind of solution?
The h3 tag size needs to be responsive as its text may change. I've got it to a point where the boxes are pushed out of the container, but now I'm stuck.
____________________Better explanation_______________
My h3 tag is pushing my .col-sm-4 outside of the container. I need the button to be at the bottom of the div.
In this js.fiddle, I have provided two divs. The first one is where I want the button, but I need the h3 tag to look like div 2. I can't seem to achieve the second div without the button being pushed out of the container.
https://jsfiddle.net/19obrm0q/1/
edit - h4 -> h3.
You can't put an element with nonzero height in the same container as a full-height div and expect both to fit in 100% of the parent's height. That's what height: 100% means.
I've tried again, this time keeping the h3 outside the col-sm-12 as required. To make this work I've moved the full-height class up a level to the col-sm-4. I also had to move the center-bottom element outside the col-sm-12. This is because now that the col-sm-4 is the element with defined height, it should also be the element which defines the position context for the absolute element.
https://jsfiddle.net/19obrm0q/7/
First, your markup was a little different between the two columns: one had the h3 inside the parent div and the other had it before/outside, which was contributing to making them look different.
But my suggested solution is to pad the bottom of the parent so that there's sure to be room for the absolute positioned button.
Have a look:
https://jsfiddle.net/19obrm0q/3/
https://jsfiddle.net/19obrm0q/5/
After much fiddling about: BEFORE:
<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
<h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
<p class="clear-margin">SOME TEXT</p>
<div class="center-bottom">
Learn more >
</div>
</div>
</div>
and AFTER:
<div class="col-sm-4 no-pad bg-white">
<h3 class="clear-margin text-banner-activity text-center">heading</h3>
<div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
inner
</div>
<a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
button
</a>
</div>
I moved the divs around and got rid of the div that was nesting the button, and now it works, the button sits on the bottom no matter the size of the column.
Related
I have a react/tailwind project where I have a component that I want to be both sticky bottom and top.
In other words, I have an element that I don't want to go off-screen when the user scrolls up or down.
So when at the top of the page, the element is technically off-screen, but I want it to be at the bottom of the screen. And then when the user scrolls, the element should up along with everything else, but when the element reaches the top, I want it to stay there.
Example code:
<div>
This is the outer most container
<div>
This is an element that takes up space and pushes elements below
off-screen
</div>
<div className="sticky top-0 bottom-0" (this obv. doesn't work)>
This is the element I want to always stay on screen (sticky top and bot)
</div>
<div>Other elements</div>
</div>;
I've given it a few tries and googled a bunch but couldn't get anything to work.
Thanks in advance!
className="sticky top-0 bottom-0" does work, you just need to play around with the heights, something like this:
<div className="bg-red-600">
This is the outer most container
<div className="h-[128rem] bg-blue-600">
This is an element that takes up space and pushes elements below
off-screen
</div>
<div className="sticky top-0 bottom-0 bg-orange-600 h-28">
This is the element I want to always stay on screen (sticky top and bot)
</div>
<div className="h-[128rem] bg-green-600">Other elements</div>
</div>
i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached
this is what i am doing
<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
Content for upper section
<div class="row" style="position:absolute; bottom:0 !important;">
<div class="col-xs-12">
Div in footer section of the parent div
</div>
</div>
</div>
what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it
Check your spellings, its a typo:
Change positoin to position
You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.
By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.
For some reason I cannot add margin between grid items
Page with margin issue
This page margin shows perfectly:
Proper page
I suspect it has to do with CSS, I tried everything but nothing seemed to work. Can someone please help?
What you need to do is move your .grid class styling to a new parent element inside your grid column, the column itself takes up a full 25% of the width of the page and has internal padding to create the illusion of margin.
<div class="grid col-sm-3 col-xs-6">
to
<div class="col-sm-3 col-xs-6">
<div class="grid">
You can see a quick example of this by moving your .grid class to the .description child element, the styling goes a bit wacky but you will be able to see the margins between your columns.
I am trying to design a responsive webpage using bootstrap. I have the following HTML structure
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="well"><!--Page content here--></div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="well">
<form class="form-horizontal" role="form">
<!--Form elements here-->
</form>
</div>
</div>
</div>
</div>
Now, I want the div.well inside div.col-lg-4 to be fixed positioned. So when I add style="position:fixed;" to the div.well, the default responsive width which it inherits from its parent (that is 33.33%) gets reduced and the form elements gets shrunk. Any suggestions on how I can fix this?
Take a look at this Codepen.
In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.
Hope that helps.
I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.