Order different div with Bootstrap
I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[![none[1]](https://i.stack.imgur.com/Rpzy9.png)
html css bootstrap-4
edited Nov 22 at 21:31
Temani Afif
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
add a comment |
I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[
html css bootstrap-4
edited Nov 22 at 21:31
Temani Afif
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00
add a comment |
I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[
html css bootstrap-4
edited Nov 22 at 21:31
Temani Afif
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[
html css bootstrap-4
html css bootstrap-4
edited Nov 22 at 21:31
Temani Afif
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
edited Nov 22 at 21:31
Temani Afif
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
edited Nov 22 at 21:31
Temani Afif
64.1k93675
edited Nov 22 at 21:31
Temani Afif
64.1k93675
edited Nov 22 at 21:31
Temani Afif
64.1k93675
64.1k93675
asked Nov 22 at 21:18
Korpin
6710
asked Nov 22 at 21:18
Korpin
6710
asked Nov 22 at 21:18
Korpin
6710
6710
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00
add a comment |
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00
add a comment |
1 Answer
1
active
oldest
votes
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
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
});
}
});
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%2f53438084%2forder-different-div-with-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
add a comment |
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
add a comment |
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
answered Nov 22 at 22:59
Gurtej Singh
2,5761624
2,5761624
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53438084%2forder-different-div-with-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
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 at 23:00