Bootstrap form styling within modal window - css

Question

I have stuck with that for a while. I have a bunch of inputs within my modal window to create a season. But it is still not responsive (looks very bad on smaller screens).
Also those two buttons should be on the right side of the well. I tried things like "pull-right" class or "float left" and absolute position but then they are always cross the grey background. How can I fix that?
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body" style="position: relative;">
<div class="well">
<div class="row" style="width: 80%; margin: 0;">
<div class="col-sm-6">
<span class="bold">Season name</span>
<input type="text" placeholder="e.g. High season">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input type="date" style="font-size: 1.23rem; display: inline-block;">
</div>
<div class="col-sm-3">
<div style="margin-left: 40px;">
<span class="bold">To</span>
<input type="date" style="font-size: 1.23rem;display: inline-block;">
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-default" data-dismiss="modal" style="position: absolute; right: 50px;">Close</button>
<button type="button" class="btn btn-primary" style="position: absolute; right: 20px;">Save</button>
</div>
</div>
</div>
And code online goes here: http://www.bootply.com/ojhdwC4y4x#

Answer 1

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body">
<div class="well">
<div class="input-group">
<input type="text" class="form-control" placeholder="Season name" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="To" aria-describedby="basic-addon1">
</div>
</div>
<br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
It caused by <span> tag before <input> tag, I think. And let's try above code, using bootstrap input instead.
And result:

Answer 2

<div class="row" style="width: 80%; margin: 0;">
<div class="col-sm-6">
<span class="bold">Season name</span>
<input class="form-control" type="text">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input class="form-control" type="date">
</div>
<div class="col-sm-3">
<span class="bold">To</span>
<input class="form-control" type="date">
</div>
</div>
how about to change it default of bootstrap style?

Answer 3

For the buttons you should use modal-footer like described here. For the responsive code try this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body">
<div class="well">
<div class="row">
<div class="col-sm-5">
<span class="bold">Season name</span>
<input type="text">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input type="date" style="font-size: 1.23rem;">
</div>
<div class="col-sm-3">
<span class="bold">To</span>
<input type="date" style="font-size: 1.23rem;">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Note that the modal component has limted size, and rows define some margins, but the native HTML 5 date will not fit on the well div nicely. So you can remove one column from "Season name". If you have a lot more elements I recomend divide them on multiple rows.