Bootstrap flex: on a single row, one column spans the entire height while the other contains elements that are vertically aligned in the center

I'm having trouble with Bootstrap 4 as I try to vertically align the elements of the right column and create a full-height column on the left with just a background color. I've come across many posts discussing similar issues, but none specific to this approach.

This is my HTML:

<div class="container-fluid">
    <div class="row ">
        <div class="col-md-6 ">
            <div class="content colour-1">
                <!-- Just aiming for a full height background color -->

              </div>
        </div>
        <div class="col-md-6 ..->class?">
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" >
                <!-- Just looking to vertically align this small form - center -->
            </form>
        </div>
    </div>
</div>

How can I accomplish this? Is it achievable using only Bootstrap 4? Keep in mind that I'm using Angular, so these are my dependencies:

 "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~9.1.9",
    "@angular/localize": "~9.1.9",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0", -->NG-BOOTSTRAP
    "bootstrap": "^4.4.0", --->BOOTSTRAP
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
cssangularbootstrap-4flexbox

Answer №1

<div class="container">
    <div class="row" style="height: 100vh">
        <div class="col-6 d-flex flex-grow-auto">
            <div class="content colour-1">
                //Seeking a solid background color

            </div>
        </div>
        <div class="col-6 flex-row d-flex flex-column justify-content-center">
            <input class="form-control">
            <input class="form-control">

        </div>
        </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

Guide to programmatically inserting a component within a table row loop in Angular 2

I'm facing an issue with my table that loops through each row. Whenever a user clicks a link in a row, I want to create a child row below it. The challenge is that I would like this child row to be a component so I can pass data to it. Is it possible ...

angular

Are there any performance implications when using an excessive number of background images in CSS?

My website seems to be running too slowly based on user reports. I suspect that the background images in CSS may be causing the issue. The site uses a custom build system to concatenate and compress all CSS, create CSS sprites automatically, resulting in ...

cssperformancebackground-imagecss-sprites

HTML - Customizing container with background color and ensuring minimum height of 100%

After creating a dynamic page using Bootstrap, I managed to add a sticky nav bar and footer. The navbar, footer, and page content are all in black color. I want the main content area to be white with black sides matching the background. Currently, I ca ...

htmlcsstwitter-bootstrapresponsive-designsticky-footer

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

androidcsssvgoverflowsamsung-internet

What purpose does the # symbol serve in Angular when interpolating values?

Here is an example provided from the following link: https://angular.io/guide/lifecycle-hooks export class PeekABoo implements OnInit { constructor(private logger: LoggerService) { } // Implementing OnInit's `ngOnInit` method ngOnInit() { this ...

angulartypescript

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

cssreactjs

What is the best way to ensure that an anchor in a scrolling list adjusts its width based on its children's content?

Check out the setup I have here: http://jsfiddle.net/9F6CF/ In this scenario, there is a list containing anchors within each list item. The UL element has a specific width and an overflow set to auto, causing text in the anchors to scroll horizontally if ...

htmlcss

Angular2 application experiences exception in the karma test for checking karma

Is there a way for me to access more detailed logs? I'm struggling to pinpoint where the error is originating from. A critical error occurred while running my code: Chrome 57.0.2987 (Linux 0.0.0) ERROR Uncaught Response with status: 0 for URL: null ...

angularkarma-jasmine

Input field, upon receiving focus, triggers a subtle shift in the position of the submit button

Thank you for the assistance, I believe this issue should be an easy fix. I have added a custom :focus style to my input that removes the default outline and adds a box shadow and border. However, when the input field is focused, the submit button located ...

cssforms

Display a single item using Jquery when clicking on an element with the same class

I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items? Here is my code: $(function() { $('.embedContainer > .myPosterImage& ...

javascripthtmljquerycssscripting

Adding a Third-Party JavaScript Plugin to Angular 7

I've been attempting to integrate the read-excel-file JavaScript plugin into my Angular 7 project. Despite following all the methods recommended on various websites, I have yet to succeed. Could anyone provide a better solution? declare var readXlsx ...

angulartypescriptpluginsecmascript-6

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

Tooltip not appearing in designated spot as designed

I seem to be having an issue with the positioning of my custom tooltip on a graph. The arrow mark in the tooltip is not displaying where it should be. Can anyone help me figure out what I'm doing wrong? If you'd like to see exactly what I mean, ...

css

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

javascripthtmlcss

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Angular2's service executing http method is limited to just once

I have a service that is responsible for retrieving information from the server. The goal is to execute the request only once and then share the data with every component in the application. Currently, my code looks like this: @Injectable() export class P ...

httpserviceangular

The leaflet popup fails to open for the second time

I used a for loop to create markers on the map. When I click on a marker, a popup opens. However, after clicking on the same marker a second time, the popup does not open. My $scope.resSearchAnnouncement contains JSON data. How can I resolve this issue? ...

javascriptangularleaflet

Attempting to test the PactV3 GraphQL endpoint leads to failure as it is met with a 500 Internal Server Error

Currently, I am facing a challenge with creating a Pact on the consumer side using Pact-JS. I have noticed that in PactJS v3, the .withQuery method has been removed and support for GraphQL testing is not available as well. Although it should be possible t ...

angularjestjspact

Gradually make text disappear while scrolling

On my webpage, I have a background image that remains fixed and centered. When the content on the page is long enough to overflow, I want the text to appear inside the image and fade out as you scroll towards the top or bottom of the image. I do not want a ...

javascriptjqueryhtmlcss

Creating multiple rectangles and filling them with a color chosen by the user in Angular can be achieved by following these steps

Looking for advice on angular coding. I'm working on a project that requires creating multiple rectangles and filling them based on selected values. Can anyone suggest a module that would offer this functionality? ...

htmlangularangular6