How can you ensure that the content in Bootstrap 3 layout columns all have the same height?

Scenario: I have a row with 3 columns, utilizing the Bootstrap grid system. Each column contains a panel with text in the body.

I desire for each panel to be the same height, regardless of the amount of text in the panel body.

How can this be achieved?

Check out my jsfiddle here: https://jsfiddle.net/ae5wvdye/1/

Here is the code snippet:

<div class="row">

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 1</h3>
            </div>
            <div class="panel-body">
                <p>
                    Example text goes here.
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 2</h3>
            </div>
            <div class="panel-body">
                <p>
                    Example text goes here.
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 3</h3>
            </div>
            <div class="panel-body">
                <p>
                    Example text goes here.
                </p>
            </div>
        </div>

    </div>

</div>

This current setup is not achieving the desired result aesthetically. I want each panel to occupy 100% of the row height, but I am struggling to make it work using CSS to enforce 100% row height (where the row height adjusts to the tallest panel automatically).

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

htmlcsstwitter-bootstrap

Answer №1

Method 1:

Utilizing flexbox https://jsfiddle.net/ae5wvdye/4/

@media(min-width: 768px) {
    .flex {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .item {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

Method 2:

Implementing CSS table https://jsfiddle.net/ae5wvdye/7/

@media(min-width: 768px) {
    .table {
        display: table;
    }

    .item {
        display: table-cell;
        float: none;
        height: 100%;
    }    

    .panel {
        height: 100%;
        display: table;
    }
}

Answer №2

To achieve the desired outcome, follow these steps:

Utilize jQuery library:

var $maxPanelHeight = 0;
$('.panel').each(function() {
    if( $(this).outerHeight() > $maxPanelHeight ) {
        $maxPanelHeight = $(this).outerHeight();
    }
});

$('.panel').outerHeight($maxPanelHeight);

For a practical demonstration, refer to this example: https://jsfiddle.net/ae5wvdye/6/

This script will determine the tallest panel's height and apply it to the rest.

Answer №3

To ensure a minimum height for the .panel-body class, simply apply the following CSS:

.panel-body { min-height: 300px; }

For responsive design, you can adjust the min-height property of panel-body using media queries based on screen size changes, like so:

@media screen and (max-width: 480px) {
    .panel-body { min-height: 100px; }
}

Incorporate the following HTML structure to utilize the panel components:

<div class="row">

    <div class="col-sm-4">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 1</h3>
            </div>
            <div class="panel-body">
                <p>
                    Sample text here...
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 2</h3>
            </div>
            <div class="panel-body">
                <p>
                    Sample text here...
                </p>
                <p>
                    Sample text here...
                </p>
                <p>
                    Sample text here...
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 3</h3>
            </div>
            <div class="panel-body">
                <p>
                    Sample text here...
                </p>
                <p>
                    Sample text here...
                </p>
            </div>
        </div>
    </div>

</div>

See the live example here.

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

How can I change it so that clicking on the YouTube icon directs me to www.google.com?

I have a YouTube icon on my website and I want it to redirect me to Google.com when clicked. However, it is not working as intended. I am trying to implement this functionality using JavaScript. HTML <div class="yt" > <i class=" ...

javascripthtmljquery

Issue with Bootstrap 4.x tooltip positioning within an overflowing container

In the world of bootstap 4.x, a tooltip finds itself in a bit of a pickle when nestled within a parent element sporting an overflow property. Whether it's overflow: auto; or overflow: scroll;, the poor tooltip just can't seem to find its place. T ...

javascriptcsstwitter-bootstrapbootstrap-4tooltip

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Hello everyone, I'm new to this platform and seeking guidance on how to improve my post! I recently created a CRUD app using Angular. It consists of a basic form with 4 fields, a color picker using input type='color', and a submit button. U ...

htmlangulartypescript

I am looking to showcase information from a MySQL database in an HTML file by presenting it in input boxes, tables, or within a div using Node.js

Although I am able to successfully connect to the database and retrieve data using Node.js and Handlebars, I am encountering issues when attempting to send data with a .html extension. Any method that allows me to save the data in .html format will suffice ...

javascripthtmlmysqlnode.js

How to superimpose an image onto another image using HTML and Bootstrap 4

I am trying to superimpose one image on top of another image and adjust its pixel location. After doing some research online, I came up with the following code snippet: .background { position: relative; width: 100%; top: 0; left: 0; z-index: 1 ...

javascripthtmlcssbootstrap-4

Binary stream (byte array) compatible video player for seamless playback

Is there a JavaScript/jQuery/HTML5 video player that can play a video without needing a physical file? I have a video file stored in a database (varbinary(MAX)) and I am looking for a player that can play the video using the byte array source. Has anyone ...

javascriptjqueryasp.nethtmlarrays

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

I've been encountering some issues with the react-input-range component in my React App. It functions perfectly on larger viewports such as PCs and desktops, but on smaller devices like mobile phones and tablets, I'm seeing an error message "Unab ...

javascripthtmlreactjssliderrange

Creating a toggle label using just CSS: a step-by-step guide

Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript. Here is the code snippet that I experimented with: function genre_itemclick(item){ if(item.classList.contains('light_blue_border_button')) { ...

javascripthtmlcss

What's the best way to perfectly align table text in the center both horizontally and vertically?

Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...

htmlcssbootstrap-4

HTML and CSS are two separate languages that work together to create web pages

I'm experiencing an issue with my CSS file not responding to my HTML file. I have imported the CSS file into my HTML file and both files are located in the same directory. It was working fine when they were written in the same file, but after separati ...

htmlcss

select2 with customizable multi-column layout

Looking to create a multi-column select2 with a dynamic number of columns by specifying the number of columns as a data attribute in the select tag, or utilizing another method. <select data-cols="2,6,4"> <!--note data-cols--> < ...

htmljquerymultiple-columnsjquery-select2

Modify the appearance of each button based on the target value through the "Change Target Value" option

My task involves adjusting the background color of a button based on changes in the target value. Initially, I set the target value to "10". When I click my "1" button and decrease it to "9", the background color of the button changes to "red" because the ...

javascripthtmlcss

Tips for incorporating background-size and background-position within the background-image url()

My div currently has a background image set with background-image url(), but I am trying to achieve the following look: background-image url('example') cover center Here is my current code: div { background-image: url(example); background- ...

htmlcssstylesbackground-image

Building a personalized HTTP handler with Rook

I have developed an application using the Rook package in R: library(Rook) s <- Rhttpd$new() s$start(quiet=T) PIC.DIR = paste(getwd(), 'pic', sep='/') my.app <- function(env){ ## Initializing with predefined lognormal mean ...

htmlrr-rook-package

Internet Explorer Overflow Scroll

Is there a way to remove scrollbars in Internet Explorer while still allowing scrolling? The layout looks fine in FireFox/Chrome/Safari, but is completely unusable in IE. Below is the CSS I am using: <style type="text/css"> table { display:inli ...

htmlcssinternet-explorer

Is there a way for me to determine when my web browser has completed loading the entire page?

Similar Question: How to Detect When a WebBrowser Has Finished Loading a Page Is there a way to determine if my web browser has completed loading all content on the page? In C#, is it possible to display multiple pages in sequence without allowing na ...

c#html.netbrowser

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

javascripthtmljsondomjsdom

Overlaying Divs and UI Blocking

I am currently working on an ASP.net project where I have a web page that contains both design time controls and run time generated controls. The dynamically generated content, such as a table, is appended to a div on the page known as a container div, wit ...

jqueryhtmldynamicoverlayblocking

The jQuery tooltip fails to function properly after the AJAX content is loaded

I have been using a tooltip script that can be found at: This is the script I am using, with a few modifications: $(document).ready(function() { $("body").on("mouseover", ".tip_trigger", function(){ tip = $(this).find('.tip&apos ...

phpjquerycsstooltip

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

androidhtmljsoup