CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Aiguo
Aiguo

Reputation: 3566

CSS: move button to left

Here is my current UI:

[![enter image description here][1]][1]

I would like to move the red button shown in the picture to the left side of the input. So far I've tried adding a margin-left property but that did not work. Does anyone have a suggestion on how to get the button to move to the left? I'd like to have it aligned with the bottom input field.

Upvotes: 1

Views: 24643

Answers (4)

Aiguo
Aiguo

Reputation: 3566

The solution was easier than I thought, instead of adding margin-left I added margin-right: 20px and it worked.

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24472

Try this 

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

Upvotes: 0

F&#233;lix Bachand
F&#233;lix Bachand

Reputation: 179

Put 

style="position:absolute"

to your button, you will be able to move with Left after that.

Upvotes: 2

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

Bootstrap 3 has a control called a Input Group. You can use it like this:

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>
    <input type="text" class="form-control">
</div>

Note: To move the button to the left or right, simply move the <input> above or below the <div class="input-group-btn">

Upvotes: 1

Related Questions