CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Arter
Arter

Reputation: 2324

Position: absolute new column

can someone explain me this case. Here is my code in jsfiddle I use bootstrap 4 I add text over image and add on parent div position:relative and on left div, I add position:absolute and left:2% and for right div position:absolute and right:2%. And this working on my large screen, but on smaller or mobile screen this don't working, I want to move to a new col. You can check this in jsfiddle, try to resize screen I try with bootstrap <div class="col-lg-6 col-md-6 col-sm-12"> like this

<div class="col-md-12 col-sm-12 col-xs-12 nopadding" style="margin-bottom: 15px; position: relative;">
  <img src="assets/img/klupa_fontana.jpg" class="img-fluid">
  <div style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
    <span style="color: #fff; font-size: 60px; line-height: 1.07143; font-weight:400;"> Lorem ipsum dolor</span><br><br>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div style="position: absolute; top: 15%; left: 2%;">
      <span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor.</span><br><br>
      <span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor.</span>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div style="position: absolute; top: 15%; right: 2%; text-align: right">
      <span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor <br> fast and safe.</span><br><br>
      <span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor</span>
    </div>
  </div>
</div>

Thank you

Upvotes: 0

Views: 383

Answers (2)

Thuc Nguyen
Thuc Nguyen

Reputation: 233

Bootstrap v3 is more popular than your Bootstrap v4 in my country. Here is a solution for Bootstrap v4, hope this is helpful:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row justify-content-between">
    <div class="col-lg-3" style="text-align: left; border: 1px solid #000000">
      One of two columns
    </div>
    <div class="col-lg-3" style="text-align: right; border: 1px solid #000000">
      One of two columns
    </div>
  </div>
</div>

Upvotes: 1

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

Why not just set the image as a background image on the div and then just use col-6 on desktop and col-12 on mobile for both text groups?

<div style="background-image: img" class="col-12">
  <p class="col-6-lg col-12-xs">Left text</p>
  <p class="col-6-lg col-12-xs">Right text</p>
</div>

Upvotes: 1

Related Questions