Ensuring Consistent Div Heights in Bootstrap Rows on Small Devices

Is there a way to ensure that both divs in a bootstrap row maintain the same height when the row collapses on smaller devices?

Here's an example of the code:

<div class="row">
    <div class="col-md-6">
         content
    </div>
    <div class="col-md-6>
         content
    </div>
</div>

The image below illustrates the issue: on larger screens, both divs have equal heights, but on smaller devices, one div appears significantly shorter. How can this be addressed to maintain consistent heights when the row collapses?

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

htmlcssbootstrap-4

Answer №1

Is it necessary for the heights to adjust dynamically, or can they remain fixed? If you prefer a set height, you can achieve this by assigning ids to your divs and specifying the CSS for specific device sizes as shown below:

HTML:

<div class="row">
    <div class="col-md-6" id="row1">
         content
    </div>
    <div class="col-md-6" id="row2">
         content
    </div>
</div>

CSS:

@media only screen and (max-width: 768px)
    {

    #row1{
    height: 300px;
    }

    #row2{
    height: 300px;
    }

    }

Answer №2

If you want to customize the dimensions of certain elements, one approach is to create separate classes in your CSS file and assign specific height values to them.

.content1 {
   background-color: red;
   height: 400px;
}

.content2 {
    background-color: blue;
    height: 400px;
}
<div class="row">
    <div class="col-md-6 content1">
         content1
    </div>
    <div class="col-md-6 content2">
         content2
    </div>
</div>

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

incorporating a previous and forward button to navigate through the enlarged picture

I am currently in the process of developing an image thumbnail slider where clicking on a thumbnail will open a pop-up box with a larger image. It is essential for me to incorporate next and previous buttons for navigating through the larger images. The f ...

javascriptjqueryhtml

Incorporating CSS into an HTML document with Jersey/Grizzly

This is the structure of my project: src/main/java -- main.java src/main/resources -- webapp -- -- css -- -- js -- -- images -- -- pages -- -- -- home.html Currently, my Maven project utilizes Jersey and Grizzly. I am able to call my REST services and lo ...

javahtmlcssmavengrizzly

Guide to interpreting an Angular expression using traditional JavaScript conventions

I have encountered an issue with the Angular app that I am currently working on. It needs to retrieve the Google Analytics ID from Angular in order to pass it to ga('create', 'UA-XXXXX-Y') using standard JavaScript in my index.html. &l ...

javascripthtmlarraysangularjsgoogle-analytics

How can I switch between columns in a dual-column layout?

In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumberso ...

jqueryhtmlcssflexbox

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

javascripthtmlcss

What is the method for stretching the navbar and content to fill the entire viewport in Bootstrap?

Can anyone help me with an issue regarding a navigation bar and content created in Bootstrap 5? I'm trying to use vh-100 to make both the navigation bar and content stay on the view page without a scrollbar. However, the size of the navigation bar is ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Issue with background image positioning in IE 7 while scrolling

I am struggling with creating nested divs where the middle one has a fixed background image that remains static while the rest of the content scrolls. My solution works in Firefox, Chrome, and Opera but I'm encountering issues in IE7. Despite knowing ...

csshtmlbackground-imageinternet-explorer-7

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

The collapse button in Bootstrap 3.3 and jQuery 1.1 appears to be visible but unresponsive when clicked

This code isn't functioning properly as it displays the three horizontal bar button, but nothing happens when clicked. bootstrap-3.3 jquery-1.1 Toggle navigation CopyHere <div class="collap ...

htmlcsstwitter-bootstrap-3jquery-1.10

"jQuery Hide-and-Seek: A Fun Way to Manip

I am facing a challenge with a set of divs that I need to dynamically show and hide based on user interactions with questions. Essentially, the user will be presented with a question. Based on their answer, specific content with a title and description wi ...

javascriptjqueryhtmlcss

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...

javascriptjqueryhtmlcss

Breaking a line within a list item will create additional spacing between the lines

Is there a way to break a line <br/> inside a <li> tag? For example: First line second line Second list item Third list item I've tried setting margin and padding to 0, but I still get an unwanted space between the lines. Any suggesti ...

htmlcss

What is the best way to create an Angular image slider that smoothly transitions between slides without any intermediate steps?

In my Angular application, I've successfully implemented an image slider. However, I am looking to tweak its behavior specifically when navigating between non-adjacent slides using the circular navigation buttons located below the slider. Currently, ...

htmlcssangularcarouselimage-slider

Struggling with responsive design and the challenges of absolute positioning

Currently in the process of creating a page for case studies, where a main banner image is followed by 3 rows of 3 sub-images. Each image is added through the background-image property to maintain consistent div heights. The divs have a hover container on ...

htmlcssresponsive-design

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Currently, I am developing a React Chart JS component that displays a set of horizontal bars. My objective is to maintain the width of the bars at a consistent size regardless of the number of bars present (e.g., all bars at 30px). However, when additiona ...

htmlcssreactjstypescriptchart.js

What is the ideal JavaScript framework for implementing drag-and-drop, resize, and rotation features?

I am planning to create a web application that involves images and text with user handle functionalities such as drag-and-drop, resizing, and rotating. Although I have tried using JQuery UI js to implement drag-and-drop, rotate, and resize, I have encount ...

javascripthtmldrag-and-droprotationresize

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

htmlcsstwitter-bootstrap-3