CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Kinyua James
Kinyua James

Reputation: 55

Bootstrap Form is not Responsive

This is what I get when I zoom or shrink the size of the browser.

My Bootstrap form works just fine but when the user zooms the screen or changes the size of the browser, the form elements overlap each other. They are not as responsive as they should.

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date">Imprest No:</label>
      <input id="imprestNo" name="imprestNo" class="form-control input-group-lg header" width="150" value="" readonly="readonly" />
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date"> <b> Default Budget </b> </label>
      <input id="defaultbudget" name="employeeNo" class="form-control input-group-lg header" readonly="readonly" value="" />
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date"> <b> Budget Name </b> </label>

      <Select class="form-control input-group-md" name="budgetname" id="budgetname" style="font-size: 13px !important;" placeholder="Select A Budget" data-validation="required" data-validation-error-msg="Please select Budget">
        </select`enter code here`>
    </div>
  </div>
</div>

Upvotes: 1

Views: 499

Answers (1)

Rohan Rao
Rohan Rao

Reputation: 2603

You will need to add a container class as a parent class in order to have a responsive layout. This is the standard way of how you can achieve responsiveness.

See the output snippet by reducing your browser size.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date">Imprest No:</label>
      <input id="imprestNo" name="imprestNo" class="form-control input-group-lg header" width="150" value="" readonly="readonly" />
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date"> <b> Default Budget </b> </label>
      <input id="defaultbudget" name="employeeNo" class="form-control input-group-lg header" readonly="readonly" value="" />
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form-group">
      <label for="lv-start-date"> <b> Budget Name </b> </label>

      <Select class="form-control input-group-md" name="budgetname" id="budgetname" style="font-size: 13px !important;" placeholder="Select A Budget" data-validation="required" data-validation-error-msg="Please select Budget">
        </select`enter code here`>
    </div>
  </div>

</div>
</div>

Hope this helps.

Upvotes: 3

Related Questions