Temporary form controls page with manual html (these are not official components *yet*)
Section
Another Section
.tile
.tile-header
%a.d-block.no-link-color{ href: "#tileCollapse", "aria-expanded" => "true", "aria-controls" => "tileCollapse", data: { "toggle" => "collapse" } }
.row.align-items-center
.col-10
%h6.text-uppercase
= fa_icon "rocket fw", class: "mr-1", text: "Tile Header"
.col-2.text-right
= fa_icon "caret-down fw"
#tileCollapse.collapse.show
.tile-body
%h1 Form Elements
%form.mt-3
.form-group
%label.required Label:
%input.form-control{ type: "text", placeholder: "Normal Input" }
%small.form-text.text-muted Help text goes right here
.form-group
%label Label:
%input.form-control.form-control-lg{ type: "text", placeholder: "Large Input" }
.form-group
%label Label:
%input.form-control.form-control-sm{ type: "text", placeholder: "Small Input", disabled: true }
.form-group
%label Select:
%select.form-control
%option Select a number
%option 1
%option 2
%option 3
.form-group
%label Multiselect:
%select.form-control{ multiple: true }
%option Select a number
%option 1
%option 2
%option 3
.form-group
%label Textarea:
%textarea.form-control{ rows: 5 }
.form-group
%label File Input:
%input.form-control-file{ type: "file" }
.form-group
%label Checkboxes:
.form-check
%input.form-check-input{ type: "checkbox", id: "checkbox1" }
%label.form-check-label{ for: "checkbox1" } Checkbox 1
.form-check
%input.form-check-input{ type: "checkbox", id: "checkbox2" }
%label.form-check-label{ for: "checkbox2" } Checkbox 2
.form-group
%label Radios:
.form-check
%input.form-check-input{ type: "radio", id: "radio1", name: "radios" }
%label.form-check-label{ for: "radio1" } Radio 1
.form-check
%input.form-check-input{ type: "radio", id: "radio2", name: "radios" }
%label.form-check-label{ for: "radio2" } Radio 2
.form-group
%label.mr-2 Inline Checkboxes:
.form-check.form-check-inline
%input.form-check-input{ type: "checkbox", id: "checkbox3" }
%label.form-check-label{ for: "checkbox3" } Checkbox 3
.form-check.form-check-inline
%input.form-check-input{ type: "checkbox", id: "checkbox4" }
%label.form-check-label{ for: "checkbox4" } Checkbox 4
.form-group
%label Custom Checkbox:
.custom-control.custom-checkbox
%input.custom-control-input{ type: "checkbox", id: "customCheckbox" }
%label.custom-control-label{ for: "customCheckbox" } Custom Checkbox
.form-group
%label Custom Radio:
.custom-control.custom-radio
%input.custom-control-input{ type: "radio", id: "customRadio", name: "customRadios" }
%label.custom-control-label{ for: "customRadio" } Custom Radio
.form-group
%label.mr-2 Custom Checkbox Inline:
.custom-control.custom-checkbox.custom-control-inline
%input.custom-control-input{ type: "checkbox", id: "customCheckboxInline" }
%label.custom-control-label{ for: "customCheckboxInline" } Custom Checkbox Inline
.form-group
%label.mr-2 Custom Switch:
.custom-control.custom-switch
%input.custom-control-input{ type: "checkbox", id: "customCheckboxSwitch" }
%label.custom-control-label{ for: "customCheckboxSwitch" } Custom Switch
.form-group
%label Custom Select:
%select{ class: "custom-select" }
%option Select a number
%option 1
%option 2
%option 3
.form-group
%label Custom File:
.custom-file
%input.custom-file-input{ type: "file" }
%label.custom-file-label Choose File
.form-group
%label Custom Block:
.form-row
.col-4
.custom-control.custom-radio.custom-control-block
%input.custom-control-input{ type: "radio", id: "customBlockRadio", name: "customBlockRadios" }
%label.custom-control-label.text-center{ for: "customBlockRadio" }
%img.img-fluid{ src: "http://via.placeholder.com/200x200" }
%p.mt-2.mb-0 Custom Block Radio
.col-4
.custom-control.custom-control-block
%input.custom-control-input{ type: "checkbox", id: "customBlockCheckbox" }
%label.custom-control-label.text-center{ for: "customBlockCheckbox" }
%img.img-fluid{ src: "http://via.placeholder.com/200x200" }
%p.mt-2.mb-0 Custom Block Checkbox without Indicator
.form-group
%label Input Group:
.input-group
.input-group-prepend
%span.input-group-text $
%input.form-control{ type: "text", placeholder: "Enter an amount" }
.input-group-append
%span.input-group-text .00
%form.needs-validation
.form-group
%label Success:
%input.form-control.is-valid{ type: "text" }
.valid-feedback This info is correct!
.form-group
%label Error:
%input.form-control.is-invalid{ type: "text" }
.invalid-feedback Error!
%form.was-validated
.form-group.is-valid
%label.mr-2 Inline Checkboxes:
.form-check.form-check-inline
%input.form-check-input{ type: "checkbox", id: "checkbox3" }
%label.form-check-label{ for: "checkbox3" } Checkbox 3
.form-check.form-check-inline
%input.form-check-input{ type: "checkbox", id: "checkbox4" }
%label.form-check-label{ for: "checkbox4" } Checkbox 4
.valid-feedback This info is correct!
%form.needs-validation
.form-group
%label Success:
%input.form-control.is-valid{ type: "text" }
.valid-tooltip This info is correct!
.form-group
%label Error:
%input.form-control.is-invalid{ type: "text" }
.invalid-tooltip Error!
.row
.col-12.col-lg-7.mt-3
.tile
.tile-header
%ul.nav.nav-tabs.tile-header-tabs
%li.nav-item
%a.nav-link.active{ href: "#first", id: "firstTab", "aria-controls" => "home", "aria-selected" => "true", data: { "toggle" => "tab" } } First Tab
%li.nav-item
%a.nav-link{ href: "#second", id: "secondTab", "aria-controls" => "home", "aria-selected" => "false", data: { "toggle" => "tab" } } Second Tab
.tile-body.tab-content
#first.tab-pane.fade.show.active{"aria-labelledby" => "firstTab" }
%h1 First Tab Content
#second.tab-pane.fade{"aria-labelledby" => "secondTab" }
%h1 Second Tab Content
.tile-footer
%p.mb-0 Tile Footer
.col-12.col-lg-5.mt-3
.tile
.tile-header
%h6 Tile Header
.tile-body
.tile-section
%p.mb-0 Section
.tile-section
%p.mb-0 Another Section
.tile-footer
%p.mb-0 Tile Footer
Form Elements
First Tab Content
Second Tab Content
Tile Header
Section
Another Section
<h1>Form Controls</h1>
<p>Temporary form controls page with manual html (these are not official components *yet*)</p>
<div class='container-fluid'>
<div class='row'>
<div class='col col-xl-11 mx-auto'>
<div class='tile'>
<div class='tile-header'>
<a aria-controls='tileCollapse' aria-expanded='true' class='d-block no-link-color' data-toggle='collapse' href='#tileCollapse'>
<div class='row align-items-center'>
<div class='col-10'>
<h6 class='text-uppercase'>
<i class="fa fa-rocket fa-fw mr-1"></i> Tile Header
</h6>
</div>
<div class='col-2 text-right'>
<i class="fa fa-caret-down fa-fw"></i>
</div>
</div>
</a>
</div>
<div class='collapse show' id='tileCollapse'>
<div class='tile-body'>
<h1>Form Elements</h1>
<form class='mt-3'>
<div class='form-group'>
<label class='required'>Label:</label>
<input class='form-control' placeholder='Normal Input' type='text'>
<small class='form-text text-muted'>Help text goes right here</small>
</div>
<div class='form-group'>
<label>Label:</label>
<input class='form-control form-control-lg' placeholder='Large Input' type='text'>
</div>
<div class='form-group'>
<label>Label:</label>
<input class='form-control form-control-sm' disabled placeholder='Small Input' type='text'>
</div>
<div class='form-group'>
<label>Select:</label>
<select class='form-control'>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Multiselect:</label>
<select class='form-control' multiple>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Textarea:</label>
<textarea class='form-control' rows='5'></textarea>
</div>
<div class='form-group'>
<label>File Input:</label>
<input class='form-control-file' type='file'>
</div>
<div class='form-group'>
<label>Checkboxes:</label>
<div class='form-check'>
<input class='form-check-input' id='checkbox1' type='checkbox'>
<label class='form-check-label' for='checkbox1'>Checkbox 1</label>
</div>
<div class='form-check'>
<input class='form-check-input' id='checkbox2' type='checkbox'>
<label class='form-check-label' for='checkbox2'>Checkbox 2</label>
</div>
</div>
<div class='form-group'>
<label>Radios:</label>
<div class='form-check'>
<input class='form-check-input' id='radio1' name='radios' type='radio'>
<label class='form-check-label' for='radio1'>Radio 1</label>
</div>
<div class='form-check'>
<input class='form-check-input' id='radio2' name='radios' type='radio'>
<label class='form-check-label' for='radio2'>Radio 2</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Inline Checkboxes:</label>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox3' type='checkbox'>
<label class='form-check-label' for='checkbox3'>Checkbox 3</label>
</div>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox4' type='checkbox'>
<label class='form-check-label' for='checkbox4'>Checkbox 4</label>
</div>
</div>
<div class='form-group'>
<label>Custom Checkbox:</label>
<div class='custom-control custom-checkbox'>
<input class='custom-control-input' id='customCheckbox' type='checkbox'>
<label class='custom-control-label' for='customCheckbox'>Custom Checkbox</label>
</div>
</div>
<div class='form-group'>
<label>Custom Radio:</label>
<div class='custom-control custom-radio'>
<input class='custom-control-input' id='customRadio' name='customRadios' type='radio'>
<label class='custom-control-label' for='customRadio'>Custom Radio</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Custom Checkbox Inline:</label>
<div class='custom-control custom-checkbox custom-control-inline'>
<input class='custom-control-input' id='customCheckboxInline' type='checkbox'>
<label class='custom-control-label' for='customCheckboxInline'>Custom Checkbox Inline</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Custom Switch:</label>
<div class='custom-control custom-switch'>
<input class='custom-control-input' id='customCheckboxSwitch' type='checkbox'>
<label class='custom-control-label' for='customCheckboxSwitch'>Custom Switch</label>
</div>
</div>
<div class='form-group'>
<label>Custom Select:</label>
<select class='custom-select'>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Custom File:</label>
<div class='custom-file'>
<input class='custom-file-input' type='file'>
<label class='custom-file-label'>Choose File</label>
</div>
</div>
<div class='form-group'>
<label>Custom Block:</label>
<div class='form-row'>
<div class='col-4'>
<div class='custom-control custom-radio custom-control-block'>
<input class='custom-control-input' id='customBlockRadio' name='customBlockRadios' type='radio'>
<label class='custom-control-label text-center' for='customBlockRadio'>
<img class='img-fluid' src='http://via.placeholder.com/200x200'>
<p class='mt-2 mb-0'>Custom Block Radio</p>
</label>
</div>
</div>
<div class='col-4'>
<div class='custom-control custom-control-block'>
<input class='custom-control-input' id='customBlockCheckbox' type='checkbox'>
<label class='custom-control-label text-center' for='customBlockCheckbox'>
<img class='img-fluid' src='http://via.placeholder.com/200x200'>
<p class='mt-2 mb-0'>Custom Block Checkbox without Indicator</p>
</label>
</div>
</div>
</div>
</div>
<div class='form-group'>
<label>Input Group:</label>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>$</span>
</div>
<input class='form-control' placeholder='Enter an amount' type='text'>
<div class='input-group-append'>
<span class='input-group-text'>.00</span>
</div>
</div>
</div>
</form>
<form class='needs-validation'>
<div class='form-group'>
<label>Success:</label>
<input class='form-control is-valid' type='text'>
<div class='valid-feedback'>This info is correct!</div>
</div>
<div class='form-group'>
<label>Error:</label>
<input class='form-control is-invalid' type='text'>
<div class='invalid-feedback'>Error!</div>
</div>
</form>
<form class='was-validated'>
<div class='form-group is-valid'>
<label class='mr-2'>Inline Checkboxes:</label>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox3' type='checkbox'>
<label class='form-check-label' for='checkbox3'>Checkbox 3</label>
</div>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox4' type='checkbox'>
<label class='form-check-label' for='checkbox4'>Checkbox 4</label>
</div>
<div class='valid-feedback'>This info is correct!</div>
</div>
</form>
<form class='needs-validation'>
<div class='form-group'>
<label>Success:</label>
<input class='form-control is-valid' type='text'>
<div class='valid-tooltip'>This info is correct!</div>
</div>
<div class='form-group'>
<label>Error:</label>
<input class='form-control is-invalid' type='text'>
<div class='invalid-tooltip'>Error!</div>
</div>
</form>
</div>
</div>
</div>
<div class='row'>
<div class='col-12 col-lg-7 mt-3'>
<div class='tile'>
<div class='tile-header'>
<ul class='nav nav-tabs tile-header-tabs'>
<li class='nav-item'>
<a aria-controls='home' aria-selected='true' class='nav-link active' data-toggle='tab' href='#first' id='firstTab'>First Tab</a>
</li>
<li class='nav-item'>
<a aria-controls='home' aria-selected='false' class='nav-link' data-toggle='tab' href='#second' id='secondTab'>Second Tab</a>
</li>
</ul>
</div>
<div class='tile-body tab-content'>
<div aria-labelledby='firstTab' class='tab-pane fade show active' id='first'>
<h1>First Tab Content</h1>
</div>
<div aria-labelledby='secondTab' class='tab-pane fade' id='second'>
<h1>Second Tab Content</h1>
</div>
</div>
<div class='tile-footer'>
<p class='mb-0'>Tile Footer</p>
</div>
</div>
</div>
<div class='col-12 col-lg-5 mt-3'>
<div class='tile'>
<div class='tile-header'>
<h6>Tile Header</h6>
</div>
<div class='tile-body'>
<div class='tile-section'>
<p class='mb-0'>Section</p>
</div>
<div class='tile-section'>
<p class='mb-0'>Another Section</p>
</div>
</div>
<div class='tile-footer'>
<p class='mb-0'>Tile Footer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<pre><code>.tile
 .tile-header
 %a.d-block.no-link-color{ href: "#tileCollapse", "aria-expanded" => "true", "aria-controls" => "tileCollapse", data: { "toggle" => "collapse" } }
 .row.align-items-center
 .col-10
 %h6.text-uppercase
 = fa_icon "rocket fw", class: "mr-1", text: "Tile Header"
 .col-2.text-right
 = fa_icon "caret-down fw"
 #tileCollapse.collapse.show
 .tile-body
 %h1 Form Elements
 %form.mt-3
 .form-group
 %label.required Label:
 %input.form-control{ type: "text", placeholder: "Normal Input" }
 %small.form-text.text-muted Help text goes right here

 .form-group
 %label Label:
 %input.form-control.form-control-lg{ type: "text", placeholder: "Large Input" }

 .form-group
 %label Label:
 %input.form-control.form-control-sm{ type: "text", placeholder: "Small Input", disabled: true }

 .form-group
 %label Select:
 %select.form-control
 %option Select a number
 %option 1
 %option 2
 %option 3

 .form-group
 %label Multiselect:
 %select.form-control{ multiple: true }
 %option Select a number
 %option 1
 %option 2
 %option 3

 .form-group
 %label Textarea:
 %textarea.form-control{ rows: 5 }

 .form-group
 %label File Input:
 %input.form-control-file{ type: "file" }

 .form-group
 %label Checkboxes:
 .form-check
 %input.form-check-input{ type: "checkbox", id: "checkbox1" }
 %label.form-check-label{ for: "checkbox1" } Checkbox 1
 .form-check
 %input.form-check-input{ type: "checkbox", id: "checkbox2" }
 %label.form-check-label{ for: "checkbox2" } Checkbox 2

 .form-group
 %label Radios:
 .form-check
 %input.form-check-input{ type: "radio", id: "radio1", name: "radios" }
 %label.form-check-label{ for: "radio1" } Radio 1
 .form-check
 %input.form-check-input{ type: "radio", id: "radio2", name: "radios" }
 %label.form-check-label{ for: "radio2" } Radio 2

 .form-group
 %label.mr-2 Inline Checkboxes:
 .form-check.form-check-inline
 %input.form-check-input{ type: "checkbox", id: "checkbox3" }
 %label.form-check-label{ for: "checkbox3" } Checkbox 3
 .form-check.form-check-inline
 %input.form-check-input{ type: "checkbox", id: "checkbox4" }
 %label.form-check-label{ for: "checkbox4" } Checkbox 4

 .form-group
 %label Custom Checkbox:
 .custom-control.custom-checkbox
 %input.custom-control-input{ type: "checkbox", id: "customCheckbox" }
 %label.custom-control-label{ for: "customCheckbox" } Custom Checkbox

 .form-group
 %label Custom Radio:
 .custom-control.custom-radio
 %input.custom-control-input{ type: "radio", id: "customRadio", name: "customRadios" }
 %label.custom-control-label{ for: "customRadio" } Custom Radio

 .form-group
 %label.mr-2 Custom Checkbox Inline:
 .custom-control.custom-checkbox.custom-control-inline
 %input.custom-control-input{ type: "checkbox", id: "customCheckboxInline" }
 %label.custom-control-label{ for: "customCheckboxInline" } Custom Checkbox Inline

 .form-group
 %label.mr-2 Custom Switch:
 .custom-control.custom-switch
 %input.custom-control-input{ type: "checkbox", id: "customCheckboxSwitch" }
 %label.custom-control-label{ for: "customCheckboxSwitch" } Custom Switch

 .form-group
 %label Custom Select:
 %select{ class: "custom-select" }
 %option Select a number
 %option 1
 %option 2
 %option 3

 .form-group
 %label Custom File:
 .custom-file
 %input.custom-file-input{ type: "file" }
 %label.custom-file-label Choose File

 .form-group
 %label Custom Block:
 .form-row
 .col-4
 .custom-control.custom-radio.custom-control-block
 %input.custom-control-input{ type: "radio", id: "customBlockRadio", name: "customBlockRadios" }
 %label.custom-control-label.text-center{ for: "customBlockRadio" }
 %img.img-fluid{ src: "http://via.placeholder.com/200x200" }
 %p.mt-2.mb-0 Custom Block Radio
 .col-4
 .custom-control.custom-control-block
 %input.custom-control-input{ type: "checkbox", id: "customBlockCheckbox" }
 %label.custom-control-label.text-center{ for: "customBlockCheckbox" }
 %img.img-fluid{ src: "http://via.placeholder.com/200x200" }
 %p.mt-2.mb-0 Custom Block Checkbox without Indicator

 .form-group
 %label Input Group:
 .input-group
 .input-group-prepend
 %span.input-group-text $
 %input.form-control{ type: "text", placeholder: "Enter an amount" }
 .input-group-append
 %span.input-group-text .00

 %form.needs-validation
 .form-group
 %label Success:
 %input.form-control.is-valid{ type: "text" }
 .valid-feedback This info is correct!
 .form-group
 %label Error:
 %input.form-control.is-invalid{ type: "text" }
 .invalid-feedback Error!

 %form.was-validated
 .form-group.is-valid
 %label.mr-2 Inline Checkboxes:
 .form-check.form-check-inline
 %input.form-check-input{ type: "checkbox", id: "checkbox3" }
 %label.form-check-label{ for: "checkbox3" } Checkbox 3
 .form-check.form-check-inline
 %input.form-check-input{ type: "checkbox", id: "checkbox4" }
 %label.form-check-label{ for: "checkbox4" } Checkbox 4
 .valid-feedback This info is correct!

 %form.needs-validation
 .form-group
 %label Success:
 %input.form-control.is-valid{ type: "text" }
 .valid-tooltip This info is correct!
 .form-group
 %label Error:
 %input.form-control.is-invalid{ type: "text" }
 .invalid-tooltip Error!

