Mixing
Align items horizontally bootstrap
0
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>
reactjs twitter-bootstrap
asked Jan 2 at 6:57
ViperViper
6171620
add a comment |
0
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>
reactjs twitter-bootstrap
asked Jan 2 at 6:57
ViperViper
6171620
add a comment |
0
0
0
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>
reactjs twitter-bootstrap
asked Jan 2 at 6:57
ViperViper
6171620
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>
reactjs twitter-bootstrap
reactjs twitter-bootstrap
asked Jan 2 at 6:57
ViperViper
6171620
asked Jan 2 at 6:57
ViperViper
6171620
asked Jan 2 at 6:57
ViperViper
6171620
asked Jan 2 at 6:57
ViperViper
6171620
asked Jan 2 at 6:57
ViperViper
6171620
6171620
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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>answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
add a comment |
1
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.
answered Jan 2 at 7:04
AnjiAnji
17912
add a comment |
1
<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.
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002411%2falign-items-horizontally-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
add a comment |
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>answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
add a comment |
1
1
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>answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
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><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><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>answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
answered Jan 2 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,4263921
1,4263921
add a comment |
add a comment |
1
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.
answered Jan 2 at 7:04
AnjiAnji
17912
add a comment |
1
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.
answered Jan 2 at 7:04
AnjiAnji
17912
add a comment |
1
1
1
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.
answered Jan 2 at 7:04
AnjiAnji
17912
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.
answered Jan 2 at 7:04
AnjiAnji
17912
answered Jan 2 at 7:04
AnjiAnji
17912
answered Jan 2 at 7:04
AnjiAnji
17912
answered Jan 2 at 7:04
AnjiAnji
17912
17912
add a comment |
add a comment |
1
<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.
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
add a comment |
1
<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.
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
add a comment |
1
1
1
<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.
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
<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.
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
answered Jan 2 at 7:07
yourfavoritedevyourfavoritedev
41118
41118
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002411%2falign-items-horizontally-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
