Cannot align bootstrap submit button in form?
Question
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
3 answers
solution1
3 ACCPTED 2018-02-06 14:01:57
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
solution2
0 2018-02-06 14:16:24
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) { document.getElementById("editcontact").innerHTML = ` <form class="form"> <div class="form-group"> <label for="InputName">Name</label> <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name "> </div> <div class="form-group"> <label for="InputNumber">Number</label> <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number"> </div> <div class="form-group"> <label for="InputGroup">Group</label> <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> `; } editContact(1);
.form{ padding: 0 30px; }
<!DOCTYPE html> <html> <head> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <h1>Hello Plunker!</h1> <div id="editcontact"> </div> </body> </html>
Notice, I added .form class, and adding to it. Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
solution3
-1 2018-02-06 14:02:25
wrap button inside form-group div (new ) PS try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <form> <div class="form-group"> <label for="InputName">Name</label> <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name "> </div> <div class="form-group"> <label for="InputNumber">Number</label> <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number"> </div> <div class="form-group"> <label for="InputGroup">Group</label> <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.