CODEWITHSUNDEEP
twitter-bootstrap
Daria Yemelianova
Daria Yemelianova

Reputation: 29

Bootstrap glyphicon between two inputs

I am using bootstrap3 griding system. I have two following input fields and I would like to put glyphicon between them. Unfortunately it doesn't work when I allocate entire column for glyphicon itself. Gap between controls are too big.

Could you please help me to add glyphicon between flyFrom and flyTo input fields. Thanks for any help!

HTML: 

            <div class="row">
                    <div class="col-md-2">
                            <input type="text" class="form-control input-md" id="flyFrom" placeholder="Country, city or airport">
                    </div>

                    <div class="col-md-1">
                        <span class="glyphicon glyphicon-resize-horizontal"></span>
                    </div>

                    <div class="col-md-3">
                        <input type="text" class="form-control input-md" id="flyTo" placeholder="Country, city or airport">
                    </div>

                    <div class="col-md-2">
                        <div class='input-group date' id='datetimepicker6'>
                            <input type='text' id="depart-date" class="form-control" />
                             <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                             </span>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class='input-group date' id='datetimepicker7'>
                            <input type='text' id="return-date" class="form-control" />
                             <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                             </span>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class='btn-group'>
                            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">1 Adult<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Adults 12+ years</a></li>
                                <li><a href="#">Children under 12</a></li>
                                <li><a href="#">Children under 2</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <button type='button' class="btn btn-info">Search</button>
                    </div>
                </div>
            </div>

Fiddle:

https://jsfiddle.net/z4b2bwg6/8/

Upvotes: 1

Views: 679

Answers (3)

Franco
Franco

Reputation: 2329

Sorry I did not understand you question in first place!! My Bad!

In this example the icon should be between the two inputs:

<div class="input-group input-large">
        <input class="form-control" type="text" name="from">
        <span class="input-group-addon"> <i class="fa fa-calendar"></i>  </span>
        <input class="form-control" type="text" name="to">
    </div>

I hope this will help you.

See also this fiddle: http://jsfiddle.net/0rssd727/1/

Upvotes: 2

Franco
Franco

Reputation: 2329

You can put an inline icon in the first input control like this:

<div class="input-group ">
     <input type='text' id="return-date" class="form-control input-md" >
         <span class="input-group-addon">
             <i class="fa fa-calendar"></i>
         </span>

Upvotes: 0

Ben Hutchings
Ben Hutchings

Reputation: 1

<div class="col-md-1">
    <i class="glyphicon glyphicon-resize-horizontal"></i> 
</div>

Try this?

Upvotes: 0

Related Questions