tips for aligning bootstrap flex items horizontally in multiple div containers

Is there a more efficient method to align flex items in different div flex containers so that the flex items have the same width, as shown below?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f6e9f6f6e3f4a8ecf5c6b7a8b7b0a8b6">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary" style="width: 130px">short</div>
  <div class="p-1 bg-secondary" style="width: 110px">mediuuum</div>
  <div class="p-1 bg-info" style="width: 80px">loooooong</div>
</div>
<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary" style="width: 130px">looooooooooong</div>
  <div class="p-1 bg-secondary" style="width: 110px">short</div>
  <div class="p-1 bg-info" style="width: 80px">mediuuum</div>
</div>
<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary" style="width: 130px">mediuuum</div>
  <div class="p-1 bg-secondary" style="width: 110px">looooooooong</div>
  <div class="p-1 bg-info" style="width: 80px">short</div>
</div>

notes:

  • The flex divs need to be generated in a loop, with their widths determined at the end for horizontal alignment
  • This example is simplified; actual flex items have varying lengths

This is how the flex items would look without custom width calculation:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1d021d1d081f43071e2d5c435c5b435d">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary">short</div>
  <div class="p-1 bg-secondary">mediuuum</div>
  <div class="p-1 bg-info">loooooong</div>
</div>
<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary">looooooooooong</div>
  <div class="p-1 bg-secondary">short</div>
  <div class="p-1 bg-info">mediuuum</div>
</div>
<div class="d-flex alert p-0 mb-2">
  <div class="p-1 bg-primary">mediuuum</div>
  <div class="p-1 bg-secondary">looooooooong</div>
  <div class="p-1 bg-info">short</div>
</div>

Is there a built-in feature that handles this alignment without relying on manual width adjustments?

cssbootstrap-4flexbox

Answer №1

This layout is structured as a table, not utilizing flexbox properties:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d4cbd4d4c1d68aced7e4958a95928a94">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="d-table">
<div class="d-table-row">
  <div class="d-table-cell p-1 bg-primary ">short</div>
  <div class="d-table-cell p-1 bg-secondary">medium</div>
  <div class="d-table-cell p-1 bg-info">long</div>
</div>
<div class="d-table-row">
  <div class="d-table-cell p-1 bg-primary">very long</div>
  <div class="d-table-cell p-1 bg-secondary">short</div>
  <div class="d-table-cell p-1 bg-info">medium</div>
</div>
<div class="d-table-row">
  <div class="d-table-cell p-1 bg-primary">medium</div>
  <div class="d-table-cell p-1 bg-secondary">very long</div>
  <div class="d-table-cell p-1 bg-info">short</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

The functionality of Bootstrap collapse ceases to function properly after changing the field type to WYSIWYG

I'm currently building a FAQ page for my WordPress website. I've implemented Bootstrap 4.0's collapse component and ACF Pro to develop the page. On the backend, administrators have the ability to input questions and answers. The answers sho ...

wordpressbootstrap-4advanced-custom-fields

When you tap on the child element, ignore the parent element

Is there a way to make CSS understand that clicking on a child element within the parent should not be considered as clicking on the parent as well? Why not give it a try by clicking on one of the children inside the parent? .parent{ background: b ...

htmlcss

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

Determine the total number of days using the bootstrap date range picker

Currently, I am utilizing the bootstrap jquery daterangepicker in order to determine the number of days between 2 dates. Within my HTML code, I have implemented 2 input fields as shown below: <div class="col-12 form-group has-feedback"> <labe ...

jqueryhtmlbootstrap-4bootstrap-modalbootstrap-daterangepicker

The attribute 'checked' is not a valid property for the 'TElement' type

Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...

javascriptjquerycssangulartypescript

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

htmlangulartypescriptbootstrap-4angular2-routing

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Using jQuery to create a script that will transition random images simultaneously within a div

I am currently working on a JavaScript script that will animate 10 images flying into a div, appearing side by side. The goal is to have each image fly in randomly with a unique transition. At the moment, my script is almost complete as I've successf ...

javascriptjqueryhtmlcss

Displaying a loading animation within a specific div element

Is it possible to use jQuery to insert a div into another div? My goal is to replace the contents of one div with a loading div while waiting for an ajax call to return. <div id="content1">foo</div> <div id="content2">bar</div> < ...

javascriptjqueryhtmlcssajax

Using HTML, CSS, and jQuery to add a power sign to an input text box

Is there a way to enter square root and squared symbols into an input box using a calculator with buttons? When clicking a button, the value will be shown in the input box. For example, expressions like x²+x³ or 2√13 + 3√4. I'm primarily concern ...

jqueryhtmlcss

Is the Mini Cart button in Woocommerce not aligned properly?

My website was functioning perfectly until yesterday. However, after updating some plugins, the Mini Cart dropdown button started to display in a weird and misaligned manner. https://i.sstatic.net/SsZee.jpg Prior to the plugin updates, the button had the ...

csswordpresswoocommerce

Swap Text/Characters When Hovered Over

I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for thi ...

javascriptjqueryhtmlcss

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

Styling float-right elements in Bootstrap with Material UI Box Borders

Implementing a Material UI Box to display border with a bootstrap element embedded <input type="submit" className="btn btn-primary float-right" value="Send" /> You can check out the code sandbox li ...

bootstrap-4material-ui

Ways to utilize two distinct XPATH values for a single key

When dealing with Xpath for the same object in two different portals, the paths can be: //*[@id="abc"]/fieldset/div/div/div[1]/label //*[@id="xyz"]/fieldset/div[1]/fieldset/div/div/div[1]/label In order to use both values in the same key and have Seleni ...

javascripthtmlcssxpath

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...

javascripthtmlcssexpress

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

The compatibility issue between Bootstrap Tab and VueJS 1.0.28 arises when integrated with Vue version 1.0.18, causing malfunctioning

I recently added a feature to my tab-switching functionality that activates tabs based on user actions and backend responses. In HTML: a.nav-link[data-toggle="tab" href="#answered" role="tab" :class="{ active: isActive('answered') }" a.nav-link ...

vue.jsbootstrap-4