lucas lucas - 3 months ago 17
HTML Question

bottom align containers items with bootstrap or css

Is there a way to bottom align all containers items of the parent div with either bootstrap or css. It looks like every single child item seats in the middle of the parent:

http://www.bootply.com/Bvp8d2s04w

Here is an image, please notice items with red and green backgrounds, I would like them to bottom align with parent container:

enter image description here

Answer

You could make the container as a flexbox (display: flex) then align all children to the bottom with align-items: flex-end:

.form-inline { display: flex; align-items: flex-end; }
.form-inline * { margin-bottom: 0; vertical-align: bottom; display: inline-block; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form novalidate="" name="categoryForm" ng-submit="vm.saveCategory()">
  <div class="form-inline" style="background-color:lightgreen;">
    <label style="display:inline;">{{ vm.category.name }}</label>
    <input type="button" value="Edit" ng-click="showEditCategory()" style="margin-left:20px" class="btn btn-sm btn-default">
    <div style="display:inline" ng-show="vm.showEditCategory">
      <input type="text" ng-model="vm.category.name" id="name" name="name" class="form-control" value="{{vm.category.name}}" required="">
      <span ng-show="categoryForm.name.$error.required" class="text-warning">Name is required</span>
      <input type="submit" value="Save" class="btn btn-sm btn-success" ng-disabled="categoryForm.$invalid">
    </div>
    <div style="display:inline" class="label label-danger" ng-show="vm.categoryErrorMessage">
      {{ vm.categoryErrorMessage }}
    </div>
    <div style="display:inline" ng-show="vm.categorySuccessMessage">
      <span class="label label-success"> {{ vm.categorySuccessMessage }}</span>
    </div>
  </div>
</form>

jsFiddle: https://jsfiddle.net/azizn/aem1sLwc/

P.S why would you need this?

Comments