CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tristan12
Tristan12

Reputation: 35

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>

Upvotes: 0

Views: 623

Answers (3)

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Just try this css:

#inputsm{
      display: inline;
      width: 50%;
}

You can provide the width of input as you want..

FIDDLE

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

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/

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

Try bootstrap addon

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div>

Upvotes: 1

Related Questions