D-flex is known to disrupt the Bootstrap grid system

For my dashboard, I utilized reactJs along with react bootstrap to create a visually appealing layout. However, the varying sizes of the cards on the dashboard has resulted in gaps. Here's a snapshot of the issue:

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

To address this gap, I referred to the bootstrap flex documentation and decided to apply d-flex align-items-stretch. This is how I implemented it:

      <Row>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
            <FrequentUsers />
        </Col>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
            //Other content
        </Col>
      </Row>

By placing the d-flex align-items-stretch on the <Col> tag, I was able to resolve the issue in my case. Applying it to the <Row> tag or an external <div> container did not yield the desired result.

The outcome met my expectations in terms of y-axis stretch, but unexpectedly caused x-axis shrinkage:

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

To counter this, I adjusted my grid layout to expand horizontally. Although the grid system continued to function properly, it failed to impact the card size, suggesting that the grid system may be "broken" at this point.

I suspect this behavior may be attributed to the d-flex property. Despite referencing the documentation, which indicates full extension of content sides, the actual outcome differs. Please review the details in the documentation here.

javascriptbootstrap-4flexboxreact-bootstrap

Answer №1

After taking into consideration @ChewySalmon's feedback, I made adjustments to the flex-basis property on my card element. The reason for making this adjustment directly on the card itself is because, as demonstrated in a code sample provided in my initial question, I had stretched my item within a <Col> tag which caused vertical stretching (as indicated in the screenshot above). To address this issue, it was necessary to modify the flex-basis property on the card element (the only solution that proved effective in my case) in order to achieve horizontal stretching. This modification worked perfectly. Below is the implementation code:

<Card style={{flexBasis: "100em"}}> 
    //my content
<Card>

I opted for using 100em as it was one of the few values, along with 100px, that produced the desired result. Although I hard coded this value across all cards due to uniformity, I recommend utilizing props in JSX attributes where possible. Hopefully, this solution will prove useful to others encountering a similar issue in the future. Many thanks to @ChewySalmon for the assistance.

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

Updating Sailsjs Localization Settings

After working with Sails.js for a while, I am interested in finding out if it is possible to manually adjust the localization from the controllers based on the URL. For example, accessing http://example.com/en would display the English version, while http ...

javascriptnode.jslocalizationsails.js

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

I am currently working on developing a Node.js application to manage a small drone. The SDK provides the following instructions: To establish a connection between the Tello and a PC, Mac, or mobile device, use Wi-Fi. Sending Commands & Receiving Responses ...

javascriptnode.jstypescriptudpdji-sdk

JavaScript's RegEx fails to match even when it is expected to

I am in the process of developing a node.js script to organize a large number of screenshots. I have identified two distinct patterns that I need to identify: /(?<date>\d{4}-\d{2}-\d{2}) (?<time>\d{2}_\d{2}_\d{2 ...

javascriptnode.jsregex

Using Angular.js to Implement Filtering with Intervals

I have implemented a unique custom angular.js filter for formatting datetime objects: function relativeTimeFilter() { return function (dateObj) { return getRelativeDateTimeString(dateObj); }; } function getRelativeDateTimeString(dt) { ...

javascriptangularjstimesetinterval

Is it true that IE does not support passing callback parameters to setTimeout()?

When I used the js setTimeout function in my code, it worked perfectly in Firefox by reloading within seconds. However, the same code did not work in IE. I tried changing the method to 'POST', but received an error stating that the request was no ...

javascriptajaxinternet-explorer

Analyze the JSON data retrieved from the API endpoint to determine any

I am currently attempting to utilize axios to send an API request in order to validate login credentials, but I am facing difficulties retrieving the result from the API. The MongoDB .find function successfully locates the correct row, however, I am encoun ...

javascriptreactjsapi

Having difficulty reaching a div element using either its id or class in a CSS stylesheet

I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated. Below is the CSS code: body { margin: 0 ; font ...

htmlcssbootstrap-4

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)

Currently, I am engaged in a personal project that involves using React and Express. The task at hand is to retrieve data spanning 7 days for a specific item from my database and present it in a search list. To achieve this, I attempted the following: U ...

javascriptmysqlnode.jsreactjsexpress

Transferring information to PHP script using only JavaScript (Ajax)

I have a good understanding of jQuery: $.ajax({ method: 'POST', url: 'send-data-to.php', data: {data:"data"} }) However, I am unsure of how to send data that is accessible via $_POST using pure JavaScript. The reason for my inqu ...

javascriptphpajax

Steps for dynamically changing the class of a dropdown when an option is selected:

Check out this code snippet : <select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)"> <option class="dd-select" value="SELECT">SELECT</option> <option class="dd-ok" value= ...

javascriptjqueryhtml

Is it necessary to execute Commit and Begintransaction in SELECT queries?

I'm an MySQL beginner. Should we use commit or beginTransaction in SELECT statements? Let's say the query looks like this db.query("SELECT * FROM my_table") In this scenario, do we need to use commit or beginTransaction? db.query(&quo ...

javascriptmysqlnode.js

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

I am encountering an issue while using react and chart.js together to create a bar chart. The problem lies in the fact that chart.js requires the use of canvas tags, and we need to locate this tag and insert the bar chart within it using the traditional do ...

javascriptjqueryreactjschart.js

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

javascriptcssangularcss-animationsangular-animations

Extracting information from a webpage by using Javascript to locate and interact

Seeking a way to retrieve the src attribute from an audio tag dynamically inserted into the DOM by third-party JavaScript without the ability to modify it. The goal is to back up these sounds by capturing their sources on the server side across multiple pa ...

javascriptnode.jsscreen-scrapingphantomjsjsdom

Locate a specific item within an array using TypeScript

Looking for a more efficient solution to retrieve data from a collection in Typescript. The data is structured as follows: myData: { Id: string, Name: string, Address: string Salary: number phone: number } We have approximately 500 records, eac ...

javascripttypescriptforeach

Tips for transferring an id from an HTML form to Node.js and MySQL

Below is the HTML form that allows input of a client ID via a dropdown menu. The selected client ID from the dropdown will be passed through the form: <form action="/query" method="get"> <select name="client_id" required=""> ...

javascripthtmlnode.js

Best Placement for Socket.io Server in WebStorm Express Template

Trying to integrate socket.io into an express server generated by WebStorm. Should the setup of the server and socket.on events all be placed inside /bin/www, or is it better practice to create separate controllers like index and users pages? https://i.ss ...

javascriptnode.jsexpresssocket.iowebstorm

Transform data from API arrays into a remapped object with updated keys and structure

I received the following output from my return object: { data: [ { ts: "20-10-26", events: 1500, }, { ts: "20-10-27", events: 1280, }, { ts: "20-10-28", events: 1111, } ] } T ...

javascriptarraysreactjsobject

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

javascriptjqueryajaxhtmlgoogle-chrome-extension

Guide on aligning text beneath and to the side of an image, and positioning them in the same row using CSS Bootstrap 4

I am looking to organize two different texts alongside and under an image within a single article. I also want these two articles to be displayed in the same row when the window size is col-md or larger. https://i.sstatic.net/ZjigH.jpg The second article ...

cssbootstrap-4