Align items horizontally bootstrap - reactjs

Question

I have a bootstrap grid layout in my web app I want to align all on the same line. For example, when loading in full screen, the cards look as follows:
However, when the page is resized, the cards appear as follows
I need to make them look like the first image regardless of how the page is resized, jut not sure how to go about doing this.
Below is my code:
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-md-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-md-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>

Answer 1

just divide the grid in 5 by 3 manner for all views (xs, sm, md) as container total width is 8.
media queries breakpoints : grid-media-queries
example is below with the
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex col-md-8">
<div class="" style="background-color: 'white', border-radius: 5, border: '1px solid #EAE8E8'">
<div class="row">
<div class="d-flex col-xs-5 col-sm-5 col-md-5">
<div class="row" style="padding-top: 20, padding-bottom: 20, padding-left: 40">
<h4>
<b> restaurant name</b>
<div key=1><span class="badge-sm badge-secondary" style="color: 'white', background-color: '#DA9550', font-size: 9">dietaryRestriction</span> </div>
</h4>
restaurant description
<br /><br />
<span class="munchtime pointer"><i class="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>$2000</s></b> <span class="discount"><b>20%</b></span>
</div>
</div>
<div class="d-flex col-xs-3 col-sm-3 col-md-3">
<img src='https://picsum.photos/200/300
' style="width: '100%', height: 250, objectFit: 'cover'" />
</div>
</div>
</div>
</div>

Answer 2

In your code, you are using col-md-8 which will work from min-width of 992px. you can replace md with xs, so that it will work for all resolutions.

Answer 3

<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-xs-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-xs-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
You should only have to adjust the "col" className so that it is always 8 and 4 on any breakpoint.