German
Spanish
FrenchDefault
@
@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>
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan