Tristan12 Tristan12 - 3 months ago 27
CSS Question

Horizontal align with two bootstrap elements

I want to align two elements. Is there a way to to this with help of bootstrap? It works if i float the elements and make the input element's width smaller. But that's not the solution i want to use. Is there a responsive, bootstrap way to do this?

Fiddle with the two elements i wanna align next to each-other (button and input).

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<button type="button" class="btn btn-default btn-sm adminButton">
<span class="table-add glyphicon glyphicon-plus"></span> Add columns
</button>
<input class="form-control input-sm" id="inputsm" type="text">

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

Answer

add modal-body & row & col- class

<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
      <div class="modal-body">
    <div class="row">
    <div class="col-sm-3">

    <button type="button" class="btn btn-default btn-sm adminButton"><span class="table-add glyphicon glyphicon-plus"></span> Add columns</button>

    </div>



    <div class="col-sm-8">

        <input class="form-control input-sm" id="inputsm" type="text">

    </div>
     </div>
        </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>    

https://jsfiddle.net/e0cr1nL2/107/