Exploring Bootstrap 5: Utilizing flex columns for children elements with full width and equal height display

https://i.sstatic.net/hpajE.png

Is there a way to have elements on the left stack vertically, with equal height and width of the parent element, filling the entire height? I need this layout for three or more elements using Bootstrap 5.

This is the HTML code:

<div class="row come-in">
    <div class="col-md-1 sections">
        <div>All</div>
        <div>Best</div>
        <div>Ever</div>
    </div>....

And here is the CSS code:

.sections {
  text-orientation: upright;
  writing-mode:vertical-lr;
  align-items: stretch;
  flex-flow: column;
}
.sections > div
{
   width: max-content;
   flex-grow: 1;
}

Answer №1

Are you interested in this content?

Greetings from Slovenia. :)

.sections {
  text-orientation: upright;
  writing-mode: vertical-lr;
  align-items: stretch;
  flex-flow: column;
}

.sections > div {
  width: max-content;
  flex-grow: 1;
}

.row {
  height: 500px;
  border: 1px solid red;
}

.col-md-1 {
  border: 1px solid blue;
}

.col-md-1 > div {
  display: inline;
}

.col-md-1 > div > div {
  border: 1px solid green;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239253925">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c4d8c4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="row come-in">
  <div class="col-md-1 sections">
    <div class="d-flex">
      <div class="flex-grow-1">All</div>
      <div class="flex-grow-1">Best</div>
      <div class="flex-grow-1">Ever</div>
    </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 for creating a smooth fade in/out effect for the "Show More" feature in Vue

This is my current Lorem Ipsum page. When I click the Lorem button, the text will be expand or collapse. https://i.sstatic.net/BldW4.png I attempted to modify the css below to create a fading effect for the hidden text. @keyframes open { from { li ...

Elements overlapped with varying opacities and responsive to mouse hovering

In this Q/A session, we will explore a JS solution for managing the opacity of overlapping elements consistently during hover. Objective Our goal is to create two transparent and overlapping elements, similar to the red boxes showcased below. These eleme ...

Apply a class to each consecutive element following the current one until reaching a child element with a

My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next o ...

Can CSS be used to dynamically change the color of an element based on a specific value?

Is it possible to dynamically change the background color of table cells using only CSS based on their values? For example, I am looking to achieve a similar effect as in Excel with conditionally formatted values: https://i.stack.imgur.com/6BsLB.png If ...

Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

I've been facing a challenge with making my web page resizable. Even though I managed to center the elements using margin properties, whenever I try resizing the browser window, the logo and ship images lose their positions. They end up falling out of ...

Animate the coloring process with dynamic motion

Is there a way to dynamically fill a canvas with color and apply animation? I have successfully created a canvas cylinder that fills with color, but I'm hoping for a slow animation effect when the color is filled. I've tried searching on Google ...

The issue with negative margin-right is not functioning as expected on Chrome's browser

Hello everyone! I'm having some trouble cropping an image using another div. I've noticed that the margin properties -left, -top, and -bottom are working fine, but for some reason the margin-right isn't cooperating on Chrome. Do you have any ...

Guide on positioning a navigation bar to the right using Bootstrap 5.3

Below is the code I have been working on: <nav class="navbar bg-dark navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="butt ...

Tips for keeping a Bootstrap div fixed at the top of the viewport

I have a webpage built with Bootstrap 5 that incorporates vertical navigation tabs. The issue I am facing is that, particularly on larger screens, the page tends to scroll up and down based on the content displayed in the tabs. My goal is to ensure that t ...

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

Does anyone know why my CSS3 pseudo elements are working fine in Chrome, but reverting back to default styling in Firefox for my radio button? Any suggestions? Check out this JSFIDDLE link for reference: JSFIDDLE Here is the HTML code snippet: <input ...

The CSS selector "not:nth-child" is failing to function properly within the template

Trying to apply a margin-top to all labels except the first one in a row using the :not() and :nth-child selectors. Having trouble with my selector, can anyone help? .form-group:not(:nth-child(1)) + .label { margin-top: 20px; } <div class="form- ...

React App Showing Scrollbar When Material UI AppBar is Present

I'm encountering a straightforward issue in my React application. How can I get rid of the scrollbar on my page? It seems like the problem arises from the height value I set to 100vh. However, upon removing the AppBar, the scrollbar disappears. Any su ...

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

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

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

How do you set a background image for the color of the font?

Imagine I have this piece of code: <span>Hello world!</span> Along with the following CSS: span{ color:red; } Is it possible to replace the red value with an image? Something like url(images/text-bg.png);? I am looking to add a texture to m ...

Is it impossible to use CSS for absolute positioning of text?

I am currently learning CSS and HTML, as I'm working on a project for my final school assignment. My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem ...