user2771738 user2771738 - 1 month ago 13
CSS Question

Responsive date from date to css layout

I wonder what is best approach to obtain date from date to layot.
So it should be something like:

float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2


I've build already(with blessing of bootstrap):

<div class="row">
<div class="col-sm-12 col-md-6">
<div class="float-right">
<span>date from</span>
<input>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="float-left">
<span>date to</span>
<input>
</div>
</div>
</div>


and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:

label from
input
label to
input

Answer

I found nice solution using botstrap css

<form class="form-inline text-center">
    <div class="form-group">
      <label for="exampleInputEmail3">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword3">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
    </div>
    <div class="form-check">
       <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>