lucas lucas - 1 year ago 61
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:

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 Source

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="" rel="stylesheet"/>
<form novalidate="" name="categoryForm" ng-submit="vm.saveCategory()">
  <div class="form-inline" style="background-color:lightgreen;">
    <label style="display:inline;">{{ }}</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="" id="name" name="name" class="form-control" value="{{}}" required="">
      <span ng-show="$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 style="display:inline" class="label label-danger" ng-show="vm.categoryErrorMessage">
      {{ vm.categoryErrorMessage }}
    <div style="display:inline" ng-show="vm.categorySuccessMessage">
      <span class="label label-success"> {{ vm.categorySuccessMessage }}</span>


P.S why would you need this?