Bootstrap 3 form - 2 boxes

Question

I don't know how to explain this with word so I'll let you with a screenshot. I want to achieve that for the bottles number.

What I want to achieve

What I have right now

Here is my current code, basic form :

<table class="table" id="tab_logic">
            <thead>
            <tr>
                <th class="text-left">
                    Nom du vin
                </th>
                <th class="text-left">
                    Millésime
                </th>
                <th class="text-left">
                    Quantité
                </th>
                <th class="text-left">
                    Condionnement
                </th>
            </tr>
            </thead>
            <tbody>
            <tr id='addr0'>
                <td>
                    <input type="text" name='name0' placeholder='Nom du vin' class="form-control"/>
                </td>
                <td>
                    <select class="form-control">
                        <option>Rouge</option>
                        <option>Rosé</option>
                        <option>Blanc</option>
                    </select>
                </td>
                <td>
                    <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
                </td>
                <td>
                    <input type="text" name='mobile0' placeholder='OK' class="form-control"/>
                </td>
            </tr>
            <tr id='addr1'></tr>
            </tbody>

Thanks !

Answer 1

You need to use DIV input-group with :

• an input
• a span

Like this :

<div class="input-group">
  <input type="text" class="form-control" placeholder="Quantités" aria-describedby="bottle">
  <span class="input-group-addon" id="bottle">Bouteilles</span>
</div>