Arrange multiple divs on top of each other by utilizing the Bootstrap flexbox system

Apologies for my lack of experience with Bootstrap, specifically version 4.0. I have been researching extensively but am struggling to accomplish the simple task of stacking two divs on top of each other.

<div class="d-flex flex-column">
  <div style="background: blueviolet">
    Flex item 1
  </div>
  <div style="background: burlywood">
    Flex item 2
  </div>
</div>

My goal is to make Flexbox 1 50% height and have Flexbox 2 fill the remaining height, or to set Flexbox 1 at 40% height and let Flexbox 2 occupy the rest of the space.

I have been referring to the Bootstrap documentation for guidance. Are there any other resources you would recommend for me to explore?

Thank you in advance for your assistance.

cssbootstrap-4flexbox

Answer №1

Utilize the flex-fill class to automatically fill up the remaining space.

Experiment with adjusting the height of the .item-1 class to observe the outcome.

Link to Example

html,body {
  height: 100%;
}

.item-1 {
  height: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-column h-100">
  <div style="background: blueviolet" class="item-1">
    Flex item 1
  </div>
  <div style="background: burlywood" class="flex-fill">
    Flex item 2
  </div>
</div>

Answer №2

When working with flex items, it's important to make sure certain properties are set on both the parent container and each child element for them to behave as expected.

For a helpful overview, check out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can also reference this guide: https://www.w3schools.com/css/css3_flexbox.asp

If your current layout has two divs stacked vertically and you'd like to adjust their height, consider setting a min-height on the wrapper element. You may find these discussions on Stack Overflow helpful: How can I make my flexbox layout take 100% vertical space? or flexbox + bootstrap 4. How to stretch child of .col-**-*?

To make an item occupy 50% of the viewport height, you can use the CSS property min-height: 50vh;

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

How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected: Upon implementation, I obtained the following result: https://i.sstatic. ...

htmlcsspdftcpdfborder-radius

Guide to positioning an image next to text within a table: Utilizing jQuery DataTable to organize images alongside text in a table header

When using the jQUery DataTable plugin, I encountered an issue where the table header text and the image for sorting are not properly aligned. Here is how it looks: https://i.sstatic.net/Kqgz9.png (I want the arrow and the text to be aligned horizontally ...

css

The Infinite scroll feature in Fuel UX is ineffective when a specific height is not defined for the

In my current project, I am utilizing Bootstrap and Fuel UX v3.4.0 with the goal of implementing Infinite scroll throughout my entire page. Unfortunately, I have encountered difficulties in achieving this implementation. By replicating the infinite scroll ...

jqueryhtmlcsstwitter-bootstrapfuelux

What is the best way to format text within the _e() function in WordPress?

As I work on developing a basic plugin, I encountered the following line of code: echo "<p style=\"color:red;\">Please enter a valid email address!</p>"; I aim to make this plugin easy to localize and internationa ...

phpcsswordpressplugins

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

Anchor tag buttons do not affect the font color and variables remain unchanged

I've been struggling to change the font color and background color of the <a> element, but nothing seems to work. I've attempted using hexadecimal notation and styling the .btn class without pseudo-classes, with no luck. Check out my CodeP ...

htmlcsscss-variables

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

While testing my website on my iPhone, I noticed a significant gap appearing on either side of the app in landscape view in Safari. Is there a solution to fix this issue? The problem occurs in both Angular and React applications, examples of which are disp ...

htmlcssreactjsangularmaterial-ui

The alignment issue arises when the browser is resized

Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzz ...

htmlcssimageresponsive-designresize

Tips for maintaining table elements in place using JavaScript

My goal is to keep the tags within the table fixed when printing. The code I've written functions correctly in View mode, however, when printed using JavaScript, if one of the columns is too large, the rest of the columns get displaced. I want all col ...

javascriptcssasp.net-core

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

CSS: concealing certain portions of an element's content

I don't have control over the following markup: <p class="filename"> <img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg"> <br> Chrysanthemum.jpg </p> Is it possible ...

css

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

To separate a lengthy string, I followed the approach outlined in this post: .line { display: inline-block; } <p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </ ...

htmlcss

Can you explain the meaning of 1__qem?

While looking at the default styles applied to HTML elements for Google Chrome, I came across this information on this page: p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -web ...

cssgoogle-chromewebkit

Utilize ngClass for every individual section

I have completed the implementation of all UI components, which are visually appealing. https://i.sstatic.net/hxJQr.png Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'ye ...

cssangulartypescriptng-class

overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color. I am seeking a method to achieve this effect withou ...

css

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

css

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

javascriptcssangulartypescriptng-bootstrap

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

javascripthtmlcssbootstrap-4