Aligning content vertically between two divs using Bootstrap 4's flex utility

I am attempting to combine two divs into one main div with equal height. The first div contains a carousel/slider, while the second div includes some images and text. I want to ensure that the images in the second div maintain the same height as the carousel images when resizing the window.

To view my Codepen, click here: https://codepen.io/anon/pen/drrewJ#anon-login

Below is the code snippet:

<div class="row">

<div class="col-md-8 col-xl-8 b">
<!-- b is border radius for see effect -->
<div class="container">

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="3000">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>  

</div> 

</div>

<div class="col-md-4 col-xl-4 b">
    <div class="container">
        <a href="#" >
            <div class="list-group">
               <li class="media">
                <img src="https://via.placeholder.com/100" class="img-fluid">
                <div class="media-body">List-based media object</div>
              </li>
            </div>
        </a>
        <a href="#" >
            <div class="list-group">
               <li class="media">
                <img src="https://via.placeholder.com/100" class="img-fluid">
                <div class="media-body">List-based media object</div>
              </li>
            </div>
        </a>
        <a href="#" >
            <div class="list-group">
               <li class="media">
                <img src="https://via.placeholder.com/100" class="img-fluid">
                <div class="media-body">List-based media object</div>
              </li>
            </div>
        </a>
    </div>
</div>
</div>
htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To ensure that flexbox items all have the same height as the tallest item, you can position the content absolutely within the "taller" div...

Adjusting Flexbox to Match Shortest Column

   <div class="col-md-4 col-xl-4 b overflow-auto">
            <div class="position-absolute">
                <a href="#">
                    <div class="list-group">
                        <li class="media">
                            <img src="https://via.placeholder.com/100" class="img-fluid">
                            <div class="media-body">List-based media object</div>
                        </li>
                    </div>
                </a>
                <a href="#">
                    <div class="list-group">
                        <li class="media">
                            <img src="https://via.placeholder.com/100" class="img-fluid">
                            <div class="media-body">List-based media object</div>
                        </li>
                    </div>
                </a>
                <a href="#">
                    <div class="list-group">
                        <li class="media">
                            <img src="https://via.placeholder.com/100" class="img-fluid">
                            <div class="media-body">List-based media object</div>
                        </li>
                    </div>
                </a>
                <a href="#">
                    <div class="list-group">
                        <li class="media">
                            <img src="https://via.placeholder.com/100" class="img-fluid">
                            <div class="media-body">List-based media object</div>
                        </li>
                    </div>
                </a>
                <a href="#">
                    <div class="list-group">
                        <li class="media">
                            <img src="https://via.placeholder.com/100" class="img-fluid">
                            <div class="media-body">List-based media object</div>
                        </li>
                    </div>
                </a>
            </div>
        </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

Switching the order of elements in a column using Flexbox

Here is the grid layout on PC: https://i.sstatic.net/4HRvd.png And here is the grid layout on mobile devices: https://i.sstatic.net/URBjb.png I am looking to rearrange the order and layout of the grid. I have tried using flexbox, but I need to group B an ...

htmlcssflexbox

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

Tips for aligning navigation bar items to the right side

Seeking help with positioning the logo on the left and navigation items on the right using Bootstrap classes, while maintaining responsiveness. Click here for sample image 1 Check out the navbar layout <!-- Logo --> <a class="nav ...

htmlcssbootstrap-4frontend

The toggle for hiding and showing, along with changing the button color, is not functioning properly due to

I'm encountering a puzzling issue with a toggle that hides and displays information and changes color on click. The functionality works flawlessly on the page where I initially wrote the code. For instance, the button's background shifts colors w ...

javascripthtml

Is it permissible for H2 heading to resemble H1 visually, and vice versa, in compliance with WCAG guidelines?

My expertise lies in Accessibility testing. Currently, we are dealing with Two headings <h1 class="CssPropertywithSmallFontSize">Heading One</h1> <h2 class="CssPropertywithBiggerFontSize">Heading Two</h2> From a visual standpoint, ...

