A two-column layout utilizing the full height feature in Bootstrap 5, excluding the use of cards within the

I am currently attempting to create a two-column full-height page without using cards. Instead, I want to include a significant amount of text, links, and buttons in both columns. I am uncertain if this is achievable with Bootstrap columns. If anyone knows a way to help, please share the code below. The issue I am facing is that the columns are fixed at the top of the container and I am struggling to expand them to occupy the entire page.

This is what I currently have:

 <div class="container-xxl text-center" style="margin: 20px auto 20px auto;">
       <div class="row">
            <div class="col-lg text-bg-light">
                    
            </div>
            <div class="col-lg text-bg-secondary">
                    
            </div>
        </div>
  </div>
cssbootstrap-5

Answer №1

Here is the solution...

Simply include the vh-100 class in your HTML (which sets the element height to 100% of the viewport height). Learn more about it here.

.col-lg {
  border: 1px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6d6b7869592c37293728">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c2739273b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-xxl text-center" style="margin: 20px auto 20px auto;">
  <div class="row">
    <div class="col-lg text-bg-light vh-100">

    </div>
    <div class="col-lg text-bg-secondary vh-100">

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

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Currently, I am working on developing a unique progress bar that resembles a glass orb filling up with liquid. However, due to its rounded shape, the traditional approach of adjusting the height does not produce the desired result (as illustrated in this f ...

javascriptjqueryhtmlcss

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

htmlcssangularangular-materialslider

Options for Repeating and Full Width Custom Headers in WordPress

I have been exploring the WP codex extensively, but without success. I have enabled the customizer custom header and can upload images. I can then set some CSS to choose whether I want it to be full width or repeated. However, I would like to add an option ...

phpcsswordpress

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

Custom cellRenderer prevents Ag Grid's autoHeight and wrapText features from functioning properly

I've been attempting to adjust the formatting of a long cell value by wrapping the text. According to the documentation, setting autoHeight=true and wrapText=true works fine without any cellRenderer components. However, when using a cellRendererFramew ...

javascriptcssreactjsag-gridag-grid-react

Comparing the positions of elements in Selenium WebDriver with PHP

One of the elements on my webpage serves as a button that reveals a drop-down menu. Due to various factors affecting the page layout, there were some alignment issues between the button and the menu until a few bugs were fixed. I am now looking for a way t ...

javascriptphpcssselenium-webdriver

Guide to repositioning elements and fixing the functionality of the hamburger button: [ HTML & Bootstrap ]

Looking for help with creating a navbar for a website using HTML and Bootstrap. Need to move the header and link to the ends of the navbar and ensure that the hamburger button displays correctly on different screen sizes. Here's how it looks on deskt ...

htmlcssdeploymentbootstrap-5responsiveness

Confirming class Value with Selenium IDE

I am looking to confirm the value of a specific class within an HTML code using Selenium IDE. Specifically, I want to retrieve the value of: data-val located under the class named tgl. In my example, this value can be either 0 or 1. How can I achieve thi ...

cssclassseleniumxpathselenium-ide

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

javascriptjqueryhtmlcss

Modify the color of a table-hover in Bootstrap depending on the content within a cell

Here's a basic table featuring the use of table-hover Check out this Fiddle <table class="table table-hover"> <thead> <tr> <th scope="col"gt;Fleet</th> <th scope="col">Locatio ...

twitter-bootstrapbootstrap-4bootstrap-5

Chrome is the only browser displaying background images

My current issue is that the background image only appears on Chrome and not on Firefox or Edge. I am trying to have a different background image each time the page loads. $(document).ready(function() { var totalBGs = 5; var rnd = Math.floor(Math.ran ...

jquerycssgoogle-chromefirefoxmicrosoft-edge

The ul element does not encompass all child elements in terms of size

I have been working on creating a tabbed navigation component using HTML, and my code looks like this: <ul class="nav"> <li class="selected">Selected Tab</li> <li><a href="#">Not-selected Tab</a></li> ...

htmlcss

Influence of External Style Sheet not reflected in HTML

Just as the title suggests, I have an external style sheet connected to my HTML document, and it appears that the footer element may be incorporating the changes, but none of the other content is. Being new to this, I'm trying to pinpoint where I went ...

htmlcss

Is it possible to resize a div based on the width of the window?

Imagine a scenario where it's not possible to change the content of a div, but only its shape and size by using transform: scale(1.4) for instance. To better understand this concept, take a look at This Website and try resizing the window using brows ...

htmlcssreactjs

Guide on aligning a division within another division?

Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...

htmlcss

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

I am looking to remove all white spaces from my website's HTML code

I am looking to remove all white spaces from my website in html. The more I align my text to the right, the more whitespace it creates on the right side of the page. As seen in the images, there are a lot of whitespaces and I suspect that elements are caus ...

javascripthtmlcss