1.2 atoms.forms Form elements
A majority of forms in the site are built from the same base class.
Examples
Default styling
.has-success
Indicates a successful or positive action.
.has-warning
Indicates a successful or positive action.
.has-danger
Indicates a successful or positive action.
<form>
<div class="form-group [modifier class]">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group [modifier class]">
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Radios</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Checkbox</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>
<form>
<div class="form-group [modifier class]">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="form-group [modifier class]">
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="form-group [modifier class]">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<div class="form-group">
<label>Range input</label>
<input id="range" type="range" min="0" max="25" step="0.02">
</div>
</form>
Source:
components/atoms/forms/_forms.scss
, line 1
1.3 atoms.pagination Pagination
A majority of pagination in the site are built from the same base class.
Examples
Default styling
.pagination-sm
Small pagination.
.pagination-lg
Large pagination.
<ul class="pagination [modifier class]">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">» Volgende</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
Source:
components/atoms/pagination/_pagination.scss
, line 1
1.4 atoms.table Tables
The <table>
element displays tabular data in rows, columns, and cells.
Examples
Default styling
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-inverse
Table inverse.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.thead-inverse
Thead inverse.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.thead-default
Thead default.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-striped
Use .table-striped to add zebra-striping to any table row within the .
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-bordered
Add .table-bordered for borders on all sides of the table and cells.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-hover
Add .table-hover to enable a hover state on table rows within a .
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-sm
Add .table-sm to make tables more compact by cutting cell padding in half.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-active
Applies the hover color to a particular row or cell.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-success
Indicates a successful or positive action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-info
Indicates a neutral informative change or action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-warning
Indicates a warning that might need attention.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-danger
Indicates a dangerous or potentially negative action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
<table class="table [modifier class]">
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead class="[modifier class]">
<tr class="[modifier class]">
<th class="[modifier class]">Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
Source:
components/atoms/tables/_tables.scss
, line 1