Bootstrap modal window column layout - html

Question

I need a help in aligning the content inside the modal window. Here is the html
<div>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<button type="button" class="close" ng-click="dismiss()" aria-hidden="true">×</button>
<h3>Chart Settings</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Title</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.title.text"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Subtitle</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.subtitle.text"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Width</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.size.width"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Height</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.size.height"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">reflow</label>
<div class="col-lg-6 col-md-6">
<button ng-click="reflow()" class="form-control">reflow</button>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Default Type</label>
<div class="col-lg-6 col-md-6">
<select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select>
</div>
</div>
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Series</span>
<div class="col-md-6">
<div class="form-group row" ng-repeat="ser in chartSeries">
<div class="row-fluid">Title <input ng-model="ser.name"></div>
<div class="row-fluid">Type <select ng-model="ser.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
<div class="row-fluid">Color <input ng-model="ser.color"></div>
<div class="row-fluid">Width <input ng-model="ser.lineWidth"></div>
<div class="row-fluid">Dash Style <select ng-model="ser.dashStyle" ng-options="ds.id as ds.title for ds in dashStyles"></select></div>
<div class="row-fluid"><label><input type="checkbox" ng-model="ser.connectNulls"> interpolate</label></div>
<div class="row-fluid"><button ng-click="removeSeries($index)">Delete</button></div>
</div>
</div>
</div>
<div class="row">
<div class="row"><button ng-click="addSeries()">Add Series</button></div>
<div class="row"><button ng-click="addPoints()">Add Points to Random Series</button></div>
<div class="row"><button ng-click="removeRandomSeries()">Remove Random Series</div>
<div class="row"><button ng-click="toggleHighCharts()">HighChart/HighStock</div>
<div class="row"><button ng-click="replaceAllSeries()">Replace all series</button></div>
<div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
<div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
</div>
</div>
<div class="modal-footer">
<button ng-click="dismiss()" class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
<button type="submit" class="btn btn-danger pull-left" ><i class="glyphicon glyphicon-ok"></i>Save</button>
</div>
</form>
</div>
Output:
I need to align the buttons in the same line as how the input boxes are aligned. how can i do that?

Answer 1

Use ul li instead of div row. Like,
<div class="row">
<ul class="liInline">
<li>
<button ng-click="addSeries()">
Add Series</button></li>
<li>
<button ng-click="addPoints()">
Add Points to Random Series</button></li>
<li>
<button ng-click="removeRandomSeries()">
Remove Random Series</button></li>
<li>
<button ng-click="toggleHighCharts()">
HighChart/HighStock</button></li>
<li>
<button ng-click="replaceAllSeries()">
Replace all series</button></li>
</ul>
</div>
Add CSS to your page for buttons display in one line.
<style type="text/css">
.liInline li
{
display: inline;
margin: 0 5px;
list-style: none;
}
</style>