Differences in Column Height between Bootstrap 4 on Mobile and Desktop Devices

My design includes two columns on desktop, each with a size of 6.

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

However, on mobile, I want these columns to adjust to the height of the phone screen.

https://i.sstatic.net/3Z44d.png

Is there a way to make the height variable using Bootstrap 4 based on the device?

This is what I have tried so far:

<div class="row h-100">
    <div class="col-xl-6 h-100"></div>
    <div class="col-xl-6 h-100"></div>
</div>

How can I adjust the h-100 class dynamically based on the device, such as using h-sm-50 and h-xl-100?

css bootstrap-4 flexbox

Answer №1

There is no specific height class that varies according to the device

The only available option is to vary the height according to the viewport using Bootstrap Sizing

Therefore, you can create a custom class to assign full height only on mobile view using CSS media queries

For example:

HTML:

<div class="row h-100">
    <div class="col-xl-6 mobile-100"></div>
    <div class="col-xl-6 mobile-100"></div>
</div>

Custom CSS:

@media only screen and (max-width: 600px) {
  .mobile-100 {height:100vh}
}

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

Tips for choosing an option from a react dropdown using Cypress

Exploring Cypress: I am currently working with the following code snippet. Although it seems to be functioning, I have a feeling that there might be a more efficient way to achieve the desired result. There are 25 similar dropdowns like this one on the pag ...

css xpath cypress

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

html css browser positioning

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...

javascript html css url

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...

javascript html css google-maps google-maps-api-3

Is it possible to specify at what point the bootstrap dropdown should convert to a dropup instead?

I have noticed that the bootstrap 4 dropdown transitions to a dropup when there is not enough space at the bottom of the browser window. Is there a way to modify this behavior so that it changes to a dropup when it's, for example, 150px away from the ...

bootstrap-4 dropdown

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

javascript jquery css jquery-events keystroke

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

html css facebook

Guide on concealing and showcasing an icon within a bootstrap collapsible panel using solely CSS

Hey there, I've been working with Bootstrap's collapsible panel feature and I'm trying to get Font Awesome icons (+ / -) to display based on whether the panel is expanded or collapsed. I'm not too familiar with using CSS for this kind ...

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquery css reactjs material-ui

Error message: The specified file or directory named '-stylus' could not be found

Encountered an error message while using stylus with npm on my Linux machine. After installing nodejs from GitHub, I executed the command npm install -g stylus autoprefixer-stylus and received the following error log: npm ERR! Error: EACCES, unlink ' ...

javascript css node.js npm stylus

Tips for resolving the Bootstrap 4 carousel glitch

Hello, I am currently working on implementing a multi-item Carousel that moves one item at a time with each click. However, in my case, clicking the right arrow results in the entire slide changing. To help you understand better, I have provided a link to ...

html css bootstrap-4

Difficulty with implementing CSS Sprites in a jQuery-driven menu

Facing issues with a code base that was previously owned by someone else. Deadline is approaching fast and struggling to solve a particular issue. This code includes a table in the top section of the page, featuring a drop-down menu using CSS sprites for ...

jquery html css

Creating a Navigation Bar with a Dropdown Menu in HTML

Apologies if this question has been asked before, but I've searched everywhere and can't find an answer. All my searches just bring up dropdown menus with <nav></nav> Consider this table (serving as a navigation bar): <table cl ...

Tips for changing the display of input type submit value on hover using CSS in a React Component

I need help with a form that has an <input type="submit" element where the value is set dynamically based on currIntValue. My goal is to change the displayed value to 'Search' when hovering over the input, instead of showing currIntValue. I ...

css reactjs sass

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascript html css

Shrinking the image within a card row in Laravel/Bootstrap 5

My issue involves creating a row of Bootstrap cards using Laravel. When I add the "row" class, the images in the cards shrink. However, if I remove the "row" class, the images display perfectly. How can I fix this problem? <h1>Vehicles</ ...

php css laravel bootstrap-5

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

javascript html css canvas

A Simple Guide to Mastering the Flexbox Columns Concept

After exploring flexbox for some time and finally grasping its potential, I wanted to share an example showcasing how simple it is to create flexible column layouts without the need for CSS hacks involving excessive margins and paddings. I understand that ...

html css multiple-columns flexbox

Tips for designing an intricate Bootstrap 4 layout

I'm having trouble positioning box 7 below box 6, can someone help me with this? Here is the code for reference. To test it on your machine, make sure to include Bootstrap 4 from a CDN: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp ...

layout bootstrap-4

The functionality of -moz-background-clip:text is not functioning properly on Firefox browsers

Struggling to incorporate an image into a text within an h1 tag. Here's what I've attempted: <div class="image_clip"> <h1> MY WONDERFUL TEXT </h1> </div> In the CSS file: .image_clip{ background: url(../images/defa ...

html firefox css

CSSer Q&A