Properly aligning neighboring button in Bootstrap form
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have a search form in my app which uses Bootstrap. It is a vertical form meaning the labels are above the input controls. In my example, I have two inputs and then a "Search" button. The goal is to have the button align vertically with the inputs.
Here is some markup to start (with Plunker - make sure you widen the demo pane enough):
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
As expected, since the contents of the third column which contains the button does not include a <label> (or .form-group element for that matter), the button will be aligned with the labels in the first two columns at the top.
One obvious solution would be to make the markup for the button column match the other two, like this:
<div class="col-sm-4">
<div class="form-group">
<label> </label>
<div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Requiring all this additional markup is nasty, though.
Is there a better way to accomplish this goal?
html css twitter-bootstrap
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
add a comment |
1
I have a search form in my app which uses Bootstrap. It is a vertical form meaning the labels are above the input controls. In my example, I have two inputs and then a "Search" button. The goal is to have the button align vertically with the inputs.
Here is some markup to start (with Plunker - make sure you widen the demo pane enough):
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
As expected, since the contents of the third column which contains the button does not include a <label> (or .form-group element for that matter), the button will be aligned with the labels in the first two columns at the top.
One obvious solution would be to make the markup for the button column match the other two, like this:
<div class="col-sm-4">
<div class="form-group">
<label> </label>
<div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Requiring all this additional markup is nasty, though.
Is there a better way to accomplish this goal?
html css twitter-bootstrap
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55
add a comment |
1
1
1
I have a search form in my app which uses Bootstrap. It is a vertical form meaning the labels are above the input controls. In my example, I have two inputs and then a "Search" button. The goal is to have the button align vertically with the inputs.
Here is some markup to start (with Plunker - make sure you widen the demo pane enough):
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
As expected, since the contents of the third column which contains the button does not include a <label> (or .form-group element for that matter), the button will be aligned with the labels in the first two columns at the top.
One obvious solution would be to make the markup for the button column match the other two, like this:
<div class="col-sm-4">
<div class="form-group">
<label> </label>
<div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Requiring all this additional markup is nasty, though.
Is there a better way to accomplish this goal?
html css twitter-bootstrap
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
I have a search form in my app which uses Bootstrap. It is a vertical form meaning the labels are above the input controls. In my example, I have two inputs and then a "Search" button. The goal is to have the button align vertically with the inputs.
Here is some markup to start (with Plunker - make sure you widen the demo pane enough):
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
As expected, since the contents of the third column which contains the button does not include a <label> (or .form-group element for that matter), the button will be aligned with the labels in the first two columns at the top.
One obvious solution would be to make the markup for the button column match the other two, like this:
<div class="col-sm-4">
<div class="form-group">
<label> </label>
<div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Requiring all this additional markup is nasty, though.
Is there a better way to accomplish this goal?
html css twitter-bootstrap
html css twitter-bootstrap
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
asked Jan 4 at 2:49
im1dermikeim1dermike
1,75853679
1,75853679
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55
add a comment |
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55
add a comment |
3 Answers
3
active
oldest
votes
1
You can set a class for that button div and add CSS to it like this
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>Here is the live demo
Hope it helps :)
answered Jan 4 at 3:02
ThinkerThinker
2,254625
add a comment |
1
You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end
One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
add a comment |
1
The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
FULL EXAMPLE:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>answered Jan 4 at 3:11
ShiderszShidersz
10k2933
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%2f54032543%2fproperly-aligning-neighboring-button-in-bootstrap-form%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
You can set a class for that button div and add CSS to it like this
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>Here is the live demo
Hope it helps :)
answered Jan 4 at 3:02
ThinkerThinker
2,254625
add a comment |
1
You can set a class for that button div and add CSS to it like this
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>Here is the live demo
Hope it helps :)
answered Jan 4 at 3:02
ThinkerThinker
2,254625
add a comment |
1
1
1
You can set a class for that button div and add CSS to it like this
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>Here is the live demo
Hope it helps :)
answered Jan 4 at 3:02
ThinkerThinker
2,254625
You can set a class for that button div and add CSS to it like this
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>Here is the live demo
Hope it helps :)
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>answered Jan 4 at 3:02
ThinkerThinker
2,254625
answered Jan 4 at 3:02
ThinkerThinker
2,254625
answered Jan 4 at 3:02
ThinkerThinker
2,254625
answered Jan 4 at 3:02
ThinkerThinker
2,254625
2,254625
add a comment |
add a comment |
1
You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end
One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
add a comment |
1
You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end
One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
add a comment |
1
1
1
You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end
One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end
One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
answered Jan 4 at 3:03
Carl BinallaCarl Binalla
4,24942040
4,24942040
add a comment |
add a comment |
1
The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
FULL EXAMPLE:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>answered Jan 4 at 3:11
ShiderszShidersz
10k2933
add a comment |
1
The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
FULL EXAMPLE:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>answered Jan 4 at 3:11
ShiderszShidersz
10k2933
add a comment |
1
1
1
The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
FULL EXAMPLE:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>answered Jan 4 at 3:11
ShiderszShidersz
10k2933
The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
FULL EXAMPLE:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>answered Jan 4 at 3:11
ShiderszShidersz
10k2933
answered Jan 4 at 3:11
ShiderszShidersz
10k2933
answered Jan 4 at 3:11
ShiderszShidersz
10k2933
answered Jan 4 at 3:11
ShiderszShidersz
10k2933
10k2933
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%2f54032543%2fproperly-aligning-neighboring-button-in-bootstrap-form%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
What version of Bootstrap are you using?
– Shidersz
Jan 4 at 2:55