How to add a text after input text

Question

I want to add "month" after the input in bootstrap, in the side of it. I've tried span, pull-left nothing worked. Months is always below

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>

JSFIDDLE

You would need to wrap 'month` with a tag in order to manipulate it. — Josh Crozier, Mar 07 '14 at 01:32
Related: [How to add text before input element using JavaScript?](https://stackoverflow.com/questions/62557615/how-to-add-text-before-input-element-using-javascript), [How to put text in front of the input form?](https://stackoverflow.com/questions/58781178/how-to-put-text-in-front-of-the-input-form) and [CSS content generation before or after 'input' elements](https://stackoverflow.com/questions/4574912/css-content-generation-before-or-after-input-elements). — joeljpa, Apr 21 '23 at 10:36

score 3 · Accepted Answer · answered Mar 07 '14 at 02:09

Just add form-inline to your form..

<form role="form" class="form-inline">
    <div class="form-group">
        <label for="exampleInputEmail1">Months</label>
        <input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
    </div>
</form>

Demo: http://www.bootply.com/119625

Kevin Bowersox · Answer 2 · 2014-03-07T01:44:42.953

1

Try wrapping the elements and specifying the column widths:

HTML

 <form role="form">
  <div class="form-group">
     <div class="pull-left col-xs-9">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
     </div>
    <span class="col-xs-3">months<span>
  </div>
</form>

CSS

span{
    margin-top: 25px;
}

JS Fiddle: http://jsfiddle.net/7rYp7/2/

edited Mar 07 '14 at 01:44

answered Mar 07 '14 at 01:33

Kevin Bowersox

93,289
19
159
189

1

doesn't work. The "label" has moved for the left of input. This is above of it – Igor Martins Mar 07 '14 at 01:41

score 1 · Answer 3 · answered Jun 12 '18 at 05:52

1

putting style="display:inline" into the actual input element in question has worked for me.

Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.

answered Jun 12 '18 at 05:52

AgilePro

5,588
4
33
56

I can confirm this works. When using Bootstrap, you can use the class ```.d-inline``` – Natrium Nov 14 '22 at 14:42

blurfus · Answer 4 · 2014-03-07T02:05:48.267

0

You can set the following in your CSS (overwriting the bootstrap.css)

.form-group input {
    display:inline;
    width: 50%;
    margin: 5px;
}

You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:

#exampleInputEmail1{
        display:inline;
        width: 50%;
        margin: 5px;
}

.form-group label {
    display: block;
}

edited Mar 07 '14 at 02:05

answered Mar 07 '14 at 01:35

blurfus

13,485
8
55
61

I see, you want the label to stay on top of the input and the 'month' still next to the input. Did I understand it right? – blurfus Mar 07 '14 at 01:57
ok, you can use Kevin's method or the code in the updated fiddle http://jsfiddle.net/blurfus/7rYp7/4/ – blurfus Mar 07 '14 at 02:04

How to add a text after input text

4 Answers4