Order different div with Bootstrap
0
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 '18 at 21:31
Temani Afif
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
add a comment |
0
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 '18 at 21:31
Temani Afif
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 '18 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00
add a comment |
0
0
0
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 '18 at 21:31
Temani Afif
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
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 '18 at 21:31
Temani Afif
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
edited Nov 22 '18 at 21:31
Temani Afif
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
edited Nov 22 '18 at 21:31
Temani Afif
71.4k93979
edited Nov 22 '18 at 21:31
Temani Afif
71.4k93979
edited Nov 22 '18 at 21:31
Temani Afif
71.4k93979
71.4k93979
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
asked Nov 22 '18 at 21:18
KorpinKorpin
7610
7610
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 '18 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00
add a comment |
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 '18 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 '18 at 22:43
is this what you are looking for: jsfiddle.net/omxahu46
– Gurtej Singh
Nov 22 '18 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00
add a comment |
1 Answer
1
active
oldest
votes
0
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 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
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%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
0
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 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
add a comment |
0
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 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
add a comment |
0
0
0
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 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
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 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
answered Nov 22 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
answered Nov 22 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
answered Nov 22 '18 at 22:59
Gurtej SinghGurtej Singh
2,6161624
2,6161624
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%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 '18 at 22:43
Yep almost! Thx dude, with your code i managed to do it exactly how i wanted to!
– Korpin
Nov 22 '18 at 22:48
Thanks, I have posted it as an answer.
– Gurtej Singh
Nov 22 '18 at 23:00