Inline form using Bootstrap

Question

I am using Bootstrap for my application and have faced a problem using inline forms. I have attached a screenshot displaying the current form.

I want the Sanctd. Amount textbox to have that same width as other text boxes and the text "(Entry should be in Lakhs)" come after that. My current code is as follows:-

<div class="form-group">
      <label class="col-md-3 control-label">Sanctd. Amount</label>
      <div class="form-inline">
       <div class="form-group">
        <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
        <?php echo form_input($sanctioned_amount); ?>     
        </div>
        </div>                      
        (Entry should be in Lakhs)          
        </div>
    </div>

I am using Bootstrap v3.3.6. Thanks for your guidance.

Answer 1

Done little modification in your code.

Working example at CODEPEN

  <div class="form-group">
        <label class="col-sm-3 control-label">Sanctd. Amount</label>

          <div class="custom">
            <div class="input-group col-sm-6">
              <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
              <input type="text" name="sanctioned_amount" value="" id="sanctioned_amount" class="form-control" />
            </div>
            <span  class="help-text">(Entry should be in Lakhs)</span>
          </div>

      </div>

CSS:

/*Custom  CSS*/
.help-text {
  position:absolute; 
  white-space: pre; 
  margin-left:5px; 
  top: 2px;
  left: 76%;
}
.custom {
  position: relative;
}
.pl-0 {
  padding-left: 0;
}
@media ( max-width: 767px ){
  .help-text {
    position:static; 
    display: block;
    white-space: pre; 
    margin-left:5px; 
    top: 2px;
  }
}

I hope it helps you

Answer 2

Paste below code to the following link and see the DEMO, as well you need to write some responsive css aswell. http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h

Bootstrap Example

    <div id="content">
        <div class="container background-white bottom-border">
            <div class="row margin-vert-30">
                <div class="col-md-10">

                    <legend>Financial Aspect</legend>

                    <div class="row">
                        <div class="col-md-8">


                            <form action="#" method="post" accept-charset="utf-8" autocomplete="off" class="form-horizontal">


                                <div class="form-group">
                                    <label class="col-md-3 control-label">Department</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-briefcase"></i></span>
                                        <select name="department_id" id="department_id" class="form-control">
                                            <option value="0" selected="selected">------Select Department------</option>
                                            <option value="12">Agriculture Department</option>
                                            <option value="2">Assistant Registrar of Co-operative Societies</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="col-md-3 control-label">Scheme</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
                                        <select name="scheme_id" id="scheme_id" class="form-control">
                                            <option value="0" selected="selected">------------------------------------</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Sanctd. Amount</label>                             
                                            <div class="input-group col-md-6">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                                <input type="text" name="sanctioned_amount" value="" id="sanctioned_amount" class="form-control" />
                                            </div>
                                    <label class="col-md-4 pull-right" style="top:-32px;font-weight:100;left:39px;">(Entry should be in Lakhs)</label> 




                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Fund Received</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                        <input type="text" name="fund_received" value="" id="fund_received" class="form-control" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Fund Utilised</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                        <input type="text" name="fund_utilised" value="" id="fund_utilised" class="form-control" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6  col-md-offset-4 col-xs-offset-4">
                                        <input type="submit" name="financial_submit" value="Submit" class="btn btn-info" id="financial_submit" rel="tooltip" title="save form" />
                                    </div>

                                </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
</html>