How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)
Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
how to make div with class boxLinks = bottom in the main box = class = main-box?
my idea
this class main width 1200px;
this class main-box are 5 div, every div width 25%
.main-box {
width= "25%";
float= left;
}
<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>
i want this div boxLinks in the last div,
You can use flexbox to do the work.
You have to set your main-box as flex.
then the boxLinks become a flex element, so with the properti align-self you can put it at the bottom.
You can fin a good tutorial on css-tricks
.main-box {
width: "25%";
float: left;
border: 1px solid #000;
width: 500px;
height: 400px;
display: flex;
}
.boxLinks {
flex: 0 1 100%;
height: 100px;
background: #000;
align-self: flex-end;/* this do the work */
}
<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>
Try this:
.main-box {
width= 25%;
float= left;
position:relative;
min-height:150px;
background:#000;
}
.boxLinks{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>
It is pretty simple. You can use position: relative on 'main-box' and position: absolute, bottom:0 on 'boxLinks'.
Working example on jsFiddle.
.main {
display: flex;
}
.main-box {
width: 25%;
height: 100px;
float: left;
position: relative;
background-color: #f00;
}
.boxLinks {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background-color: #0f0;
}
<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>
I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.
There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.
A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
This is how it looks so far:
And this is what I need to achieve:
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1"></section>
The first <section class=sub-masthead--TC2> element contains the image in some nested divs. With the design above is very clear what I need. I already set position: relative to both sections and z-index: 1 to the upper section and z-index: 3 to the down one but it doesn't work.
This is the whole HTML for the section that contains the image:
<section class="section sub-masthead--TC2">
<div class="sub-masthead__wrapper">
<div class="sub-masthead__tiles">
<div class="sub-masthead-item">
<div class="sub-masthead-item__content">
<div class="sub-masthead-item__copy">
<p><!-- text --></p>
</div>
</div>
<div class="sub-masthead-item__image-container">
<!-- IMAGE HERE -->
<img class="sub-masthead-item__image" src="assets/images/bg_phone-unique.png" alt="" role="img">
</div>
</div>
</div>
</div>
</section>
Here is my try. I have created an example for you to follow along.
First add position: relative to the parent element of both sections or if there is none then the body.
Then add position absolute to image section and manipulate top values.
.sub-masthead--TC2 {
position: absolute;
top: 40px;
right: 0;
}
Result:
.wrapperDiv {
position: relative;
}
.sub-masthead--TC2 {
width: 100%;
height: 100px;
background-color: tomato;
}
.qualifiers--Q1{
width: 300px;
height: 300px;
position: absolute;
top: 40px;
right: 0;
border: 1px solid #000;
padding: 20px;
}
img{
width: 100%;
height: auto;
}
<div class ="wrapperDiv">
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1">
<img src="https://placeimg.com/640/480/any" />
</section>
</div>
Here is the plunkr:
The issue is for this div
https://plnkr.co/edit/HHsReAT6GLyNZTF4qOJj?p=preview
<div class="main-page">
<div class="container">
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
</div>
You can see the css classes in plunkr.
Thanks in advance.
Remove the line height from:
.main-page {
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
}
if you really want those two div elemnts to centered be to the main-page you can try this:
.main-page{
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
position:relative;
}
.holder {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And then add another div element with class named "holder" as a parent of the row like this:
<div class='holder'>
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
Hope that will work.
Here is a screenshot:
I am using bootstrap and the page width is NOT fixed.
I would like to display a contact form div (grey box below) like this:
So the grey contact form is sort of floating over the blue and white divs.
Thanks!
Here's what I have been trying to do: http://jsfiddle.net/w69j4xam/
<div class="header">
Header
</div>
<div class="content">
<div class="bluediv">
Some text here
</div>
<div class="whitediv">
Some more text here
</div>
<div class="contactform">
Contact Form<br/><br/><br/><br/>
</div>
</div>
body{
padding: 20px;
}
.header{
height: 50px;
background-color: green;
}
.content{}
.bluediv{
height: 150px;
background-color: #AFEEEE;
}
.whitediv{
height: 180px;
background-color: #FFF;
}
.contactform{
background-color: grey;
width: 100px;
position: absolute;
}
In terms of your jfiddle example, all you need to add is a right and a top.
.contactform{
right:50px;
top:100px;
background-color: grey;
width: 100px;
position: absolute;
}
http://jsfiddle.net/w69j4xam/2/
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
<style type="text/css">
.inner {
position: absolute;
}
</style>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>