Creating uniform width children with Bootstrap's flexbox

Within my flex box container, the children are all displayed in a flex-row. I'm utilizing bootstrap to try and make sure that all the children have the same width and height.

HTML

<div class="d-flex flex-row flex-grow">
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book-heart fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Procedures.aspx">Procedures</a></p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white">​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/KB/Forms/Quick%20Reference%20Guides.aspx">Quick Reference Guides</a> </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="http://helpdesk:8080/Templates.do?module=mergedRequest&amp;serviceId=3002">Stan​dardized
                Forms</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-user fa-2x color-white">​​​​​​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Member%20Forms.aspx">Member Forms</a>​​​​​​​​​ </p>
    </div>
</div>
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-link fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/Lists/Links/AllItems.aspx">Canvas Links</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/RatesFees/Forms/Rates%20and%20Fees.aspx">Deposit and Loan
                Rates</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">&#160;<a href="/compass/Policies/Forms/Policies.aspx">Policies</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-download fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3"><a href="/compass/#ByTopicAnchor">More</a>​​</p>
    </div>
</div>

Here you can see how the deposit and loan rates box appears wider than the more box:

https://i.sstatic.net/24t4v.png

htmlcssbootstrap-4flexbox

Answer №1

Include this style for every child element: 

 flex: 1 1 0;

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

Div sliding out of view

I'm encountering a slight issue with this template: essentially, my goal is to implement a feature where clicking on a box will expand it while simultaneously sliding the other boxes off-screen. However, instead of just sliding the div off-screen, it ...

javascriptjqueryhtmlcss

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

javascripthtmlcss

Utilizing a jQuery variable within an .html() method

Can a Jquery if statement be used to display different content inside a div based on a variable? For example, if the variable is set to "cats", the displayed content might say "I like cats", and if it changes to "dogs", it would read "I like dogs". Is this ...

javascriptjqueryhtml

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

htmlcssreactjssassless

Having difficulty utilizing the square bracket [ in Angular, despite it being a common feature in standard HTML

Yesterday, while working on my Angular code, I encountered an issue using the rbrack and lbrack. It turns out that Angular throws an error when these are used. Snippet of the code: &lt;gen-pack-comp &lbrack;email&rbrack;="email"" ...

htmlnode.jsangularangular-cli

Tips for retaining user input in an input box using HTML and AngularJS

Is there a way to retain a user's input in an input box? This is the current code snippet: <input type="text" ng-model="userText" placeholder="Enter text here"> However, I am looking for a solution that will allow the entered text to persist ...

javascripthtmlangularjs

Loading screen preceding page change

I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes ...

javascriptjqueryhtmlcss

Send form data using two PHP pages

Initially, I used $_post to collect data from a Submit form and it worked perfectly. However, I now want users to be able to see their input before submitting to ensure its accuracy. Once the user reviews their input on the screen and clicks submit, the d ...

phphtmlformsparsing

Every time I attempt to utilize pdf.js, I encounter a Cross-Origin Request block

When attempting to read a local PDF file using pdf.js, I included the following script tag: <script src="https://cdn.jsdelivr.net/npm/pdfjs/build/pdf.min.js"> </script> To check if it was working, I added a simple console.log: ...

htmlpdf.js

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped

What is the method of obtaining the file name of the current template within a Jinja2 template?

If I have a code snippet like return render_template('index.html', users=users), is there a way to access the filename within the template without having to pass it explicitly from the view? ...

pythonhtmljinja2

The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...

htmlcsstwitter-bootstrap

Hiding a div using swipe gestures in Angular

What am I trying to achieve? I aim to hide a div when swiped right. This specific action will close the pop-up that appears after clicking a button. What tools are at my disposal? I am utilizing Ionic framework for this task. Within my app.js, I have i ...

javascriptcssangularjsionic-framework

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

pythonhtmlseleniumhref

What is the best way to showcase the following values using Vue.js?

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For mor ...

javascriptphphtmlvue.js

Refresh React component after form submissionIn this guide, learn how to automatically refresh a

Every time I submit the page, it keeps loading indefinitely and I have to manually refresh the page to see the input in my table. The table.js and submit.js are located in two different components. Is there a way to automatically refresh the page after sub ...

htmlreactjs

Tips for concealing non-selected categories in the product tree when a single category is chosen

When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...

jquerycssasp.net-mvcjquery-uijquery-plugins

What is the best way to align inline-block elements in the center?

I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. ...

htmlcss