Troubleshooting Height Constraints in Bootstrap

I'm having some difficulties with Bootstrap as a beginner and can't seem to get the left column height to extend to the full height of its parent div. I've read through the documentation and tried adding the h-100 class, assuming it would take up 100% of the parent's height, but it doesn't seem to be working as expected. Maybe there's something I'm missing because it's a block element?

    <div class="container vh-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
          <div class="col-6 bg-secondary h-100">
            <h1 class="text-center">Greetings!</h1>
          </div>
          <div class="col-6">
            <img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
          </div>
        </div>
      </div>
    </div>

Answer №1

There seems to be an issue with the number of row divs and a missing h-100 on the parent element...

<div class="container vh-100">
    <div class="d-flex justify-content-center align-items-center h-100">
        <div class="row g-0 d-flex justify-content-center w-75 align-items-center border border-dark h-100">
            <div class="col-6 bg-secondary h-100 border">
                <h1 class="text-center">Hello There!</h1>
            </div>
            <div class="col-6">
                <img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
            </div>
        </div>
    </div>
</div>

Please ensure that only columns are immediate children of the row.

Answer №2

<div class="container vh-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
          <div class="col-6 bg-secondary vh-100">
            <h1 class="text-center">Hello There!</h1>
          </div>
          <div class="col-6">
            <img src="https://cdn.pixabay.com/photo/2021/07/21/07/09/cygnet-6482420_960_720.jpg" alt="ivy" class="img-fluid" />
          </div>
        </div>
      </div>
    </div>

Can you see the changes I made to fill the entire div with a background color of bg-secondary?

The design is now more visually appealing and cohesive.

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 Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

Tips for accessing your unique custom font

The website I'm currently on is using a unique font named zee family. I want to know how I can download or save this specific font style for my personal use. Any assistance with this would be greatly valued. ...

CSS not being loaded in CodeIgniter

Am I losing my mind dealing with CSS and Codeigniter? I can't figure out if it's a permissions issue or something else... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ht ...

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

Guide on altering a Tailwind Class depending on the React State or Props

Currently, I am working on a Progress Bar Component and utilizing the following versions: "next": "13.4.4", "react": "18.2.0", "react-dom": "18.2.0", "classnames": "^2.3.2", I ...

Fix background transition and add background dim effect on hover - check out the fiddle!

I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of ...

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

When hovering over elements, my li tags undergo a transformation

I am working on a simple menu code, which is just a list of items. ul li { position: relative; top: 55px; height: 30px; background: #212; display: inline-block; width: 29%; margin: 1%; margin-bottom: 0; padding: 5px; -webkit-border-t ...

The jQuery datatable is functioning correctly, however the button is rendered but is not

Originally, I have a datatable which can be viewed at the following link: The functionality I am experiencing is related to a "DISABLE" button that toggles to "ENABLE" and vice versa upon clicking. However, if you click on the same button after it has alr ...

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

Counting the number of elements in a list can be problematic when using Firefox

Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...

CSS: Targeting a particular instance of a specific element type within an HTML document

My goal is to target specific occurrences of a certain type of element in CSS for styling purposes. Consider the following example: <span>Some random stuff</span> <p>Occurrence 1 of p</p> <ul> <li>Random stuff</li&g ...

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

Generate various pop-up windows on the screen

As a beginner in jQuery, I am currently exploring how to create multiple popups within a window. My goal is to have each text trigger a different popup with unique content. Additionally, I would like the popups to close when clicked outside of the modal, r ...

Achieving a layout with two rows containing two flexboxes on each row using Flexbox

Currently, I'm working on getting two flexboxes on each row. Here is the current layout: https://i.sstatic.net/UsAI6.jpg Here is the desired layout I'm aiming for: https://i.sstatic.net/wRhw4.jpg I want to have 4 flexboxes in total, with 2 on ...

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

Create a vertical scrollable feature for the <ul> element when it is set to flex, limiting its height within the specified dimensions

In order to enhance user experience, I have implemented a live search bar that is only visible on mobile screens. For the CSS styling: .search-results { z-index: 9999; width: 80vw; position: absolute; top: 80%; left: 10%; } .search-results li ...

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

Implementing Jquery Table Selection with Custom CSS Class

When I attempted to use the selectable feature on a table with a CSS class applied, the selection did not work. However, when I removed the CSS class, the selection worked perfectly fine. I suspect that the issue lies within the CSS definition, but I' ...