/
Things to consider while preparing a dashboard

Things to consider while preparing a dashboard

Owned by Kemal Candan
Last updated: Jan 06, 2020 by Dece Translate (Unlicensed)

Bootstrap is used in existing interfaces. The following steps must be followed to ensure that the prepared Dashboard is compatible with the themes.

Step 1

Bootstrap grid structure should be used to split bootstrap pages in dashboard content placements. The appropriate number of grids is used according to the density of the content.

Ex.:

<div class="row">
	<div class="col-md-12">
		<!-- ... -->
	</div>
</div>

<div class="row">
	<div class="col-md-6">
		<!-- ... -->
	</div>
	<div class="col-md-6">
		<!-- ... -->
	</div>
</div>

<div class="row">
	<div class="col-sm-4 col-md-6">
		<!-- ... -->
	</div>
	<div class="col-sm-4 col-md-3">
		<!-- ... -->
	</div>
	<div class="col-sm-4 col-md-3">
		<!-- ... -->
	</div>
</div>

Step 2

After dividing the pages into the desired structure, bootstrap panels should be used to place the data fields.  panel-default, panel-info, panel-primary, panel-danger, panel-success looks can be preferred depending on the theme.

 <small>Subtext</small> should be used for subtexts under panel-heading

Ex.:

<div class="panel panel-default">
	<div class="panel-heading">
		<h4>Panel Heading</h4>
		<small>Panel explanation text</small>
	</div>
	<div class="panel-body">
		<!-- Panel Content -->
	</div>
</div>

Result

Ex.:


<div class="row">
	<div class="col-md-6">
		<!-- panel -->
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4>Panel Heading</h4>
				<small>Panel  explanation text</small>
			</div>
			<div class="panel-body">
				<!-- Panel Content -->
			</div>
		</div>
		<!-- panel and -->
	</div>

	<div class="col-md-6">
		<!-- ... -->
	</div>
</div>



Notes:

If you don't need to have a heading, you can simply delete the <div class="panel-heading"> part. This way you can have a box with a solid white background.

Ex.:


<div class="row">
	<div class="col-md-6">
		<!-- panel -->
		<div class="panel panel-default">
			<div class="panel-body">
				<!-- Panel Content -->
			</div>
		</div>
		<!-- panel and -->
	</div>

	<div class="col-md-6">
		<!-- ... -->
	</div>
</div>

Result:

Bootstrap panels also have a <div class="panel-footer"> field. This footer can also be used if necessary.

For detailed information;

https://bootstrapdocs.com/v3.3.1/docs/components/#panels