How to inline input and button inside table in Bootstrap

Question

I am trying to solve how I can get input field and a button on the same line inside a table.

This is what I want to be inline:

<tr class="no-border">
  <td colspan="2" class="hidden-xs"></td>
  <td></td>

  <td>
    <form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
      <input type="text" name="numDays" id="numDays" class="numDays">
      <button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
    </form>
  </td>

</tr>

Monkey_Dev1400 · Accepted Answer · 2017-05-30 19:58:30Z

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>what</th>
      <th>huh</th>
      <th>wait</th>
    </tr>
  </thead>
  <tbody>
    <tr class="no-border">
      <td colspan="2" class="hidden-xs"></td>
      <td></td>

      <td>
        <form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
          <div class="input-group">
            <input type="text" name="numDays" id="numDays" class="numDays form-control">
            <span class="input-group-btn">
          <button type="submit" name="button" class="btn btn-success" id="bt">Click <i class="fa fa-angle-right"></i></button>
          </span>
          </div>
        </form>
      </td>

    </tr>
  </tbody>
</table>

tech2017 · Accepted Answer · 2017-05-30 13:50:24Z

0

<tr class="no-border">
  <td colspan="2" class="hidden-xs"></td>
  <td></td>

  <td style="width:70%;">
    <form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
      <input type="text" name="numDays" id="numDays" class="numDays">
      <button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
    </form>
  </td>        
</tr>

answered May 30, 2017 at 13:50

tech2017

1,8061 gold badge13 silver badges15 bronze badges

2 Comments

perija Over a year ago

Still the same, one above the other

tech2017 Over a year ago

can you create a fiddle or link to website? there might be other factors affecting

Collectives™ on Stack Overflow

How to inline input and button inside table in Bootstrap

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related