Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have the columns maintain the same height as each other (taking the tallest height within the max-height limit) when resizing, as the text is expanding to additional lines on smaller window sizes. Current Issue: https://i.stack.imgur.com/N5DQv.png

Desired Outcome:https://i.stack.imgur.com/6alM0.png Any advice or suggestions would be greatly appreciated! 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!--BLOCK-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!--BLOCK ends-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

htmlcssbootstrap-4

Answer №1

You're almost there with the equal height columns, but the content inside isn't filling all the space. Here's how you can adjust the code:

Take note of the classes h-100 (height: 100%), flex-fill (flex: 1 1 auto), and mt-auto (margin-top: auto).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!--BLOCK-->
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>Lorem ipsum dolor </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!--BLOCK ends-->
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-5">
      <a class="no-underline" href="/">
        <div class="d-flex flex-column bg-warning h-100">
          <img src="https://picsum.photos/200" />
          <div class="col-12 d-flex flex-column pt-3 flex-fill">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>

Answer №2

To resolve the issue, simply add the class "mt-auto" to your buttons. This will ensure that your columns maintain the same height.

<div class="align-self-center mb-3 mt-auto">
              <button class="btn btn-success">View More</button>
            </div>

Answer №3

Dealing with a similar issue, I was able to find a solution by using a simple script

To implement this, you need to apply it to a container holding the necessary information

The functionality of the script is as follows: 1. It retrieves the heights of all divs within a specified container class 2. Determines the tallest height among them 3. Sets the same height for all containers within that class

<script>
    var elementHeights = $('.desctext').map(function() {
    return $(this).height();
    }).get();

    var maxHeight = Math.max.apply(null, elementHeights);

    $('.desctext').height(maxHeight);
</script>

I hope this method proves effective for your needs

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

The <hr> tag is not displaying properly within the <option> element

I'm facing an issue with a selection element in my Vue project <div class="resultContainer"> <section> <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option> </section> ...

htmlcss

Stop the button from spanning the entire width of its container

Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior pe ...

cssreactjsflexboxmaterial-uistyled-components

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Why is it difficult to obtain the width of hidden elements? Here is my code: .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ul class="navbar-items"> <li> ...

javascriptjquerycsseachouterwidth

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

Recently, I decided to incorporate an external script into my project. The script in question is as follows: <script type="application/javascript" src="https://api.ipify.org"> </script> This script is designed to provide the client's IP ...

javascripthtmljson

My React component seems to be unable to locate and process my CSS file

I am encountering an issue where my React Component is not recognizing my CSS file. Here is the code snippet from my React component: import React, { Component } from 'react'; import './Jumbotron.css'; class Jumbotron extends Compone ...

cssreactjs

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Incorporating local JSON data into HTML: A Step-by-Step

I'm completely new to javascript and the utilization of json. What I want to accomplish is quite straightforward, although I am encountering difficulties. My objective is to create a website consisting of two pages: one that showcases artists and ano ...

javascripthtmljson

Step-by-step guide on using variables to apply CSS

In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...

phpcss

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

javascripthtmlcss

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs

What is the best way to fetch images from a JSON object in a React application?

I have been trying to load images from an array of objects in React, but I keep encountering a "module not found" error. This issue has been frustrating me for the past couple of days. Can someone please help me troubleshoot this problem or provide some su ...

javascripthtmljsonajaxreactjs

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

How to verify in HTML with Angular whether a variable is undefined

When it comes to the book's ISBN, there are instances where it may not be defined. In those cases, a placeholder image will be loaded. src="http://covers.openlibrary.org/b/isbn/{{book.isbn[0]}}-L.jpg?default=false" ...

htmlangulartypescript

Setting a fixed width for the body element results in alignment problems

I'm struggling with aligning divs properly on my HTML page that has a tab using CSS and jQuery. Whenever I try to set a fixed width for the body or main container, everything goes out of place... How can I ensure that the body has a minimum fixed widt ...

htmlcss

What could be causing the malfunction of my href directory in my ReactJS project?

When I click the "Join Now" button, I am attempting to navigate to a specific file but it does not appear to be functioning as expected. In the image below, you can see that on line 9 there is an href for '/auth/login', however, when I click the ...

htmlreactjshyperlinkhref

Presenting XML data in HTML using a customized CSS stylesheet

I've explored various methods for showcasing an XML file on a web page using HTML, but I haven't yet encountered one that incorporates a CSS style sheet. The XML file I have already includes a CSS style sheet. When viewed in a web browser, the . ...

javahtmlcssxmlstyles

Showcase JSON data within a designated div

As someone new to HTML, JavaScript and Vue, I'm unsure if my issue is specific to Vue or can be resolved with some JavaScript magic. I have a Node.js based service with a UI built in Vue.js. The page content is generated from a markdown editor which ...

javascripthtmlnode.jsvue.js