Ankush Rishi Ankush Rishi - 6 months ago 22
HTML Question

Bootstrap date range picker styling issue

I have a problem on styling my form which uses bootstrap date range picker dropdown.

Here are two images that what i want and how my page look like:

This is the screenshot for what I did:
enter image description here

And here is what i want the form to look like:
enter image description here

This is the code for form that i created:

<div class="form-group" style="border: 1px solid">
<div class="row">
<div class="radio">
<label><input type="radio" name="optradio">Select Period
</label>
</div>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<span></span> <b class="caret"></b>
</div>
</div>
<div class="row">
<div class="radio">
<label><input type="radio" name="optradio">Select Date</label>
</div>
</div>
<div class="row">
<div class="radio">
<label><input type="radio" name="optradio">Select Date Range</label>
</div>
</div>
</div>

Answer

You can use col-md-* class of bootstrap

<div class="form-group" style="border: 1px solid">
      <div class="row">
          <div class="col-md-2">
            <div class="radio">
               <label><input type="radio" name="optradio">Select Period</label>
            </div>
          </div>
          <div class="col-md-3">
            <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
              <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
             <span></span> <b class="caret"></b>
            </div>
          </div>
      </div>

      <div class="row">
        <div class="col-md-2">
          <div class="radio">
              <label><input type="radio" name="optradio">Select Date</label>
            </div>
          </div>
        </div>

      <div class="row">
        <div class="col-md-2">
          <div class="radio">
            <label><input type="radio" name="optradio">Select Date Range</label>
          </div>
        </div>
      </div>
    </div>
Comments