Utilize Bootstrap rows and columns to extend the column color to the bottom of the page

I'm having trouble getting the background color of a bootstrap col to extend to the bottom of the page without setting a fixed height. I want it to reach all the way to the bottom of the browser screen.

HTML:

<div class="container">
  <div class="row">
    <div class="col box1">
      Box1
      I want the blue background to reach the bottom of the page
    </div>
    <div class="col">
      Box2
    </div>
  </div>
</div>

CSS:
.box1 {
  background-color: aqua;
}

JS Fiddle available at the following link: https://jsfiddle.net/romanbogza/oL3nk8wz/

Answer №1

To achieve this effect, you can utilize the min-vh-100 ( min-height: 100vh; ) class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col box1 min-vh-100 bg-info">
            Box1 with blue background, extending to the bottom of the page
        </div>
        <div class="col">
            Box2
        </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

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

Troubleshooting CSS appendChild not functioning as anticipated

I'm attempting to manually input CSS for font-face in a new window with the following code: const css = '@font-face {font-family:Roboto; src:url("assets/fonts/Roboto-Black.ttf");}'; const head = this.externalWindow.document.getElementsByTag ...

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

I am looking to incorporate a graph displaying sales and purchase data on my webpage. Users should be able to select from categories like Purchase, Sales, or Production. I have separate tables for Purchase (AccPurchase) and Sales (AccSales), with productio ...

Transitioning from one bootstrap modal to another in quick succession may lead to unexpected scrolling problems

I'm facing a challenge with two modals where scrolling behavior becomes problematic when transitioning from one to the other. Instead of scrolling within the modal itself, the content behind it is scrolled instead. In order to address this issue, I im ...

How to Position Buttons at the Bottom of a Card with Bootstrap

When creating a card for certain items, I am using the code below. To align the button at the bottom of the card, I have implemented the following: return ' <div class="col"> <div class="card detail ...

Tips for building a homepage button with an image and text using HTML and CSS

My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the ...

The attempt to showcase items in a div element using inline display did not produce

I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below. What I am trying to achieve is a header at the top, followed by several sections containing a photo on ...

I would like to create a layout featuring 3 columns spread across 2 rows, with each column showcasing only images

I've been experimenting with creating a column layout that spans three columns across the top and two rows down. So far, I've managed to create the first row but I'm unsure of how to split it into the second row. .container { display: ...

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

What is the best way to evenly divide divs vertically on a Bootstrap website?

I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

Using CSS to create various h1 headings with distinct colors and sizes

I am currently working with CSS and HTML, trying to replicate the design shown in this image: https://i.stack.imgur.com/Uyczp.png Initially, I attempted to achieve this by using multiple h1 tags, but after researching further, I realized that it is gener ...

Explore and target elements using browser inspection

Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...

Issue in Less.js: the 'min' function encountered an error due to incompatible types

In my _main.less file, I have the following styling: #mapid { width: 100%; min-height: min(65vh, 500px); max-height: 500px; } However, when using the Less compiler with grunt, it throws an error: >> File "public/less/_main.less" chan ...

Troubleshooting: Issue with Bootstrap 4 navbar toggle button functionality

Is it possible to manually control the opening and hiding of the navbar when the toggle button is clicked in bootstrap 4? Currently, my navbar automatically opens and closes when clicking the toggle button. Any suggestions on how to modify this behavior wo ...