Default
@
@example.com
https://
$
.00
With textarea
<div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon5">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username"></div><div class="input-group mb-5"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon6">@example.com</span> </div></div><label for="basic-url">Your vanity URL</label><div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon7">https://</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="example.com/users/"></div><div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div></div><div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea></div>
Simple Icon
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><svg> ... </svg></span> </div> <input type="text" class="form-control" placeholder="Notification" aria-label="notification" aria-describedby="basic-addon1"></div>========= Right=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Notification" aria-label="notification" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2"><svg> ... </svg></span> </div></div>
Spinning Icon
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3"><svg class="spin"> ... </svg></span> </div> <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners" aria-describedby="basic-addon3"></div>========= Right=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners" aria-describedby="basic-addon4"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon4"><svg class="spin"> ... </svg></span> </div></div>
Dropdown Icon
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div> <input type="text" class="form-control" placeholder="Dropdown" aria-label="dropdown"></div>========= Right=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Dropdown" aria-label="dropdown"> <div class="input-group-append"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div></div>
Checkboxes
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <div class="input-group-text"> <div class="n-chk align-self-end"> <label class="new-control new-checkbox checkbox-danger" style="height: 21px; margin-bottom: 0; margin-right: 0"> <input type="checkbox" class="new-control-input" checked> <span class="new-control-indicator"></span> </label> </div> </div> </div> <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox" ></div>========= Right=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox" aria-describedby="basic-addon1"> <div class="input-group-append"> <div class="input-group-text"> <div class="n-chk align-self-end"> <label class="new-control new-checkbox checkbox-warning" style="height: 21px; margin-bottom: 0; margin-right: 0"> <input type="checkbox" class="new-control-input" checked> <span class="new-control-indicator"></span> </label> </div> </div> </div></div>
Radios
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <div class="input-group-text"> <div class="n-chk align-self-end"> <label class="new-control new-radio radio-info" style="height: 21px; margin-bottom: 0; margin-right: 0"> <input type="radio" class="new-control-input" name="custom-radio-1" checked> <span class="new-control-indicator"></span> </label> </div> </div> </div> <input type="text" class="form-control" placeholder="Radio" aria-label="radio" ></div>========= Right=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Radio" aria-label="Radio"> <div class="input-group-append"> <div class="input-group-text"> <div class="n-chk align-self-end"> <label class="new-control new-radio radio-success" style="height: 21px; margin-bottom: 0; margin-right: 0"> <input type="radio" class="new-control-input" name="custom-radio-1" checked> <span class="new-control-indicator"></span> </label> </div> </div> </div></div>
Switch
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <div class="input-group-text"> <label class="switch s-primary mb-0"> <input type="checkbox" checked=""> <span class="slider"></span> </label> </div> </div> <input type="text" class="form-control" placeholder="Switch" aria-label="switch" ></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Switch" aria-label="switch"> <div class="input-group-append"> <div class="input-group-text"> <label class="switch s-danger mb-0"> <input type="checkbox" checked=""> <span class="slider"></span> </label> </div> </div></div>
Sizing
Sizing
Small
Default
Large
<div class="input-group input-group-sm mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> </div> <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></div><div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Default</span> </div> <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div><div class="input-group input-group-lg mb-4"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Large</span> </div> <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"></div>
Multiple Fields
Multiple inputs
First and last name
<div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">First and last name</span> </div> <input type="text" class="form-control"> <input type="text" class="form-control"></div>
Multiple addons
Left
$0.00
Right
$0.00
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div></div>
Input Group with Action
Buttons with dropdowns
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div></div>
Segmented buttons
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <button type="button" class="btn btn-info">Action</button> <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <svg> ... </svg> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button type="button" class="btn btn-outline-info">Action</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <svg> ... </svg> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:void(0);">Action</a> <a class="dropdown-item" href="javascript:void(0);">Another action</a> <a class="dropdown-item" href="javascript:void(0);">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </div> </div></div>
Button addons
Left
Right
Left
Right
========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <button class="btn btn-primary" type="button">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label=""></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"> <div class="input-group-append"> <button class="btn btn-primary" type="button">Button</button> </div></div>========= LEFT=========<div class="input-group mb-4"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Button</button> <button class="btn btn-outline-primary" type="button">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label=""></div>========= RIGHT=========<div class="input-group mb-4"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"> <div class="input-group-append"> <button class="btn btn-outline-primary" type="button">Button</button> <button class="btn btn-outline-primary" type="button">Button</button> </div></div>
Copyright © 2020 DesignReset, All rights Reserved .
Coded with