HTML Field Alignment

Navigation
1

I have a Bootstrap form for landing page . Home 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>
    
asked by anonymous 31.07.2017 / 21:40

2 answers

1

I think that's what you wanted, I just added a id='final' to your div from the second field and then a CSS to format 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>
    
31.07.2017 / 21:51
0

Try this 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>
    
31.07.2017 / 21:47
Error opening map in bootstrap modal Generate mathematical combinations with array in PHP