How can make vertically space-between columns in a row with bootstrap

Question

I want to make vertically space-between those two pictures at right side. Can you help me with that? Should change my HTML struct or something? I couldn't find a solution with this HTML struct. s

here it is the screenshot

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">

</head>

<body>
    <div class="container mt-5 border">
        <div class="row">
            <div class="col-md-6">
                <img class="img-fluid a" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
            </div>
            <div class="col-md-6">
                <div class="row ">
                    <div class="col-12 mt-md-6">
                        <img class="img-fluid b" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
                    </div>
                    <div class="col-12 mt-md-6">
                        <img class="img-fluid c" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

img {
    object-fit: cover;
    border: 1px solid red;
}

.a {
    width: 100%;
    height: 500px;
}

.b,
.c {
    width: 100%;
    height: 200px;
}

@media (max-width: 768px) {
    .a {
        height: 200px;
    }
    .b,
    .c {
        margin-top: 1rem;
    }
}

score 0 · Answer 1 · answered Jun 15 '21 at 15:27

0

For the bottom image you could include a responsize unit like vh with a margin-top with inline CSS such as follows. You can achieve this without bootstrap in just vanilla CSS.

<div class="col-12" style="margin-top: 10vh">
<img class="img-fluid c" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
</div>

answered Jun 15 '21 at 15:27

oilrefiner946

11
3

didn't work. https://imgur.com/Wg1EQ2t – noway Jun 15 '21 at 15:52
@noway perhaps I'm misunderstanding what is it you exactly want? – oilrefiner946 Jun 15 '21 at 15:57
it's okay. thanks for your help. – noway Jun 16 '21 at 18:50

Rok Benko · Accepted Answer · 2021-06-15T18:27:18.470

Here you go...

img {
  object-fit: cover;
  border: 1px solid red;
}

img.a {
  width: 100%;
  height: 500px;
}

img.b,
img.c {
  width: 100%;
  height: 200px;
}

@media (max-width: 768px) {
  img.a {
    height: 200px;
  }
  img.b,
  img.c {
    margin-top: 1rem;
  }
}

.row {
  height: 500px;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>

<body>

  <div class='container mt-5 border'>
    <div class='row'>
      <div class='col-md-6'>
        <img class='img-fluid a' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
      </div>
      <div class='col-md-6'>
        <div class='row'>
          <div class='col-12 mt-md-6 d-flex align-items-start'>
            <img class='img-fluid b' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
          </div>
          <div class='col-12 mt-md-6 d-flex align-items-end'>
            <img class='img-fluid c' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

</html>

I updated my answer. What about now? – Rok Benko Jun 15 '21 at 18:27 — Rok Benko, Jun 15 '21 at 18:27
Yeah. Exactly. Thank you very much. – noway Jun 16 '21 at 18:50 — noway, Jun 16 '21 at 18:50

How can make vertically space-between columns in a row with bootstrap

2 Answers2