Bootstrap Forms - Soft UI Dashboard
Discover 1 Bootstrap Forms available in Soft UI Dashboard
Profile Form
Component from
Soft UI Dashboard
Builder
<div class="card draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h6 class="mb-0">Edit profile </h6>
</div>
<div class="col-4 text-end">
<a href="#!" class="btn btn-sm bg-gradient-primary mb-0">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
</div>
</div>
</form>
</div>
</div>