CODEWITHSUNDEEP
twitter-bootstrap
BlackHoleGalaxy
BlackHoleGalaxy

Reputation: 9662

Bootstrap button inside an input group appears detached from input

Problem description

I got a simple code where I want to display two buttons on the right of an input. But the button appears "detached" from the input. I don't want to play with negative margin.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-4">
  <div class="input-group">
    <input type="text" class="form-control" />
    <span class="input-group-btn">                                            
      <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
      <button type="button" class="btn btn-default"><i class="fa fa-history"></i></button>
    </span>
  </div>
</div>

Here is the result

enter image description here

Attempted solution

I tried to put the input inside the span.input-group-btn. It then make the buttons stick to the input, but I loose the benefit of input auto sizing, and at mobile resolution, I get something like:

enter image description here

Upvotes: 0

Views: 1654

Answers (2)

Roeh-like Joey
Roeh-like Joey

Reputation: 1

This is quite old but I just ran into this issue and wanted to post in the case someone comes here first rather than heading to https://getbootstrap.com/docs/4.0/components/input-group/

    <div class="input-group mb-3">
      <div class="input-group-prepend">
       <span class="input-group-text" id="basic- 
            addon1">@</span>
      </div>
        <input type="text" class="form-control" 
          placeholder="Username" aria- 
          label="Username" aria- 
          describedby="basic- 
          addon1">
     </div>

Upvotes: 0

neophyte
neophyte

Reputation: 6626

Although when I ran your code it was working fine for me. But I am including another templete for you. This is the way I do it.

working example 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          </head>
          <body>
          <div class="col-md-4">
 <div class="form-group">
       <div class="input-group">
        <input type="text" class="form-control" style="height: 54px;"/>
        <span class='input-group-addon'>
    <button type="button" class="btn btn-default"><i class="fa fa-calendar" style="font-size:16px;"></i></button>
            <button type="button" class="btn btn-default"><i class="fa fa-history" style="font-size:16px;"></i></button>
</span>
        </div>
        </div>
        </div>
  </body>
  </html>

Upvotes: 1

Related Questions