CODEWITHSUNDEEP
csstwitter-bootstrapbutton
ntakouris
ntakouris

Reputation: 958

How to add button at side of input text form with bootstrap

I've got this piece of code:

        <h2>Workout Selector</h1>
        <div class="form-group">
            <label for="workout-name">Search by Keywords (Comma Separated):</label>
            <input type="text" class="form-control" id="workout-keywords">
        </div>

Which produces this: enter image description here

But I want to add a button in the place of this red box:enter image description here

(What do I need to do?)

Edit: It should not be the submit button

Upvotes: 0

Views: 482

Answers (4)

Nineoclick
Nineoclick

Reputation: 814

I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
  <div class="form-group">
    <label class="sr-only" for="test">input here something</label>
    <div class="input-group" style="display:flex;">
      <input type="text" class="form-control" id="test" placeholder="input here something">
        <button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
    </div>
  </div>
</form>

Hope this helps.

Upvotes: 0

Roumelis George
Roumelis George

Reputation: 6746

You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this: 

<h1>Workout Selector</h1>
<div class="form-group">
   <label for="workout-name">Search by Keywords (Comma Separated):</label>
   <input type="text" class="form-control" id="workout-keywords">
    <button type="submit">Submit</button>
 </div>

.form-group {
  position: relative;
  padding: 0;
  input {
    padding-right: 60px;
    height: 25px;
    line-height: 25px;
    width: 100%;
  }
  button {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    line-height: 25px;
    text-align: center;
    z-index: 300;
  }
}

Upvotes: 0

Prince Sodhi
Prince Sodhi

Reputation: 2955

try this code and style color it as you want. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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-secondary" type="button">Go!</button>
  </span>
</div>
</div>

ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons

Upvotes: 1

john Smith
john Smith

Reputation: 17926

i guess you can work with cols, sth like: 

    <div class="form-group">
        <div class="col-md-12">
          <label for="workout-name">Search by Keywords (Comma Separated):</label>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control" id="workout-keywords">
        </div>
        <div class="col-md 4">
          <span class="btn btn-default">Button</span>
        </div>
    </div>

Upvotes: 1

Related Questions