Achieving equal height columns in Bootstrap - text alignment within rows

Is there a method to make the heights of a text and image column equal? I am looking for a way to align the height of the text section with the image section.

This adjustment would result in the picture being displayed cropped or shortened.

.row-eq-height{
  display: flex;
}

.row-eq-height [class*="col-"]{
  border: 1px solid #000;

}
<div class="container">
<div class="row row-eq-height">  
  <div class="col-md-7">
    <div class="text-container">
      <h2>Headline</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
    </div>
  </div>

  <div class="col-md-5">
    <div class="img-container">
     <img src="https://www.placecage.com/400/400" />
    </div>
  </div>
</div>
</div>

htmlcssbootstrap-4

Answer №1

Success! I finally figured it out - the <img> tag doesn't work here, you need to use background-image instead.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col">
      <h2>
Big bold title!
      </h2>

      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

    </div>
    <div class="col" style="background-image: url('https://www.placecage.com/400/400');">
    </div>
  </div>
 
</div>

Answer №2

To achieve the desired result, simply set the height of the content containers to 100%.

p {
  height: 100%;
  background-color: grey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-4"><p>Text</p></div>
  <div class="col-4"><p>Text<br>2</p></div>
</div>

Answer №3

An effective solution to this issue is to assign the img element an absolute position within its container .img-container

By doing so, the image can be removed from the regular document flow, ensuring it does not impact the flexbox's height

This approach provides flexibility in adjusting the image's placement either through CSS or directly using the style property if you want to focus on a specific part of the image

.row-eq-height{
  display: flex;
}

.row-eq-height [class*="col-"]{
  border: 1px solid #000; 
}

.img-container {
  position:relative;
  overflow:hidden;
  height:100%;
}

.img-container img {
  position:absolute;
  top: 0;
  left:0;
}

/* additional base classes inherited from Bootstrap - ignore if not required */
.container {
  width: 80%;
}

.row {
  display:flex;
}

.col-md-7 {
  width : 58.333333%;
}

.col-md-5 {
  width : 41.666666%;
}
<div class="container">
<div class="row row-eq-height">  
  <div class="col-md-7">
    <div class="text-container">
      <h2>Headline</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
    </div>
  </div>

  <div class="col-md-5">
    <div class="img-container">
     <img src="https://www.placecage.com/400/400" />
    </div>
  </div>
</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

Displaying a Facebook tab exclusively within the Facebook platform

Hello Everyone I have been utilizing woobox to generate Facebook tabs for my pages and I have a query: I have created an HTML page on my personal server, which I am using as a Facebook tab (created with the help of woobox). Now, is there a method whe ...

phphtmlcssfacebook

When applying styles in Polymer, it's important to take into account the width and height

Having trouble setting the width of elements within container elements in Polymer. Here's a simple example that illustrates the issue: <!doctype html> <html> <head> <base href="https://polygit.org/polymer+:master/webcomponent ...

cssshadow-dompolymer-2.x

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

htmlnsattributedstring

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

jquerycssanythingslider

Chrome is experiencing a delay in closing the Select Option dropdown menu

On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...

javascriptjqueryhtmlcssgoogle-chrome

Extremely sluggish pagination in JQGrid following the implementation of a filter through the filter toolbar

I've encountered a problem while using jqGrid with LOAD ONCE and client-side paging. The addition of a filter toolbar has significantly slowed down the paging process after applying any kind of filter. $(gridElement).jqGrid({ postData: post, ...

javascriptjqueryhtmlperformancejqgrid

Displaying a webpage within a div section of another webpage by referencing it from a separate webpage

If I have three html pages named index.html, page1.html, and page2.html. Imagine that I am currently on page2.html and there is a list of items, each linking to different pages. Let's say one item links to page1.html. Is it feasible to load page1.ht ...

javascriptjqueryhtml

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

Develop a JavaScript function to generate a multiple selection form

Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...

javascriptjqueryhtml

Tips on displaying a div for a brief moment and then concealing it

Is it possible to create a div that will disappear after 10 seconds of the page loading using PHP or JavaScript? Here is an example of the code: <html> <head></head> <body> <div class="LOADING" id="LOADING" name="LOADING">&l ...

javascripthtmlcss

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

Does anyone know how to display the loading time and memory usage of a web page in the footer using jQuery and AngularJS libraries? I've managed to show the loading time with this jQuery code: <script type="text/javascript"> before = (new Date( ...

javascriptjqueryhtmlangularjs

"Enhance your website design with a full-width element using Boostrap that align

Whenever my div is scrolled to, it becomes fixed. At that point, I want the div to expand to full width. I achieved this by adding width: 100% to the div. However, the issue is that I want the content of the div to align with the rest of the page content, ...

javascriptjquerycsstwitter-bootstrap

Bootstrap version 5 has a feature where the dropdown menu extends beyond the right side of the screen

I'm facing an issue with the default bootstrap 5 navbar. When I attempt to add a dropdown on the right side, the list of dropdown items extends beyond the screen on the right. You can see the problem here. I've tried the solutions suggested in s ...

htmlcssbootstrap-4bootstrap-5

"Guide to triggering the display of a particular div based on its class when clicked

I have multiple div elements with the class name dis HTML: <div class="dis">Content</div> <div class="dis">Content</div> <div class="dis">Content</div> and so on ... Additionally, there are various images: <img sr ...

javascripthtmlcss

Implementing universal styles to injected HTML (v-html)

I am facing an issue while injecting HTML content from my database using Vue. The problem is that although I can successfully inject the HTML, the framework stylesheet (Vuetify) does not seem to be applied to the injected content. The rest of the page ha ...

javascripthtmlvue.jsvuetify.js

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

What could be causing Ajax's html() function to create a loop that never ends?

Is there a way to incorporate an animation during the database operation and update the table content in the HTML document once the operation is completed? <script> var jobj = new Object(); jobj.uid = <?php echo "'".$_SESSION['user_ ...

javascriptjqueryhtmlajax

Creating a CSS3 web design inspired by the Facebook-image style - here's how!

Looking to create a design using CSS that mimics the facebook-image-container, similar to this example: . Seeking advice on how to achieve this effect. The concept is to have a centered box on the page, with one half displaying an image and the other conta ...

css

I am encountering a JQuery syntax error while using Bootstrap 3 button-dropdown links

I'm trying to replicate the example found here in order to create a similar markup: <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ...

javascriptjqueryhtmltwitter-bootstrap