HTML elements contained inside div with form-group bootstrap class, display outside the div, is this...
I came across the following online responsive form generator with Bootstrap.
https://codepen.io/erickjones/pen/GZWqRa
One thing I notice that the forms fields contained within 'form-group' div are not displayed within the div. I checked that by providing a border to the div. It would appear that this so because of the following:
<form class="">
Is this an intentional way of designing responsive forms?
css html5 twitter-bootstrap responsive-design
asked Nov 20 at 18:48
user2125853
137313
add a comment |
I came across the following online responsive form generator with Bootstrap.
https://codepen.io/erickjones/pen/GZWqRa
One thing I notice that the forms fields contained within 'form-group' div are not displayed within the div. I checked that by providing a border to the div. It would appear that this so because of the following:
<form class="">
Is this an intentional way of designing responsive forms?
css html5 twitter-bootstrap responsive-design
asked Nov 20 at 18:48
user2125853
137313
This is caused by the grid insideform-group, which is floating. You canclearfixform-groupto contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.
– wdm
Nov 20 at 18:53
Also, I would try swapping theform-groupandcol-md-6classes so the grid is wrapping the form groups.
– wdm
Nov 20 at 19:01
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put theform-groupcontainers inside the grid columns, such ascol-md-6andcol-md-12. Technically and semantically it makes the most sense here.
– wdm
Nov 20 at 20:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10
add a comment |
I came across the following online responsive form generator with Bootstrap.
https://codepen.io/erickjones/pen/GZWqRa
One thing I notice that the forms fields contained within 'form-group' div are not displayed within the div. I checked that by providing a border to the div. It would appear that this so because of the following:
<form class="">
Is this an intentional way of designing responsive forms?
css html5 twitter-bootstrap responsive-design
asked Nov 20 at 18:48
user2125853
137313
I came across the following online responsive form generator with Bootstrap.
https://codepen.io/erickjones/pen/GZWqRa
One thing I notice that the forms fields contained within 'form-group' div are not displayed within the div. I checked that by providing a border to the div. It would appear that this so because of the following:
<form class="">
Is this an intentional way of designing responsive forms?
css html5 twitter-bootstrap responsive-design
css html5 twitter-bootstrap responsive-design
asked Nov 20 at 18:48
user2125853
137313
asked Nov 20 at 18:48
user2125853
137313
asked Nov 20 at 18:48
user2125853
137313
asked Nov 20 at 18:48
user2125853
137313
asked Nov 20 at 18:48
user2125853
137313
137313
This is caused by the grid insideform-group, which is floating. You canclearfixform-groupto contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.
– wdm
Nov 20 at 18:53
Also, I would try swapping theform-groupandcol-md-6classes so the grid is wrapping the form groups.
– wdm
Nov 20 at 19:01
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put theform-groupcontainers inside the grid columns, such ascol-md-6andcol-md-12. Technically and semantically it makes the most sense here.
– wdm
Nov 20 at 20:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10
add a comment |
This is caused by the grid insideform-group, which is floating. You canclearfixform-groupto contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.
– wdm
Nov 20 at 18:53
Also, I would try swapping theform-groupandcol-md-6classes so the grid is wrapping the form groups.
– wdm
Nov 20 at 19:01
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put theform-groupcontainers inside the grid columns, such ascol-md-6andcol-md-12. Technically and semantically it makes the most sense here.
– wdm
Nov 20 at 20:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10
This is caused by the grid inside
form-group, which is floating. You can clearfix form-group to contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.– wdm
Nov 20 at 18:53
This is caused by the grid inside
form-group, which is floating. You can clearfix form-group to contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.– wdm
Nov 20 at 18:53
Also, I would try swapping the
form-group and col-md-6 classes so the grid is wrapping the form groups.– wdm
Nov 20 at 19:01
Also, I would try swapping the
form-group and col-md-6 classes so the grid is wrapping the form groups.– wdm
Nov 20 at 19:01
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put the
form-group containers inside the grid columns, such as col-md-6 and col-md-12. Technically and semantically it makes the most sense here.– wdm
Nov 20 at 20:10
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put the
form-group containers inside the grid columns, such as col-md-6 and col-md-12. Technically and semantically it makes the most sense here.– wdm
Nov 20 at 20:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10
add a comment |
active
oldest
votes
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%2f53399598%2fhtml-elements-contained-inside-div-with-form-group-bootstrap-class-display-outs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53399598%2fhtml-elements-contained-inside-div-with-form-group-bootstrap-class-display-outs%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
This is caused by the grid inside
form-group, which is floating. You canclearfixform-groupto contain the floating children getbootstrap.com/docs/4.1/utilities/clearfix -- However you may not want to here if the layout is responding as intended.– wdm
Nov 20 at 18:53
Also, I would try swapping the
form-groupandcol-md-6classes so the grid is wrapping the form groups.– wdm
Nov 20 at 19:01
The layout is responding as expected. I was just curious to see if this was intentional.
– user2125853
Nov 20 at 19:25
In this case I don't think its intentional. The examples I'm looking at in the Bootstrap docs show they are clearing floats. For your case I would put the
form-groupcontainers inside the grid columns, such ascol-md-6andcol-md-12. Technically and semantically it makes the most sense here.– wdm
Nov 20 at 20:10
Thanks, this is helpful
– user2125853
Nov 20 at 21:10