Achieving Equal Column Height and Proper Margins in Bootstrap 4: A Comprehensive Guide

I am looking to enclose my elements in a rectangular container with rounded borders and a box shadow, while ensuring they have consistent height and are responsive (this is why I do not define max height or height directly)

Here's the desired end result:

https://i.sstatic.net/0fxOs.png

And here's what I currently have:

https://i.sstatic.net/YGg7r.png

This is my current code setup:

<div class="row">
        <div class="col-12">
            <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes escolares</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes universitarios</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes para empresas</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Otros tipo de grupos</h2>
        </div>
    </div>

Accompanied by the following CSS styling:

.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}


<!DOCTYPE html>
<html>
<head>
<title></title>
  <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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<style>
.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}
</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes escolares</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes universitarios</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes para empresas</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Otros tipo de grupos</h2>
      </div>
    </div>
  </div>
</body>
</html>

htmlcssbootstrap-4

Answer №1

Group all h2 elements within a div and apply the h-100 class along with any other classes you have assigned to the column div.

.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ">
    <div class="col-12">
        <h2 class="sm-header-title mb-5">Our Organized Ski Trips</h2>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">School Trips</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">University Trips</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Business Trips</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Other Types of Group Trips</h2>
      </div>
    </div>
</div>

Answer №2

Give this solution a try...If it doesn't solve your issue, please provide a brief description of your problem.

.sm-header-title {
    font-size: 30px;
    font-weight: 800;
    color: #3490dc;
  }

  .rectangle-holder {
    border-radius: 10px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
    background-color: white;
    display: block;
    height: 200px;
    width: 100%;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="sm-header-title mb-5">Our Organized Ski Trips</h2>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">School Trips</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">University Trips</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Company Trips</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Other Group Types</h2>
      </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

Enhance your design with Bootstrap 4's innovative spacing

Recently started using Bootstrap. Here's the HTML code I have. How can I achieve consistent spacing between all my box elements without causing any of them to wrap on larger screens like laptops and desktops? In the past, I would use CSS-grid for this ...

htmlcsswebbootstrap-4frontend

Tips for transferring variables between different variables

I'm having trouble transferring the value from a declared variable into another variable. I'm not sure about the correct syntax. Currently, in the code below, the <span id="xevalue1"></span> in my HTML returns nothing, i.e., blank. H ...

javascriptjqueryhtmljson

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs

Ways to conceal rows within an implicit grid

In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...

htmlcsscss-grid

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...

javascripthtmljqueryajax

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

htmlcssslider

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

javascriptjqueryhtmlcss

Press the button to activate the function

<table class="calc" cellpadding=2> <td><input type="button" class="calc" id="screen" value="0" ></td> <td><input type="button" class="calc" id="screen" value="0" ></td> <tr> </ ...

javascripthtml

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

javascriptjqueryhtmlcss

Tips for ensuring a function in Angular is only executed after the final keystroke

I'm faced with the following input: <input type="text" placeholder="Search for new results" (input)="constructNewGrid($event)" (keydown.backslash)="constructNewGrid($event)"> and this function: construct ...

htmlangulartypescriptinputrxjs

Utilizing jQuery Mobile - Dividing content across multiple HTML files

In the process of developing a web application utilizing jQuery and jQuery mobile, I am aiming to display various pages. Given that the corresponding html-markup may become lengthy, I am interested in dividing the html into separate files. For instance: & ...

javascriptjqueryhtmljquery-mobile

Show XML data with namespaces - utilizing PHP

Can someone help me figure out how to display values from an API that returns XML? I've been searching, but most examples don't have namespaces or handle both. When I try with both, it always causes bugs and fails to display the values... Here i ...

phphtmlxmlweb

The onclick function is malfunctioning within the Node.js environment

Having trouble with Node.js not working with JavaScript code This is my File structure: app.js index.html index.js However, when I run it without Node, it works and the alert shows up. app.js var http = require('http'); var fs = require(&apo ...

javascripthtmlnode.jsdom-eventsonclicklistener

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

javascripthtmlcsscss-gridevent-listener

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

Get rid of the animation that appears at the beginning and end

I have a unique CSS animation of a Pacman character, but I want to customize it so that the mouth remains open at all times instead of having the opening and closing animation. How can I achieve this? .loader{position:absolute;top:50%;left:50%;height:60 ...

htmlcssanimation

Leveraging the power of SCSS @extend within the <style> tag while importing global SCSS

After setting up my project using vue-cli, I incorporated both Bootstrap and Bootstrap-vue into it. To ensure that my theme.scss file is loaded correctly, I created a vue.config.js file and used the prependData option in the following manner: module.expor ...

vue.jsbootstrap-4sassbootstrap-vue

The mouse scurries away once the div height has been adjusted

How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme? If anyone knows a solution, please check out my jsfiddle as it's not working as I intended. Here is ...

javascriptjquerycssheight