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: https://i.sstatic.net/nn1LZ.jpg

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

The JavaScript-set value in a form field is not being transmitted to the PHP script within the $_POST array

Struggling to pass a JavaScript value to a .php script, and then on to a .txt script. It works fine with regular numbers, but when trying with the variable it fails, leaving the .txt file blank. Despite extensive research online, I can't seem to get i ...

javascriptphphtmlformspost

Is it true that Internet Explorer does not support border radius?

Styling with CSS border-bottom: 1px solid silver; background-color: #000; background: rgb(51,51,51); /* Old browsers */ background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, ...

css

tips for correctly importing source files into jasmine-node testing framework

Currently, I am utilizing the jasmine spec library in combination with the jasmine-node runner for node.js. My main query revolves around the correct method to execute tests using a command in the CLI that encompasses both source files and spec files. Wit ...

javascriptnode.jsunit-testingjasmine

Steps for Loading HTML5 Video Element in Ionic 2

Struggling to showcase a list of videos from my server, here's the issue I'm encountering and the layout of the app. https://i.stack.imgur.com/HWVt3.png This is the code snippet in HTML: <ion-list> <button ion-item *ngFor="let v ...

htmlangularcssionic2ionic3

The encoding error in the encoding process must adhere to valid encoding standards

I recently developed a basic program that utilizes process.stdin and process.stdout. However, when I executed the program and tried to input a value for stdout, an error message popped up stating "TypeError: 'encoding' must be a valid string enco ...

javascriptnode.js

Unable to create property within array in model

I am facing an issue while trying to access the name property of an array called Model[] generated from my Model.ts file. When attempting to use it in my app.component, I receive an error stating that the property 'name' does not exist on type Mo ...

javascripthtmlarraysangulartypescript

Incorporate the {{ }} syntax to implement the Function

Can a function, such as toLocaleLowerCase(), be used inside {{ }}? If not, is there an alternative method for achieving this? <div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3"> <label class=" ...

htmlangulartypescriptfrontend

PhantomJS reveals underlying jQuery bug

Currently, I am developing automated test scripts that require a headless browser (PhantomJS) to perform all DOM navigation and actions except for downloads. So, PhantomJS seems like the right choice. However, I am encountering errors when trying to use P ...

javascriptjqueryseleniumphantomjsbrowser-automation

The appearance of my HTML website varies significantly across different devices used by viewers

It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...

htmlcssbootstrap-4

I attempted to verify the login through postman, but encountered an error in the process

I created the login route on the backend and tested it in Postman, but encountered this error message: https://i.stack.imgur.com/PdyCo.png Below is the code for the login route: router.post("/login", async (req, res) => { try { const user = await ...

javascriptexpressauthenticationroutespostman

Create a more concise JavaScript function for updating MongoDB using if/else statements

Can this function be optimized for efficiency and readability? I'm not a fan of the repetitive if/else structure, especially considering that it's only setting 'status.edited': false when method equals 'reset'. Otherwise, it s ...

javascriptmongodbmongodb-query

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents cons ...

javascriptangulartypescriptclasses6-class

Tips for circumventing the use of the '&' operator in string manipulation

Here is the code snippet I am having trouble with: <?php $agentId = "LLM002"; echo "&&" . $agentId; ?> Instead of the expected output &&LLM002, I'm getting &<M002. It seems like there might be a conversion error ...

phphtml

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

I'm struggling to find the right way to articulate my issue in the title because it's quite specific to my current situation. Basically, I have two external classes structured like this: class Config { public level: number = 1; //this is a s ...

javascriptreactjstypescript

What is the reason behind Azure Identity's choice of Browserflow over nodeflow for integration in my Next.js application?

Embarking on my inaugural project with Next.js, I find myself in unfamiliar territory. Rather than joining existing projects, I am constructing apps from scratch, encountering a challenge with Azure Identity along the way. Upon delving into the node module ...

javascriptazurenext.js

Animate internal navigation buttons to fade in with the use of jQuery

I have a webpage with a gallery of images displayed in an unordered list format. My goal is to create a hover effect where up and down arrows fade in when I hover over an image, allowing the user to click on the arrows to navigate between photos. The curr ...

jqueryhovereachfade

Guide for using express.js

Similar to how you can use to view the source code of all classes in Java, is there a resource available to view the source code of the express module? ...

javascriptnode.jsexpress

Each time new scripts are loaded, the Angular 13 window.ng.ɵcompilerFacade gets swapped out for a fresh

New Update: After observing the behavior of loading components/modules in my application, I have noticed a conflict arising between window.ng.ɵcompilerFacade and v13 compliance format when switching between Angular versions. The issue occurs when loading ...

javascriptangularangular-directiveangular13zonejs

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

I am working with a list item and trying to apply styles using System.Web.UI.WebControls.Style. However, I noticed that there isn't a MergeStyle option similar to what's available for controls. Instead, there is an Attributes.CssStyle property of ...

asp.netcsslistitem

Using the increment operator within a for loop in JavaScript

this code snippet causes an endless loop for (let i = 0; ++i;) { console.log(i) } the one that follows doesn't even run, why is that? for (let i = 0; i++;) { console.log(i) } I want a thorough understanding of this concept ...

javascriptnode.jstypescript