CODEWITHSUNDEEP
htmlcss
Mahesh Jamdade
Mahesh Jamdade

Reputation: 20221

make divs responsive with div content at centre of div

hi I am new to bootstrap I am trying to achieve this effect on large screen but with the text in div-2 at vertical centre of div.

I am trying to put Lorem ipsum text in this image at centre of div-2

enter image description here

but if I add a padding from top the text gets at centre on large screen but when I scale down the screen size to small or medium screens then I still have this unnecessary padding from top so I get this layout.

unnecessary padding from top in div-2 in this image

enter image description here

All I want is the text in div-2 to be in vertical-centre on lg devices and below the img on sm and md devices without the padding from top. sorry if Iam not clear,your help will be really appreciated.

Upvotes: 1

Views: 341

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9348

Here is my solution

Open the snippet in full screen and check

Adding d-flex align-items-lg-center align-items-sm-top will center align the text verticaly on large screen and will align the text to top on small screens.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-lg-6,.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.image{
  height:100px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-lg-6 col-sm-12 image   text-center text-lg-left">
      Image
    </div>
    <div class=" col-lg-6 col-sm-12 justify-content-center d-flex align-items-lg-center align-items-sm-top">

      lorem ipsum

    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

Update

Add text-center text-lg-left to center image on small & medium devices but align on left only for large devices

Upvotes: 0

mansoureh.hedayat
mansoureh.hedayat

Reputation: 645

.div-2{
position:relative;
width:300px;
height:300px;
border:3px solid;
}
.contant{
position:absolute;
transform: translateY(-50%);
right: 0;
left: 0;
top:50%;
text-align:center;
}
<div class="div-2">
<span class="contant">
LOREM IPSUM
LOREM IPSUM
</span>
</div>

Upvotes: 2

Related Questions