Alignment of HTML fields

Question

I have a form Bootstrap for a landing page.
I want to put the start date and end date fields next to each other without breaking my responsive.

<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-2 
            col-sm-8 col-xs-offset-2 col-xs-8">
    <div class="form-group">
        <label>Período</label>
        <div class="form-inline">
            <div class="row">
                <div class="col-md-4">
                    <div id="inicial">
                        <label>Data inicial</label>
                        <input type="date" class="form-control" 
                               placeholder="Período inicial">
                    </div>
                    <div>
                        <label>Data final</label>
                        <input type="date" class="form-control" 
                               placeholder="Período final">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I think that’s what you wanted, I just added a id='final' in your div of the second field and after, a CSS for formatting them side by side.

---

Example fiddle

#inicial {float: left; width: auto;}
#final {float: left; width: auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-2 
            col-sm-8 col-xs-offset-2 col-xs-8">
    <div class="form-group">
        <label>Período</label>
        <div class="form-inline">
            <div class="row">
                <div class="col-md-4">
                    <div id="inicial">
                        <label>Data inicial</label>
                        <input type="date" class="form-control" 
                               placeholder="Período inicial">
                    </div>
                    <div id="final">
                        <label>Data final</label>
                        <input type="date" class="form-control" 
                               placeholder="Período final">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

Try it that way:

<div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="form-group form-group-default input-group">
                <label>Data Inicial</label>
                <input type="date" class="form-control" placeholder="Período inicial"></i></span>
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="form-group form-group-default input-group">
                <label>Data Final</label>
                <input type="date" class="form-control" placeholder="Período final">
            </div>
        </div>
 </div>