Determining the height of a Bootstrap column in relation to another element

Utilizing the grid layout from bootstrap, I have the following structure:

<div id="prof_cont_enclose">
    <div class="row">
        <div class="prof_cont_row">
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="/techahoy/securedir/m_images/mypic.jpg" width="100%">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem">
                <div class="panel panel-default">
                    <div class="panel-body">
                         <h1>T.V.Vignesh</h1>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The image in the first column has a width set to 100%, adjusting its height accordingly. However, I don't have a fixed height for this column.

I'm looking to equalize the height of the other columns in the first row with the height of the first column.

View the current implementation snapshot here:

I've looked at but was unsuccessful. Any assistance would be appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Take a look at this codepen example: http://codepen.io/dschu/pen/zGQLNN?editors=110

Don't forget to add your custom css:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

I have also made some adjustments by removing one wrapping div around your heading.

Answer №2

Your current implementation has a slight issue where you have placed a div element in between the row and column elements. The use of display: flex affects only the immediate children of that specific element, so your columns should directly follow the rows that have the flex styling applied to them.

Typically, it is not advisable to disrupt an existing grid system by introducing custom styles and markup. Instead, focus on adjusting the contents within the grid itself.

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row">
    <div class="col-xs-6 prof_elem">
        <div class="panel panel-default">
            <div class="panel-body">

Here's a demo to illustrate

If you intend to merge the panel elements with the columns while maintaining the default spacing, you will need to apply additional CSS rules:

.row > div.panel {    /* targets column elements */
    margin: 10px;
}

<div class="col-xs-6 prof_elem panel panel-default">

Check out this second demo for reference

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

Developing a Five-Star Rating System Using PHP, MySQL, jQuery, and Ajax

I found an interesting tutorial on creating a 5-star rating system using PHP, MySQL, jQuery, and AJAX at . However, when I tried to implement it, I encountered the following errors: Notice: Undefined variable: rat in C:\xampp\htdocs\rating& ...

phpjquerymysqlajaxrating-system

Create distinct 4-digit codes using a random and innovative method, without resorting to brute force techniques

I am working on developing an application that requires generating random and unique 4-digit codes. The range of possible codes is from 0000 to 9999, but each day the list is cleared, and I only need a few hundred new codes per day. This means it's fe ...

javascriptnode.jsalgorithmrandom

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

I am a Vuejs beginner currently working on a project that involves both Vuejs (front end) and Laravel (Backend). I have been trying to integrate the JQuery library turn.js into my project, but I keep encountering errors. While I have managed to run jQuery ...

jquerylaravelvue.jsflipturnjs

Modifying the color of the active column

In an attempt to remove the color from the column border following a click on the image, I am struggling to locate the specific code segment that needs adjustment. I have scrolled through the entire code and experimented with color changes without succes ...

htmlcss

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

My flip clock script is behaving oddly, moving too quickly and skipping over even numbers. I've been playing around with the code, and it seems like there's a problem when I use the callbacks function. var clock = $('#clock3').FlipClo ...

javascriptjqueryflipclock

Exploring HTML Data with Python String Manipulation

My goal is to use Python to dynamically extract data from an HTML page that is constantly changing. I have identified that the specific data I am interested in is located between a tag that resembles 'abcd>' and another tag. For example: abcd& ...

pythonhtmlscreen-scraping

Iterate over a collection of JSON objects and dynamically populate a table with statistical data

In JavaScript, I am trying to dynamically generate a table with statistical data from an API that contains an array of JSON objects. The JSON data has a property called "score" which is interpreted as follows: score: 5 (excellent); score: 4 (very good); ...

javascriptarraysjson

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js

Tips for saving data after reading lines in Node.js

I am working on a project where I need to read data from an external text file into my function. How can I efficiently store each line of the file as a separate variable? const fs = require("fs"); const readline = require("readline"); const firstVariable ...

javascriptnode.js

A guide on extracting a URL from source tags using Cheerio/jQuery

I have been struggling to retrieve the first image with data-srcset attribute ("https://sample.img_1") using Cheerio. None of my previous attempts have been successful. My most recent attempt looks like this: $(".sample_picture [media='(max-width: 64 ...

javascriptjquerycss-selectorscheerio

I can't understand why this question continues to linger, I just want to remove it

Is there a valid reason for this question to persist? I'm considering removing it. ...

javascripthtmlcss

The assertion that 'd3Ctrl' is not a valid function, but instead is undefined

Although several people have raised the same issue before and I've attempted their solutions, I still can't seem to resolve it. My problem involves using d3, but I keep encountering this error: app.js var app = angular.module('myApp', ...

javascriptangularjsd3.jsng-controller

Continuously simulate mousewheel events

I'm trying to make my mousewheel event trigger every time I scroll up, but it's only firing once. Can you assist me with this issue? Please review the code snippet below. $('#foo').bind('mousewheel', function(e){ if(e.o ...

javascriptjqueryjquery-eventsmousewheel

Is it possible to prevent the text from appearing in the text box when a button is

I have successfully implemented a feature where clicking on the button (click on me) in HTML displays a textbox along with another button (show) on the screen. The text written in the textbox is visible when the show button is clicked. However, after the i ...

javascripthtml

Resuming AJAX requests after being aborted

Hey everyone, I'm curious to know if it's possible to resume interrupted ajax requests. I have an array of ajax calls stored as defferreds like this: var defferreds = []; defferreds.push( $soap.ajax({ type: "POST", dataType: ...

javascriptjqueryajax

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...

javascriptjquerycsshidesidebar

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Check out this HTML tag: <a href="#" id="navBar_navBarInput_3_subNavDropdownInput_0_subNavLinkInput_0" onclick="redirectPost(4,'EntryData.aspx');">My Cool Link</a> The Javascript function "redirectPost" function redirectPost(id, ur ...

javascripthtmlwebrequest

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Below is the DOT code snippet in Viz.js that I am working with: digraph G { node [fontname = "font-awesome"]; 17 [id=17, shape="hexagon", label=<<TABLE BORDER="0"> <TR><TD>undefined</TD></TR> <TR><TD>[47-56]< ...

javascriptjqueryhtmlsvggraphviz

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

javascriptjqueryhtml