.row
 .col-12.col-lg-7.mt-3
 .tile
 .tile-header
 %ul.nav.nav-tabs.tile-header-tabs
 %li.nav-item
 %a.nav-link.active{ href: "#first", id: "firstTab", "aria-controls" => "home", "aria-selected" => "true", data: { "toggle" => "tab" } } First Tab
 %li.nav-item
 %a.nav-link{ href: "#second", id: "secondTab", "aria-controls" => "home", "aria-selected" => "false", data: { "toggle" => "tab" } } Second Tab
 .tile-body.tab-content
 #first.tab-pane.fade.show.active{"aria-labelledby" => "firstTab" }
 %h1 First Tab Content
 #second.tab-pane.fade{"aria-labelledby" => "secondTab" }
 %h1 Second Tab Content
 .tile-footer
 %p.mb-0 Tile Footer
 .col-12.col-lg-5.mt-3
 .tile
 .tile-header
 %h6 Tile Header
 .tile-body
 .tile-section
 %p.mb-0 Section
 .tile-section
 %p.mb-0 Another Section
 .tile-footer
 %p.mb-0 Tile Footer</code></pre>
</div>
<div class='col-md-6'>
<pre><code>
<div class='tile'>
<div class='tile-header'>
<a aria-controls='tileCollapse' aria-expanded='true' class='d-block no-link-color' data-toggle='collapse' href='#tileCollapse'>
<div class='row align-items-center'>
<div class='col-10'>
<h6 class='text-uppercase'>
<i class="fa fa-rocket fa-fw mr-1"></i> Tile Header</h6>
</div>
<div class='col-2 text-right'>
<i class="fa fa-caret-down fa-fw"></i></div>
</div>
</a>
</div>
<div class='collapse show' id='tileCollapse'>
<div class='tile-body'>
<h1>Form Elements</h1>
<form class='mt-3'>
<div class='form-group'>
<label class='required'>Label:</label>
<input class='form-control' placeholder='Normal Input' type='text'>
<small class='form-text text-muted'>Help text goes right here</small>
</div>
<div class='form-group'>
<label>Label:</label>
<input class='form-control form-control-lg' placeholder='Large Input' type='text'>
</div>
<div class='form-group'>
<label>Label:</label>
<input class='form-control form-control-sm' disabled placeholder='Small Input' type='text'>
</div>
<div class='form-group'>
<label>Select:</label>
<select class='form-control'>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Multiselect:</label>
<select class='form-control' multiple>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Textarea:</label>
<textarea class='form-control' rows='5'></textarea>
</div>
<div class='form-group'>
<label>File Input:</label>
<input class='form-control-file' type='file'>
</div>
<div class='form-group'>
<label>Checkboxes:</label>
<div class='form-check'>
<input class='form-check-input' id='checkbox1' type='checkbox'>
<label class='form-check-label' for='checkbox1'>Checkbox 1</label>
</div>
<div class='form-check'>
<input class='form-check-input' id='checkbox2' type='checkbox'>
<label class='form-check-label' for='checkbox2'>Checkbox 2</label>
</div>
</div>
<div class='form-group'>
<label>Radios:</label>
<div class='form-check'>
<input class='form-check-input' id='radio1' name='radios' type='radio'>
<label class='form-check-label' for='radio1'>Radio 1</label>
</div>
<div class='form-check'>
<input class='form-check-input' id='radio2' name='radios' type='radio'>
<label class='form-check-label' for='radio2'>Radio 2</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Inline Checkboxes:</label>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox3' type='checkbox'>
<label class='form-check-label' for='checkbox3'>Checkbox 3</label>
</div>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox4' type='checkbox'>
<label class='form-check-label' for='checkbox4'>Checkbox 4</label>
</div>
</div>
<div class='form-group'>
<label>Custom Checkbox:</label>
<div class='custom-control custom-checkbox'>
<input class='custom-control-input' id='customCheckbox' type='checkbox'>
<label class='custom-control-label' for='customCheckbox'>Custom Checkbox</label>
</div>
</div>
<div class='form-group'>
<label>Custom Radio:</label>
<div class='custom-control custom-radio'>
<input class='custom-control-input' id='customRadio' name='customRadios' type='radio'>
<label class='custom-control-label' for='customRadio'>Custom Radio</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Custom Checkbox Inline:</label>
<div class='custom-control custom-checkbox custom-control-inline'>
<input class='custom-control-input' id='customCheckboxInline' type='checkbox'>
<label class='custom-control-label' for='customCheckboxInline'>Custom Checkbox Inline</label>
</div>
</div>
<div class='form-group'>
<label class='mr-2'>Custom Switch:</label>
<div class='custom-control custom-switch'>
<input class='custom-control-input' id='customCheckboxSwitch' type='checkbox'>
<label class='custom-control-label' for='customCheckboxSwitch'>Custom Switch</label>
</div>
</div>
<div class='form-group'>
<label>Custom Select:</label>
<select class='custom-select'>
<option>Select a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class='form-group'>
<label>Custom File:</label>
<div class='custom-file'>
<input class='custom-file-input' type='file'>
<label class='custom-file-label'>Choose File</label>
</div>
</div>
<div class='form-group'>
<label>Custom Block:</label>
<div class='form-row'>
<div class='col-4'>
<div class='custom-control custom-radio custom-control-block'>
<input class='custom-control-input' id='customBlockRadio' name='customBlockRadios' type='radio'>
<label class='custom-control-label text-center' for='customBlockRadio'>
<img class='img-fluid' src='http://via.placeholder.com/200x200'>
<p class='mt-2 mb-0'>Custom Block Radio</p>
</label>
</div>
</div>
<div class='col-4'>
<div class='custom-control custom-control-block'>
<input class='custom-control-input' id='customBlockCheckbox' type='checkbox'>
<label class='custom-control-label text-center' for='customBlockCheckbox'>
<img class='img-fluid' src='http://via.placeholder.com/200x200'>
<p class='mt-2 mb-0'>Custom Block Checkbox without Indicator</p>
</label>
</div>
</div>
</div>
</div>
<div class='form-group'>
<label>Input Group:</label>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>$</span>
</div>
<input class='form-control' placeholder='Enter an amount' type='text'>
<div class='input-group-append'>
<span class='input-group-text'>.00</span>
</div>
</div>
</div>
</form>
<form class='needs-validation'>
<div class='form-group'>
<label>Success:</label>
<input class='form-control is-valid' type='text'>
<div class='valid-feedback'>This info is correct!</div>
</div>
<div class='form-group'>
<label>Error:</label>
<input class='form-control is-invalid' type='text'>
<div class='invalid-feedback'>Error!</div>
</div>
</form>
<form class='was-validated'>
<div class='form-group is-valid'>
<label class='mr-2'>Inline Checkboxes:</label>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox3' type='checkbox'>
<label class='form-check-label' for='checkbox3'>Checkbox 3</label>
</div>
<div class='form-check form-check-inline'>
<input class='form-check-input' id='checkbox4' type='checkbox'>
<label class='form-check-label' for='checkbox4'>Checkbox 4</label>
</div>
<div class='valid-feedback'>This info is correct!</div>
</div>
</form>
<form class='needs-validation'>
<div class='form-group'>
<label>Success:</label>
<input class='form-control is-valid' type='text'>
<div class='valid-tooltip'>This info is correct!</div>
</div>
<div class='form-group'>
<label>Error:</label>
<input class='form-control is-invalid' type='text'>
<div class='invalid-tooltip'>Error!</div>
</div>
</form>
</div>
</div>
</div>
<div class='row'>
<div class='col-12 col-lg-7 mt-3'>
<div class='tile'>
<div class='tile-header'>
<ul class='nav nav-tabs tile-header-tabs'>
<li class='nav-item'>
<a aria-controls='home' aria-selected='true' class='nav-link active' data-toggle='tab' href='#first' id='firstTab'>First Tab</a>
</li>
<li class='nav-item'>
<a aria-controls='home' aria-selected='false' class='nav-link' data-toggle='tab' href='#second' id='secondTab'>Second Tab</a>
</li>
</ul>
</div>
<div class='tile-body tab-content'>
<div aria-labelledby='firstTab' class='tab-pane fade show active' id='first'>
<h1>First Tab Content</h1>
</div>
<div aria-labelledby='secondTab' class='tab-pane fade' id='second'>
<h1>Second Tab Content</h1>
</div>
</div>
<div class='tile-footer'>
<p class='mb-0'>Tile Footer</p>
</div>
</div>
</div>
<div class='col-12 col-lg-5 mt-3'>
<div class='tile'>
<div class='tile-header'>
<h6>Tile Header</h6>
</div>
<div class='tile-body'>
<div class='tile-section'>
<p class='mb-0'>Section</p>
</div>
<div class='tile-section'>
<p class='mb-0'>Another Section</p>
</div>
</div>
<div class='tile-footer'>
<p class='mb-0'>Tile Footer</p>
</div>
</div>
</div>
</div>