I have this code that I found on the internet that works like a dashboard, but I can not align the objects the way I like it
The code:
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="box box-default">
<div class="box-header">
<h3 class="box-title">iCheck - Checkbox & Radio Inputs</h3>
</div>
<div class="box-body">
<div class="form-group">
<div>
<input type="checkbox" class="form-control" checked="checked"> Checkbox
</div>
<div>
<input type="checkbox" class="form-control"> Checkbox
</div>
<div>
<input type="checkbox" class="form-control" disabled="disabled"> Disabled Checkbox
</div>
</div>
<div class="form-group">
<div>
<input type="radio" class="form-control" checked="checked"> Radio Button
</div>
<div>
<input type="radio" class="form-control"> Radio Button
</div>
<div>
<input type="radio" class="form-control" disabled="disabled"> Disabled Radio Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-7">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Select2</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Minimal</label>
<select class="form-control" style="width: 100%;">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label>Disabled</label>
<select class="form-control" disabled="disabled" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="form-control" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<div class="form-group">
<label>Disabled Result</label>
<select class="form-control" style="width: 50%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option disabled="disabled">California (disabled)</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" align="right">
<div class="col-xs-5 col-md-3" align="right">
<!--<div class="box box-default"> -->
<!-- <div class="box-header"> -->
<!-- </div> -->
<div class="form-group" >
<label class="col-sm-2 control-label">Data</label>
<div class="col-sm-10">
<div class="input-group date">
<input type="text" class="form-control" id="exemplo">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<!-- </div>-->
<div class="col-xs-5 col-md-3 " align="right">
<div class="box box-pane-righ" align="right" >
<div class="box-header box-pane-right" align="right">
<h3 class="box-title">Input masks</h3>
</div>
<div class="box-body"align="right">
<div class="form-group" align="right">
<label>Date masks:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask=""align="right">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="">
</div>
</div>
<div class="form-group">
<label>US phone mask:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-phone"></i>
</div>
<input type="text" class="form-control" data-inputmask=""mask": "(999) 999-9999"" data-mask="">
</div>
</div>
<div class="form-group">
<label>Intl US phone mask:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-phone"></i>
</div>
<input type="text" class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="">
</div>
</div>
<div class="form-group">
<label>IP mask:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-laptop"></i>
</div>
<input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="">
</div>
</div>
</div>
</div>
</div>
</div>
Forexample,ifIwanttoalignthe"input mask" box on the right with the "select 2" screen or maybe play it below the "date" screen