CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Kemat Rochi
Kemat Rochi

Reputation: 952

Arrange two images one below the one another diagonally in a responsive way

I want to two images diagonally one below another like this, and they should remain like that responsively.

enter image description here

So far I've got this, but the images are moving when I re-size the window and it is not responsive. Is it possible to make it responsive using bootstrap?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
  <div class="col-md-8">
    <img class="img-responsive" align="left" src="img1.png" />
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <img class="img-responsive" align="left" src="img2.png" />
  </div>
</div>

JS Bin

Upvotes: 1

Views: 604

Answers (1)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Use col-*-offset-* instead of aligning left/right. Check below snippet for reference.

.p0 {
  padding: 0 !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 p0">
        <img class="img-responsive" src="http://via.placeholder.com/600x400/green" />
      </div>
    </div>


    <div class="row">
      <div class="col-xs-6 col-xs-offset-6 p0">
        <img class="img-responsive" src="http://via.placeholder.com/600x400" />
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions