CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Igor Martins
Igor Martins

Reputation: 2047

How to add a text after input text

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

Upvotes: 2

Views: 17673

Answers (4)

AgilePro
AgilePro

Reputation: 5598

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.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 3

blurfus
blurfus

Reputation: 14031

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;
}

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

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/

Upvotes: 1

Related Questions