Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
Noah Blake updated the status of Client Onboarding
30 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Basic Elements
Examples
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Elements on BootstrapInput Textfield Type
<input type="text" id="simpleinput" class="form-control">
<div>
<label for="labelInputt1" class="form-label">Email address</label>
<input type="email" class="form-control" id="labelInputt1" placeholder="name@example.com">
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="name">
<label for="floatingInput">Name</label>
</div>
<div class="app-search">
<input type="search" class="form-control" placeholder="Search for something...">
<i data-lucide="search" class="app-search-icon text-muted"></i>
</div>
<input type="text" id="validInput" class="form-control is-valid">
<input type="text" id="inValidationInput" class="form-control is-valid">
<input type="text" id="example-rounded" class="form-control rounded-pill" placeholder="placeholder">
<input type="text" id="example-placeholder" class="form-control" placeholder="placeholder">
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
<input type="text" id="example-readonly" class="form-control" readonly value="Readonly value">
<input type="text" class="form-control" id="example-disable" disabled value="Disabled value">
<input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
A block of help text that breaks onto a new line and may extend beyond one line.
<input type="text" id="example-helping" class="form-control" placeholder="Helping text">
<small class="form-text text-muted">...</small>
<select class="form-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="app-search">
<select class="form-select form-control" id="discount">
<option selected>Choose Discount</option>
<option value="No Discount">No Discount</option>
<option value="Flat Discount">Flat Discount</option>
<option value="Percentage Discount">Percentage Discount</option>
</select>
<i data-lucide="percent" class="app-search-icon text-muted"></i>
</div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Input Group
@
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
@example.com
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
$
.00
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
@
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
With textarea
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
https://example.com/users/
<div class="input-group">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
@
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="input-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
<button class="btn btn-dark" type="button">Button</button>
</div>
<input class="form-control" type="file" id="inputGroupFile04">
<input class="form-control" type="file" id="formFileMultiple01" multiple>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
Floating labels
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputEmail" placeholder="name@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
<input type="text" class="form-control form-control-sm" placeholder=".input-sm">
<input type="text" class="form-control" placeholder="Normal">
<input type="text" class="form-control form-control-lg" placeholder=".input-lg">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
<select class="form-select form-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Checks, Radios and Switches
Sizes
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="checkDefault">
<label class="form-check-label" for="checkDefault">Default Checkbox</label>
</div>
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input form-check-input-light" id="checkLight">
<label class="form-check-label" for="checkLight">Light Checkbox</label>
</div>
<div class="mb-2">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInline1" checked>
<label class="form-check-label" for="checkInline1">Inline 1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInline2">
<label class="form-check-label" for="checkInline2">Inline 2</label>
</div>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
<label class="form-check-label" for="checkIndeterminate">
Disabled indeterminate checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
<label class="form-check-label" for="checkCheckedDisabled">
Disabled checked checkbox
</label>
</div>
<div class="form-check fs-lg mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkSize1" checked>
<label class="form-check-label fs-base" for="checkSize1">Default Checkbox</label>
</div>
<div class="form-check form-check-secondary fs-xxl mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkSize2" checked>
<label class="form-check-label fs-base" for="checkSize2">Default Checkbox</label>
</div>
Sizes
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="gridRadio" id="radio1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="gridRadio" id="radio2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="mb-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
<label class="form-check-label" for="inlineRadio1">Inline 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Inline 2</label>
</div>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="disabledRadioOptions" id="inlineRadio3" value="option3" checked disabled>
<label class="form-check-label" for="inlineRadio3">Disabled Checked Radio</label>
</div>
<div class="mb-2">
<div class="form-check fs-lg form-check-inline">
<input class="form-check-input" type="radio" name="paymentMethod" id="radioCash" value="cash" checked>
<label class="form-check-label fs-base" for="radioCash">Cash</label>
</div>
<div class="form-check fs-lg form-check-inline">
<input class="form-check-input" type="radio" name="paymentMethod" id="radioCard" value="card">
<label class="form-check-label fs-base" for="radioCard">Card</label>
</div>
</div>
<div class="mb-2">
<div class="form-check fs-xxl form-check-inline">
<input class="form-check-input" type="radio" name="deliveryOption" id="radioPickup" value="pickup" checked>
<label class="form-check-label fs-base" for="radioPickup">Pickup</label>
</div>
<div class="form-check fs-xxl form-check-inline">
<input class="form-check-input" type="radio" name="deliveryOption" id="radioHome" value="home">
<label class="form-check-label fs-base" for="radioHome">Home Delivery</label>
</div>
</div>
Sizes
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="switch1" checked>
<label class="form-check-label" for="switch1">Enabled Switch</label>
</div>
<div class="form-check form-switch form-check-secondary fs-xxl mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkboxSize20" checked>
<label class="form-check-label fs-base" for="checkboxSize20">I'm 20px Switch</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Reverse checkbox</label>
</div>
<div class="form-check form-check-success">
<input type="checkbox" class="form-check-input" id="checkSuccess" checked>
<label class="form-check-label" for="checkSuccess">Success</label>
</div>
<div class="form-check form-check-success">
<input type="radio" class="form-check-input" name="radioColor" id="radioSuccess" checked>
<label class="form-check-label" for="radioSuccess">Success</label>
</div>
<div class="form-check form-check-info form-switch mb-2">
<input type="checkbox" class="form-check-input" id="switchInfo" checked>
<label class="form-check-label" for="switchInfo">Info</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Single Toggle</label>
</div>
<div class="btn-group" role="group" aria-label="Checkbox toggle group">
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">One</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Two</label>
<input type="checkbox" class="btn-check" id="btncheck4" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck4">Three</label>
</div>
<div class="btn-group" role="group" aria-label="Radio toggle group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="btnradio1">Left</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio2">Middle</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio3">Right</label>
</div>