htmlcsswcag2.0

Would this code effectively disable the right-clicking menu for MathJax?

My current approach involves utilizing the following code snippet: <script type="tet/x-mathjax-config"> MathJax.Hub.Config({ showMathMenu: false }); </script> I intended for this code to disable the right-click menu on my math webs ...

javascripthtmlmathjax

Bootstrap Thumbnail Grid - dynamic loading with ajax

Situation: I am facing a challenge where I have a view displaying countries in a twitter bootstrap thumbnail grid. Upon clicking an image, the intention is to dynamically show cities related to that particular country within the same grid on the screen. T ...

phpjqueryajaxtwitter-bootstrapyii

What methods can be used to reveal the URL or string hidden by the current "Search" button?

I am a beginner with no coding experience. Please forgive me if my question sounds silly. I am interested in learning how to "discover" the correct string to add to an existing internal-domain-url (even though I am not the admin of that domain) in order t ...

javascripthtml

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms. Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended. Take a look ...

cssangularjsbootstrap-ui

Synchronizing a webpage on various devices

I've encountered a dilemma with my code where the alignment of elements on my website looks different when viewed on a different computer. The pages were developed on my MacBook Pro and display correctly, but when I view them on my iMac, everything is ...

htmlcssresponsive-designalignment

Having trouble getting the tailwindcss Google font link tag to apply properly

When I use the @import in the tailwind css file, it works fine. However, when I try to add the font using the <link> tag in _document.jsx, it fails to work properly. In Chrome dev tools, it shows that the classes are applied but the fallback font is ...

cssreactjsnext.jstailwind-cssgoogle-fonts

Exploring the connection between an image and its bounding box

Imagine we have an image that is originally sized at 300px by 300px. In this case, the image's content box matches those dimensions as well. However, if we adjust the image size using CSS to be, for example, 300px by 200px, the image will end up looki ...

htmlcssspecifications

Activate Bootstrap - navigate to a specific tab and scroll to a designated anchor upon link click

My goal is to switch to another tab and scroll to a specific part of the page after clicking on a link inside a tab. Unfortunately, although I have successfully switched tabs, I am unable to scroll down to the anchor point. I would greatly appreciate any ...

javascriptjqueryhtmltwitter-bootstrap

Showing a lengthy numerical value in a disabled input field

When I enter a lengthy input into an input field with type="text", the value is stored correctly in the database. However, after clicking the submit button, the input field is disabled, displaying only the length of the text input. Is there a way to disp ...

htmlcssinputtext

Modifying HTML content with the power of jQuery

I have an HTML code snippet that looks like this: <td id="myColumn" class="Column"> Old Data </td> With jQuery, I'm attempting to update the content from "Old Data" to "My New Data". I've tried using the following methods: $( ".Col ...

javascriptjqueryhtml

The size of the CSS div is exceeding its boundaries

Is there a way to create a CSS div that adjusts its width based on the text it contains? I attempted div.reqspace { float : left; width : 10px; } but realized that there is no 'length' attribute. As a result, my div now spans almost the ful ...

csshtml

Extracting data from websites and importing it into Excel with VBA

I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...

htmlexcelvbaweb-scraping

Is there a way to customize the hover color of the Bootstrap 4 navbar toggler?

I'm working with Bootstrap 4 and I would like the color of my navbar toggle icon (commonly referred to as the burger menu) to change when it is hovered over. I have attempted the following code but it is not producing the desired result: .navbar-light ...

cssbootstrap-4

The size of the website elements needs to be increased for better visibility on mobile devices

While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding. After completing the homepage of the site, I encountered ...

htmlcssmobile-websitebootstrap-5

Mobile responsiveness malfunctioning

I recently launched my first responsive design website, which you can view here After testing the responsiveness on Chrome and FF by resizing the window, everything seemed to be working fine. However, when I checked it on my phone, the layout appeared ide ...

cssresponsive-design