What is the best way to create vertical space between columns in a row using Bootstrap?

Is it possible to vertically space the two pictures on the right side? I've tried adjusting the HTML structure but haven't found a solution yet. Can you help me with this?

Here is a screenshot

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d39233b233d">[email protected]</a>/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;
    }
}
htmlcssbootstrap-4

Answer №1

Presenting the solution...

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b958b96d9decfda89">[email protected]</a>/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>

Answer №2

If you want to add a responsive unit like vh for the bottom image along with a margin-top using inline CSS, you can do so with the following vanilla CSS code. No need for bootstrap in this case.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Engage in intricate animations on Blaze

Currently seeking an effective method for implementing animations within my app using Blaze. To provide further clarification, I have included a basic example below: <template name="global"> <h1>Hello everyone!</h1> {{> foo}} ...

cssmeteoriron-routermeteor-blazeanimate.css

Searching for web elements using relative xpath in Java

I am currently attempting to navigate a table with the id of "campaignAllAvailableList" and cycle through a list of titles: (xpath = .//*[@id='campaignAllAvailableList']/li/div/div/h3) in order to check if it matches the desired one. If a match ...

javahtmlseleniumxpath

What is the best way to create a JavaScript function that can be used for multiple expandable cards in HTML and CSS?

I'm dealing with a situation where I have a list of cards, and I want to be able to expand the content individually when clicking on "more info". Can someone offer advice on how to achieve this using Javascript? Check out this CodePen for reference: ...

javascripthtmlcss

What is the best way to remove a specific child row in jQuery datatables?

I currently have two static default rows and I would like to add more rows below the existing ones without deleting the parent rows. However, I am unsure of how to delete child rows without affecting the parent rows. My parent rows consist of the defaul ...

javascriptjqueryhtmlcssajax

Is there a way to have a dropdown menu automatically expand when a selection is made in a different dropdown menu?

Within this product upload form, I have integrated five cascading drop-down lists using HTML, complemented by embedded Javascript to dynamically fill the options in these lists. My main query pertains to enabling the second drop-down list to appear automat ...

htmlformsselectdropdown

Can the conventional HTML context menu be swapped out for a link context menu instead?

Currently, I am working on developing a custom linkbox component that is similar to the one found on this page: Here is an example of the code: export const Linkbox = ({}) => { const linkRef = useRef(null); return ( // eslint-disable-next-l ...

javascripthtmlcontextmenu

Using jQuery to organize divs into columns

I am working with a parent div that contains 19 child divs all with the same class, structured like this: <div id="dropdown-content1"> <div class="CatsColumn"></div> <div class="CatsColumn"></div> <div class="C ...

jqueryhtmlcss

What are some ways to create a div section within a Google Map interface?

Is there a way to create a div area within the Google map iframe? Some of my code is already prepared here (). The image in this link (https://i.sstatic.net/92gkt.png) illustrates exactly what I'm trying to achieve. ...

javascripthtmlcss

What is the best way to create a clickable image?

Review the following HTML code: <div id="panelpic1"> <a href="https://www.google.com/"style="display:block"target="_blank"> </a> </div> CSS details: #panelpic1{ content: ...

htmlcssimagenetbeansclickable

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

javascripthtmljquerycssvue.js

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

csstwitter-bootstrapsassbootstrap-4

I am having trouble identifying the specific element in my navbar that has an unexpected margin or padding

I'm trying to get the border indicated by the arrow to extend from the top to the bottom of the navbar, but I can't seem to find where the padding or margin is that's causing it to stop short. Even after setting all padding and margin to 0p ...

htmlcssbootstrap-4

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...

javascripthtml

Is there a way to override a LESS variable inside a mixin?

Currently, I am incorporating LESS into one of my projects and I have a requirement to establish different color schemes for various users. The project involves developing a portal where the color scheme should change based on the type of user logging in. ...

cssless

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress

Is there a way to automate the loading process when a file is uploaded to an HTML input field?

How can I upload a file via Ajax post in HTML without clicking the button? Currently, my code only works after clicking the bootstrap button. My current implementation is as follows: $(document).ready(function () { $("#but_upload").click(function () { ...

javascriptjqueryhtmlajax

Every time I input information into the form, it keeps coming back as undefined

function displayProduct() { var product = document.getElementById("productForm"); var item = product.elements["item"].value ; document.getElementById("outputResult").innerHTML = item ; } <div> <p id="outputResult"></p> </di ...

javascripthtml

HTML5 pattern grouping feature is not functioning as expected

I am attempting to validate this regular expression pattern="([a-zA-Z]+[0-9]*){4,}", which essentially means: It must always start with an alphabetic character. If a number is included, there must be at least 4 characters in total; for example, aaaa would ...

regexhtml

Angular's bind-html along with the $sce service continues to strip out the inline styles

Creating a custom filter in AngularJS that returns a string value. The value includes an HTML string with inline styles. When binding the value in Angular, the inline styles are removed. Here is the custom filter code: siteApp.filter('specialText& ...

htmlangularjs

Troubles arise when utilizing getChannelData to configure socket.io in web audio,

I'm facing a problem where my connection gets disconnected as soon as I execute the code source.buffer.getChannelData(0).set(audio);. This issue occurs when I transcode an audio file and send the audio buffer to the client using socket.io for playback ...

htmlffmpegsocket.iohtml5-audioweb-audio-api