Thursday, January 1, 2015

Bootstrap: Center charts in bootstrap panel

To center charts in bootstrap panel, add "style='text-align:center'" to the div element of the panel-body. Below is the code snippet:

<div class="row" style="padding-top:10px">
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">C3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGaugeC3"></div>
			</div>
		
		</div>
	</div>
	
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">D3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGaugeD3"></div>
			</div>
		</div>
	</div>
	
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">C3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGauge"></div>
			</div>
		</div>
	</div>
</div>

Below is the link some examples of charts such as Hive Plot, gauge in bootstrap:

https://dl.dropboxusercontent.com/u/113201788/d3/charts-with-bootstrap-panel.zip

No comments:

Post a Comment