Aligning elements in html using bootstrap classes - html

Question

I have the following code
html page(part of it)
<div class="container">
<div class="right-page col-md-9">
<div class="row">
<div class="category-item col-md-4">
<form action="/settings/category/2/" method="post" class="form-inline">
<div class="container">
<div class="row input-container">
<div class="form-group">
<div class="col-md-8">
<input class="form-control input-sm col-md-3" type="text" value="KONS ">
</div>
<div class="col-md-3">
<input class="form-control input-sm col-md-3 myColorPicker">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row btn-container">
<button class="btn btn-default btn-sm edit-category">Cancel</button>
<button name="delete" class="btn btn-default btn-sm">Delete</button><input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">
</div>
</div>
</form>
</div>
</div>
</div>
and the css (part of it)
.diagnosis-phrase,
.treatment-phrase,
.category-item{
padding-bottom: 1em;
padding-top: 0.5em;
border: 1px solid black;
margin-bottom: 0.5em;
}
.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
margin-bottom:0.5em;
}
.category-item p{
padding-left: 0.5em;
padding-bottom:0.3em;
border-radius:0.5em;
width:50%;
}
The bootply for it. The part of html is the right column of a two column webpage. As you can see inside the div with black border I have two input boxes(For some reason the second appears outside the div with borders but in my working code appears correctly. Maybe because of me providing part of page.). My problem is that the first one is not aligned with the Cancel button. How can I do that using bootstrap classes?

Answer 1

if you use the following styles
.form-group .col-md-8:first-child {padding-left:0;}
It should fix your problem
Or if you just change the col-md-8 class on your div to col-md-pull-8 it should also achieve the same thing