Creating uniform cell heights in Bootstrap grids

I am currently dealing with the code below:

<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly brief text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Text that<br>spans across<br;4 lines
      </p>
    </div>
  </div>
</div>

along with this css:

.box-cell
{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}

The issue I'm experiencing is that one of the cells tends to be taller than the other. Is there a way for me to make both cells take up equal height? I've searched for solutions but haven't found the right property to adjust for equal height.

Here is the jsfiddle link, although in that demo, I couldn't get the cells to display side by side as intended.

EDIT: To clarify, I want the borders to extend to the same height as the tallest cell. The examples provided remove the borders and instead color the background to create an illusion of uniformity. However, I specifically want the border to have the same height on each cell.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

I attempted to recreate the desired effect you are looking for, which can be found here.

I suggest experimenting with the use of `flexbox` as it appears to meet your requirements perfectly.

<div class="container">
    <div class="box">
      <p>Some text here</p>
      <p>Some text here</p>
      <p>Some text here</p>
      <p>Some text here</p>

    </div>
    <div class="box">
      <p>Some text here</p>
      <p>Some text here</p>
      <p>Some text here</p>

    </div>
  </div>

For applying the CSS styles:

.container {
  display: flex;
}

.box {
  background-color: yellow;
  margin-right: 20px;
}

Answer №2

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row > [class*='col-'] {
 display: flex;
 flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-12 col-sm-4" style="background-color: green">
  some content
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: orange">
  some content
  <img src="http://placehold.it/100x120">
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: magenta">
  some of content
  </div>
</div>

Answer №4

<style type="text/css">
.box-cell{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}
</style>    
<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        <span>Text that needs to be added in the span tag for formatting.</span>
        <span>More text that needs to be included within spans on a single line.</span>
      </p>
    </div>
  </div>
</div>

1- Ensure all text is wrapped in span tags for proper formatting. 2- Alternatively, keep all text within one line to meet requirements.

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

Adjust the div height to 100% in Bootstrap to center text, even with the presence of a navbar

I'm currently using Bootstrap 5 and facing an issue with getting text centered vertically on the page. I attempted to make the container of the div take up 100% of the page by using h-100, but it resulted in overflow due to the navbar occupying some s ...

htmlcsstwitter-bootstrapwebbootstrap-5

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

Why is the right float positioned below the container?

I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...

htmlcss

Tips on positioning items with a ChartBar using Chart.js alongside Alerts from Bootstrap 4

Greetings! I am facing a challenge with arranging a bar chart using Chart.js alongside bootstrap 4 alerts. The issue arises in the alignment of elements as depicted in this image: https://i.sstatic.net/4kDSo.png My goal is to position the alerts, located ...

c#htmlbootstrap-4chart.js

All you need to know about the properties of CSS ul

When I specify .a ul{} .a ul li{} as well as .b ul{} .b ul li{} will the properties of ul in .b be completely isolated from the properties of ul in .a? Or will they have some commonalities? I am looking to ensure that the styles for ul remain entirely ...

htmlcsscss-selectors

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

Choose from the selection of options in the select tag

In my HTML document, I am working on a feature where selecting an option from one select tag should dynamically populate another select tag with specific options based on the selection. This is the code snippet I have implemented: <script type ...

javascripthtml

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

What is the jQuery alternative for the classList property in vanilla JavaScript?

Currently, I am working on a collaborative project with two acquaintances. One of the requirements is to stick to either vanilla JavaScript selectors like document.getElementById("thisDiv"); or jQuery selectors such as $("#thisDiv"); to maintain consis ...

javascriptjqueryhtml

Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...

htmlcsstwitter-bootstrapcontainersbootstrap-5

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

Anchor checkboxes

I am dealing with a large number of checkboxes that are linked to anchors. Whenever a checkbox is clicked, it navigates to the corresponding anchor on the same page. Is there a more efficient way to implement this? With around 50 checkboxes, my current cod ...

javascripthtml

Having trouble with loading a background image from an external CSS file in Django

I am encountering an issue when attempting to load an image through external CSS on my Django project. While it works fine with inline CSS, I am curious as to why it fails with an external stylesheet. Any assistance on this matter would be greatly apprecia ...

pythonhtmlcssdjango

Ajax is functioning properly on Internet Explorer and Safari, however it is not functioning on Firefox, Chrome, or Opera

I am attempting to retrieve modal data from an HTML page using jQuery Ajax. It seems to be functioning properly in Safari and IE 6, however I'm encountering issues in Firefox, Chrome, and Opera. Any suggestions on how to resolve this? You can find my ...

jqueryhtmlajaxmodal-dialog

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

javascriptphphtmlajaxjson

The Bootstrap carousel's transition effect is not functioning as expected

The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel. Here is the HTML code snippet: <div id="testimonialsSlides" class="carousel carousel-fade" data-ride="fa ...

csstwitter-bootstrapcarouselbootstrap-4

Rendering a .stp file with Three.JS

I am in search of a way to create a basic 3D model preview using a '.stp' file. During my research, I came across the Three JS library. This library enables the rendering of 3D files similar to this example: I am eager to incorporate this funct ...

javascripthtmlthree.js3d

Can you please tell me the name of this specific graph? And could you explain how I can recreate it on a

I am fully aware that this information is just a Google search away. However, I am unsure of the specific name of the chart I am seeking. Therefore, I am unable to conduct an effective search for suitable plugins or APIs. Your understanding is greatly appr ...

javascriptjqueryhtmlweb

Having trouble with the speed of multiple jQuery posts?

We have encountered some challenges with calling multiple jQuery posts since switching to our new server. On certain pages, we are making multiple jQuery post requests as shown below: $.ajax({ type: "POST", url: "../files/processed/includes/proce ...

javascriptjqueryhtmlajax

Receiving a null result when parsing a JSON file from a URL in JavaScript

My data loading query loads JSON data without any issues, as shown in this snippet: $(document).ready(function () { var json = [{"id":1,"first_name":"Debra","last_name":"Rodriguez","email":"[email protected]","gender":"Female","ip_address":"90. ...

javascripthtmljsonparsinghtml-table