The Bootstrap div is failing to resize proportionately

Question

The Bootstrap div is failing to resize proportionately

Although frontend development is not my expertise, I find myself needing to make adjustments to a Bootstrap-based website. I have been tweaking the heights of a specific div that is defined as follows:

html:

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

css:

.cover-container {
  max-width: 42em;
}

Modifying the max-width in the CSS has successfully altered the shape of the div as desired, but decreasing the h-100 is causing an unexpected result. Even a small adjustment such as changing h-100 to h-99 results in a significant increase in height. Any thoughts on what might be happening and how to make gradual changes?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Bootstrap doesn't recognize the h-99 class, so it will not apply any styles associated with it. Essentially, using h-99 is the same as not using any h-** class at all. Bootstrap only supports predefined sizes like 25%, 50%, 75%, and 100% (source). If you need a custom size like 99%, you will have to create your own class. For example, to create a class for 99% height, you would write:

.h-99 {
  height: 99% !important;
}

If you have already created the custom class but it's not taking effect (leading you to use max-width instead), ensure that your custom style is not being overridden by another. Place your class at the end of the class="" attribute, or use the !important declaration at the end of the height property in your CSS. While using !important can be helpful, it can also cause issues when trying to override styles later on, so it's best to use it sparingly.

In addition, remember that specifying height: 25%; may not work as expected if the parent element does not have a defined position. In such cases, adding position: relative; to the parent element can resolve the issue by making the height relative to that parent element.

To make an element take up 25% of the viewport height, you can use CSS viewport units with height: 25vh; (where vh stands for viewport height).

Answer 2

Bootstrap doesn't recognize the h-99 class, so it will not apply any styles associated with it. Essentially, using h-99 is the same as not using any h-** class at all. Bootstrap only supports predefined sizes like 25%, 50%, 75%, and 100% (source). If you need a custom size like 99%, you will have to create your own class. For example, to create a class for 99% height, you would write:

.h-99 {
  height: 99% !important;
}

If you have already created the custom class but it's not taking effect (leading you to use max-width instead), ensure that your custom style is not being overridden by another. Place your class at the end of the class="" attribute, or use the !important declaration at the end of the height property in your CSS. While using !important can be helpful, it can also cause issues when trying to override styles later on, so it's best to use it sparingly.

In addition, remember that specifying height: 25%; may not work as expected if the parent element does not have a defined position. In such cases, adding position: relative; to the parent element can resolve the issue by making the height relative to that parent element.

To make an element take up 25% of the viewport height, you can use CSS viewport units with height: 25vh; (where vh stands for viewport height).

The Bootstrap div is failing to resize proportionately

Answer №1

Similar questions

Using PHP to create redirects within an iframe

Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

Bootstrap's inline form features a button on a separate line from the rest of the form

a guide on incorporating jQuery ajax requests with node.js

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

D3.js: Difficulty fitting the chart within my bootstrap div

Steps to include a HTML webpage within another page

Logging DOM elements with Electron's webview preload feature

Tips for resizing images to fit different screen sizes on your website

VueJS does not support loading Jquery

Issue with Jquery not updating the background-size attribute

What is the process for setting dynamic variables as CSS content within Vue.js?

Is there a way to handle the ajax request only when necessary, instead of processing it every few seconds?

Picture is not displaying properly post-rotation

What is the default margin for Autocomplete in Material UI?

Incorporating information into Observable in Angular 2

Storing a string in an array in PHP: A step-by-step guide

The table does not move up or down when using the mousewheel over the rows, but only when

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Struggling to click on a link while viewing the site on your mobile device?