What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework.

I'm wondering if there's a way to automatically adjust all the columns to the height of the row. Here's a snippet of my code:

<div class="row">
    <div class="col-md-6 col-xs-12">
        <img src="images/main.jpg" class="img-responsive" alt="" />

        <div class="slogan">
            <h1>WEBSITE TITLE.<br />SLOGAN.</h1>
        </div>
    </div>

    <div class="col-md-3 col-xs-6">
        <div class="box content">
            <h3>Services and Pricing</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">READ MORE</a>
        </div>

        <img src="images/1.jpg" class="img-responsive" alt="" />
    </div>

    <div class="col-md-3 col-xs-6">
        <img src="images/2.jpg" class="img-responsive" alt="" />

        <div class="box content">
            <h3>Student Discount</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">LEARN MORE</a>
        </div>
    </div>
</div>

In this example, I've noticed that the two "col-md-3 col-xs-6" columns do not match the height of the "col-md-6 col-xs-12" column.

Can anyone advise on how to make them align with the row's height so that all content appears uniformly?

Your help is greatly appreciated.

htmlcss

Answer №1

To ensure that all columns have the same height, you can utilize CSS flexbox. Here is an example of how you can modify your code:

<div class="row heightadjust">
    <div class="col-md-6 col-xs-12">
        <img src="images/main.jpg" class="img-responsive" alt="" />

        <div class="slogan">
            <h1>WEBSITE TITLE.<br />SLOGAN.</h1>
        </div>
    </div>

    <div class="col-md-3 col-xs-6">
        <div class="box content">
            <h3>Services and Pricing</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">READ MORE</a>
        </div>

        <img src="images/1.jpg" class="img-responsive" alt="" />
    </div>

    <div class="col-md-3 col-xs-6">
        <img src="images/2.jpg" class="img-responsive" alt="" />

        <div class="box content">
            <h3>Student Discount</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">LEARN MORE</a>
        </div>
    </div>
</div>

Make sure to add the following custom CSS:

.heightadjust {
    display: flex;
}

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

Positioning the HTML form in the middle of the page

The given HTML code generates a form within a table, but despite aligning the table to the center, it remains on the left side of the webpage. <!DOCTYPE html> <html> <head> <style>input.textfill { float: right; }&l ...

htmlcssalignmentcentercss-tables

Angular, PHP, and MySQL working together to establish database connectivity

Greetings! I am facing some challenges with a small project involving mySQL and PHP for the first time. My main focus right now is on establishing connectivity. Despite following various tutorials, I have been unable to connect to the database and keep enc ...

javascriptphphtmlmysqlangularjs

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

I am currently facing an issue with my sign up form. Whenever a user creates an account, I use localStorage to save the form values. However, if the user is redirected to another page after hitting the submit button, only the last user's data is saved ...

javascripthtml

Angular 2: The *ngFor directive is unable to locate a suitable differing framework

Below is the code for client.service.ts clients: Client[]; getClientList() { let headers = new Headers(); headers.append('Content-Type', 'application/json'); let authToken = localStorage.getItem('auth_token&apo ...

htmlangulartypescript

I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side o ...

csscss-floathtml

Navigating through Frames using Selenium in C#

I am facing an issue with using Selenium on this site. The elements I need to interact with are within a 'frame' that is inside a 'frameset'. Here is the relevant HTML snippet: <frameset rows="0%, 95%" frameborder="0" frameSpacing=" ...

c#htmlseleniumframeframeset

What is the best way to customize the appearance of a non-current month cell within the date picker?

I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...

javacssjavafx

Managing errors in jQuery's .ajax function

Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...

javascriptjqueryhtmlajax

Web browser local storage

Looking to store the value of an input text box in local storage when a button is submitted <html> <body action="Servlet.do" > <input type="text" name="a"/> <button type="submit"></button> </body> </html> Any sug ...

javascriptjqueryhtmllocal-storage

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

React - Obtain User Login Details and Verify

I am working on a React project that includes a Login Form. The code has been organized into small components for reusability, but I am unsure of how to retrieve and validate user credentials (username and password). Is there a method available to validate ...

javascripthtmlreactjs

Styling with CSS: How to Show an Absolutely Positioned Element in Google Chrome

I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have: .dc-mega-icon { background-image: url(...); display: inline-block; position: absolute; top: 18px; width: ...

htmlcssimagepositionabsolute

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

I was unable to find any existing documentation or questions related to my query, which surprised me. Upon inspecting the React index.d.ts file, I came across the following: // Keyboard Events onKeyDown?: KeyboardEventHandler<T>; onKeyDownCapture?: ...

htmlreactjsdom-events

After uploading the WordPress theme, the wp_enqueue_style() function fails to work properly

I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...

phpcsswordpressloadenqueue

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

javascriptjquerycss

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

Exploring Concealed Data and Corresponding in jquery, javascript, and html

A unique template contains 2 hidden fields and 1 checkbox. Using the function addProductImage(), the template is rendered and added to the HTML page. To retrieve the values of the hidden fields (thisFile and mainImage) from a dynamically generated div wit ...

javascriptjqueryhtml

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

What techniques can I use to merge alpha channels with compositing in images?

Utilizing an HTML5 Canvas along with the KineticJS(KonvaJS) canvas library, I have successfully incorporated an Image element. My current objective is to erase specific pixels while maintaining a certain level of transparency. The red dot erases pixels at ...

javascripthtmlcanvaskineticjskonvajs

Image transformation not rotating the image

I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right. What am I missing that's preventing this from looking like a smooth 180-degree spin? .bl ...

htmlcsstransformcss-transforms