Form component - 5
COPY
<body id="webuiHtml" class="bg-dark">
<section class="p-3">
<div class="bg-white h-100vn w-100 shadow-sm p-4 p-md-5 border rounded-111">
<div class="border-bottom">
<h3 class="text-primary fs-4">Profile Information</h3>
<p class="text-muted">Use your personal information..</p>
</div>
<ul class="nav-form nav border my-3 rounded-1 shadow-sm bg-light" id="nav-tab" role="tablist">
<li class="border-end">
<a href="#" class="nav-link active p-3" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
<h4 class="fs-6">Personal Information</h4>
<p class="fs-7 m-0">Update your personal informations</p>
</a>
</li>
<li class="border-end">
<a href="#" class="nav-link p-3" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="true">
<h4 class="fs-6">Contact Information</h4>
<p class="fs-7 m-0">Update your contact informations</p>
</a>
</li>
<li>
<a href="#" class="nav-link p-3" id="nav-company-info-tab" data-bs-toggle="tab" data-bs-target="#nav-company-info" role="tab" aria-controls="nav-nav-company-info" aria-selected="true">
<h4 class="fs-6">Company Information</h4>
<p class="fs-7 m-0">Update your company informations</p>
</a>
</li>
</ul>
<div class="tab-content border rounded-bottom p-3 p-md-5 h-100v bg-light" id="nav-tabContent">
<!-- Start personal information tab -->
<div class="tab-pane fade show active px-2" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<div class="row">
<div class="col-md-6 mb-4">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col-md-6 mb-4">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Active email">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Bio</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">Photo</label>
<div class="d-flex text-muted">
<div>
<i class="bi bi-person-bounding-box fs-1 text-primary text-opacity-50"></i>
</div>
<div class="ms-4">
<input type="file" value="" class="mt-3">
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<label for="zip" class="form-label">Cover photo</label>
<div class="flex justify-center rounded border text-muted banner-upload bg-white">
<div class="text-center p-3">
<i class="bi bi-image-fill fs-1 text-primary text-opacity-50"></i>
<div class="mt-3 flex text-sm">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-primary fw-bold file-upload">Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="visually-hidden">
</label>
<span class="pl-1">or drag and drop</span>
</div>
<p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-3 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<input type="submit" class="btn btn-danger btn-lg shadow-sm ms-2" value="Close">
</div>
</div>
<!-- End personal information tab -->
<!-- Start contact information tab -->
<div class="tab-pane fade px-2" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<div class="row">
<div class="col-md-12 mb-4">
<label for="streetAddress" class="form-label">Street address</label>
<input type="text" class="form-control" id="streetAddress" placeholder="Street address">
</div>
<div class="col-md-4 mb-4">
<label for="country" class="form-label">Country</label>
<select class="form-select">
<option>Select Country</option>
</select>
</div>
<div class="col-md-4 mb-4">
<label for="stateProvince" class="form-label">State / Province</label>
<input type="text" class="form-control" id="stateProvince" placeholder="State / Province">
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">ZIP / Postal code</label>
<input type="text" class="form-control" id="zip" placeholder="ZIP / Postal code">
</div>
</div>
<div class="text-center mt-3 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<input type="submit" class="btn btn-danger btn-lg shadow-sm ms-2" value="Close">
</div>
</div>
<!-- End contact information tab -->
<!-- Start company information tab -->
<div class="tab-pane fade px-2" id="nav-company-info" role="tabpanel" aria-labelledby="nav-company-info-tab" tabindex="0">
<div class="row">
<div class="col-md-6 mb-4">
<label for="companyName" class="form-label">Company name</label>
<input type="text" class="form-control" id="companyName" placeholder="Company name">
</div>
<div class="col-md-6 mb-4">
<label for="companyEmail" class="form-label">Company Eamil</label>
<input type="text" class="form-control" id="companyEmail" placeholder="Company Email">
</div>
<div class="col-md-12 mb-4">
<label for="companyAddress" class="form-label">Company Address</label>
<input type="text" class="form-control" id="companyAddress" placeholder="Company Address">
</div>
<div class="col-md-12 mb-4 mt-3">
<label for="zip" class="form-label">By Email</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Quis nostrud exercitation ullamco laboris nisi ut
</label>
</div>
</div>
</div>
<div class="text-center mt-3 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<input type="submit" class="btn btn-danger btn-lg shadow-sm ms-2" value="Close">
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0060ce;
--bs-primary-rgb: 0, 96, 206;
--bs-secondary: #1f2937;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.h-100vn {
min-height: calc(100vh - 100px) !important;
}
.form-control,
.form-select {
font-size: 0.85rem;
padding: 8px 15px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: #0d6efd;
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: #0060eb;
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.banner-upload {
color: rgb(0 0 0 / 50%) !important;
}
.file-upload {
cursor: pointer;
}
.nav-form .nav-link {
text-decoration: none;
color: #1f2937;
}
.nav-form .nav-link.active,
.nav-form .nav-link:hover {
background: var(--bs-primary);
color: #ffffff !important;
padding-left: 10px;
border-radius: 3px;
}
.nav-form .nav-link.active,
.nav-form .nav-link:hover {
color: #ffffff !important;
}
.fs-7 {
font-size: .8rem;
}
Form component - 4
COPY
<body id="webuiHtml" class="bg-dark">
<section class="p-3">
<div class="bg-white h-100vn w-100 shadow-sm p-4 p-md-5 border rounded-111">
<div class="border-bottom">
<h3 class="text-primary fs-4">Profile Information</h3>
<p class="text-muted">Use your personal information..</p>
</div>
<div class="row my-3 my-md-5 justify-content-center">
<div class="col-md-3">
<ul class="nav-form list-unstyled border p-3 rounded-1 shadow-sm bg-light">
<li class="border-bottom py-3 active">
<a href="#">
<h4 class="fs-6">Personal Information</h4>
<p class="fs-7 m-0">Update your personal informations</p>
</a>
</li>
<li class="border-bottom py-3">
<a href="#">
<h4 class="fs-6">Contact Information</h4>
<p class="fs-7 m-0">Update your contact informations</p>
</a>
</li>
<li class="py-3">
<a href="#">
<h4 class="fs-6">Company Information</h4>
<p class="fs-7 m-0">Update your company informations</p>
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6 mb-4">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col-md-6 mb-4">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
<div class="col-md-8 mb-4">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Active email">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Bio</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">Photo</label>
<div class="d-flex text-muted">
<div>
<i class="bi bi-person-bounding-box fs-1 text-primary text-opacity-50"></i>
</div>
<div class="ms-4">
<input type="file" value="" class="mt-3">
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<label for="zip" class="form-label">Cover photo</label>
<div class="flex justify-center rounded border text-muted banner-upload">
<div class="text-center p-3">
<i class="bi bi-image-fill fs-1 text-primary text-opacity-50"></i>
<div class="mt-3 flex text-sm">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-primary fw-bold file-upload">Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="visually-hidden">
</label>
<span class="pl-1">or drag and drop</span>
</div>
<p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-5 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<input type="submit" class="btn btn-danger btn-lg shadow-sm ms-2" value="Close">
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0060ce;
--bs-primary-rgb: 0, 96, 206;
--bs-secondary: #1f2937;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.h-100vn {
min-height: calc(100vh - 100px) !important;
}
.form-control,
.form-select {
font-size: 0.85rem;
padding: 8px 15px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: #0d6efd;
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: #0060eb;
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.banner-upload {
color: rgb(0 0 0 / 50%) !important;
}
.file-upload {
cursor: pointer;
}
.nav-form li a {
text-decoration: none;
color: #1f2937;
}
.nav-form li.active,
.nav-form li:hover {
background: var(--bs-primary);
color: #ffffff !important;
padding-left: 10px;
border-radius: 3px;
}
.nav-form li.active a,
.nav-form li:hover a {
color: #ffffff !important;
}
.fs-7 {
font-size: .8rem;
}
Form component - 3
COPY
<body id="webuiHtml" class="bg-light">
<section class="my-5 px-3">
<div class="row g-0 justify-content-center">
<div class="col-md-4">
<div class="bg-white h-100vn w-100 shadow-sm p-2 p-md-4 border rounded-2">
<div class="border-bottom mb-3 mb-md-5">
<h3 class="fs-4">Feedback</h3>
<p class="text-muted">Share your feedback with us..</p>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col-md-6 mb-4">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Active email">
</div>
<div class="col-md-12">
<label for="email" class="form-label">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
<div class="mt-4 bg-light p-2">
<input type="submit" class="btn btn-dark btn-nl shadow-sm" value="Send">
<input type="button" class="btn btn-danger btn-nl shadow-sm ms-2" value="Cancel">
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #ce004f;
--bs-primary-rgb: 0, 96, 206;
--bs-secondary: #1f2937;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.h-100vn {
min-height: calc(100vh - 100px) !important;
}
.form-control,
.form-select {
font-size: 0.85rem;
padding: 8px 15px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-dark-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: var(--bs-primary);
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
.btn-nl {
font-size: 0.9375rem;
padding: 10px 20px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.banner-upload {
color: rgb(0 0 0 / 50%) !important;
}
.file-upload {
cursor: pointer;
}
Form component - 1
COPY
<body id="webuiHtml" class="bg-primary">
<section class="my-5 px-3">
<div class="row g-0 justify-content-center">
<div class="col-md-11">
<div class="bg-white h-100vn w-100 shadow-sm p-4 p-md-5 border rounded-4">
<div class="border-bottom mx-3">
<h3 class="text-primary fs-4">User Information</h3>
<p class="text-muted">Use your personal information..</p>
</div>
<div class="row my-5 justify-content-center">
<div class="col-md-8 px-4 px-md-0">
<div class="border-bottom p-2 mb-4 bg-light">
<h5 class="fs-5 m-0">Personal Information</h5>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col-md-6 mb-4">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Active email">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Profile</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-md-12 mb-4">
<label for="streetAddress" class="form-label">Street address</label>
<input type="text" class="form-control" id="streetAddress" placeholder="Street address">
</div>
<div class="col-md-4 mb-4">
<label for="country" class="form-label">Country</label>
<select class="form-select">
<option>Select Country</option>
</select>
</div>
<div class="col-md-4 mb-4">
<label for="stateProvince" class="form-label">State / Province</label>
<input type="text" class="form-control" id="stateProvince" placeholder="State / Province">
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">ZIP / Postal code</label>
<input type="text" class="form-control" id="zip" placeholder="ZIP / Postal code">
</div>
<div class="col-md-12 mb-4">
<label for="zip" class="form-label">Cover photo</label>
<div class="flex justify-center rounded border text-muted banner-upload">
<div class="text-center p-3">
<i class="bi bi-image-fill fs-1 text-primary text-opacity-50"></i>
<div class="mt-3 flex text-sm">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-primary fw-bold file-upload">Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="visually-hidden">
</label>
<span class="pl-1">or drag and drop</span>
</div>
<p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">Photo</label>
<div class="d-flex text-muted">
<div>
<i class="bi bi-person-bounding-box fs-1 text-primary text-opacity-50"></i>
</div>
<div class="ms-4">
<input type="file" value="" class="mt-3">
</div>
</div>
</div>
<div class="border-bottom p-2 mt-4 mb-4 bg-light">
<h5 class="fs-5 m-0">Company Information</h5>
</div>
<div class="col-md-6 mb-4">
<label for="companyName" class="form-label">Company name</label>
<input type="text" class="form-control" id="companyName" placeholder="Company name">
</div>
<div class="col-md-6 mb-4">
<label for="companyEmail" class="form-label">Company Eamil</label>
<input type="text" class="form-control" id="companyEmail" placeholder="Company Email">
</div>
<div class="col-md-12 mb-4">
<label for="companyAddress" class="form-label">Company Address</label>
<input type="text" class="form-control" id="companyAddress" placeholder="Company Address">
</div>
<div class="col-md-12 mb-4 mt-3">
<label for="zip" class="form-label">By Email</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Quis nostrud exercitation ullamco laboris nisi ut
</label>
</div>
</div>
</div>
<div class="text-center mt-5 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<input type="submit" class="btn btn-danger btn-lg shadow-sm ms-2" value="Cancel">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0060ce;
--bs-primary-rgb: 0, 96, 206;
--bs-secondary: #1f2937;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.h-100vn {
min-height: calc(100vh - 100px) !important;
}
.form-control,
.form-select {
font-size: 0.85rem;
padding: 8px 15px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: #0d6efd;
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: #0060eb;
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.banner-upload {
color: rgb(0 0 0 / 50%) !important;
}
.file-upload {
cursor: pointer;
}
Form component - 2
COPY
<section class="">
<div class="container-fluid">
<div class="p-5">
<div class="row justify-content-center">
<div class="col-md-12 px-3">
<div class="border-bottom bg-light p-4 mb-3 mb-md-5">
<h3 class="text-primary fs-4">Personal Information</h3>
<p class="text-muted m-0">Use your personal information..</p>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="First name">
</div>
<div class="col-md-6 mb-4">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last name">
</div>
<div class="col-md-8 mb-4">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Active email">
</div>
<div class="col-md-12 mb-4">
<label for="email" class="form-label">Profile</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-md-12 mb-4">
<label for="streetAddress" class="form-label">Street address</label>
<input type="text" class="form-control" id="streetAddress" placeholder="Street address">
</div>
<div class="col-md-4 mb-4">
<label for="country" class="form-label">Country</label>
<select class="form-select">
<option>Select Country</option>
</select>
</div>
<div class="col-md-4 mb-4">
<label for="stateProvince" class="form-label">State / Province</label>
<input type="text" class="form-control" id="stateProvince" placeholder="State / Province">
</div>
<div class="col-md-4 mb-4">
<label for="zip" class="form-label">ZIP / Postal code</label>
<input type="text" class="form-control" id="zip" placeholder="ZIP / Postal code">
</div>
<div class="col-md-4 mb-5">
<label for="zip" class="form-label">Photo</label>
<div class="d-flex text-muted">
<div>
<i class="bi bi-person-bounding-box fs-1 text-primary text-opacity-25"></i>
</div>
<div class="ms-4">
<input type="file" value="" class="mt-3">
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<label for="zip" class="form-label">Cover photo</label>
<div class="flex justify-center rounded border text-muted banner-upload bg-light">
<div class="text-center p-3">
<i class="bi bi-image-fill fs-1 text-primary text-opacity-25"></i>
<div class="mt-2 flex text-sm">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-primary fw-bold file-upload">Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="visually-hidden">
</label>
<span class="pl-1">or drag and drop</span>
</div>
<p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<label for="zip" class="form-label">By Email</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Quis nostrud exercitation ullamco laboris nisi ut
</label>
</div>
</div>
</div>
<div class="text-center my-5 bg-light p-2">
<input type="submit" class="btn btn-primary btn-lg shadow-sm" value="Submit">
<a href="#" class="btn btn-link text-danger text-decoration-none">Cancel</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1f2937;
--bs-primary-rgb: 31, 41, 55;
--bs-secondary: #0060ce;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.h-100vn {
min-height: calc(100vh - 100px) !important;
}
.form-control,
.form-select {
font-size: 0.85rem;
padding: 8px 12px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
background: #f8f9fa;
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: #0060eb;
box-shadow: 0 0 0 0.2rem rgb(86 86 86 / 15%);
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-primary);
border-color: rgb(var(--bs-primary-rgb), 0.8);
}
.banner-upload {
color: rgb(0 0 0 / 50%) !important;
}
.file-upload {
cursor: pointer;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io