Bootstrap Sample

With bootstrap, you can organize your elements like in a grid, using the classes col-xs-n, col-sm-n, col-md-n, col-lg-n (n being a number from 1 to 12)
The reason why for so many classes is so you can choose what layout you want in different viewports:

col-xs-n - Extra small devices, like smartphones
col-sm-n - Small devices, like tablets
col-md-n - Medium devices, like laptop screens
col-lg-n - Large devices, like large desktop screens

Layout

Div with class row with 12 divs with class="col-xs-1" inside

<div class="row">
  <div class="col-xs-1" style="background-color:#000000; height:20px"></div>
  ...
  <div class="col-xs-1" style="background-color:#999900; height:20px"></div>
</div>

You can use some useful classes on the go:

.text-primary

.text-success

.text-info

.text-warning

.text-danger

.label-primary

.label-success

.label-info

.label-warning

.label-danger

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.alert-success

.alert-info

.alert-warning

.alert-danger

This makes it possible for us to create complex positioning

html snippet that generates above:

<div class="row">
    <div class="col-xs-2" style="height:20px"></div>
    <div class="col-xs-2" style="background-color:black; height:20px"></div>
    <div class="col-xs-2" style="height:20px"></div>
    <div class="col-xs-2" style="background-color:black; height:20px"></div>
</div>
<div class="row">
    <div class="col-xs-3" style="height:20px"></div>
    <div class="col-xs-1" style="background-color:black; height:20px"></div>
    <div class="col-xs-1" style="height:20px"></div>
    <div class="col-xs-2" style="background-color:black; height:20px"></div>
    <div class="col-xs-2" style="height:20px"></div>
    <div class="col-xs-2" style="background-color:black; height:20px"></div>
</div>
<div class="row">
    <div class="col-xs-2" style="height:20px"></div>
    <div class="col-xs-1" style="background-color:black; height:20px"></div>
    <div class="col-xs-3" style="height:20px"></div>
    <div class="col-xs-2" style="background-color:black; height:20px"></div>
</div>

Components

Require

To include a Bootstrap Dashboard:

require(['cdf/Dashboard.Bootstrap'],
function(Dashboard) {
...
});