Skip to content

Instantly share code, notes, and snippets.

@momin-riyadh
Last active May 15, 2024 07:23
Show Gist options
  • Save momin-riyadh/54388e63c789982c0812a00e9770f3c6 to your computer and use it in GitHub Desktop.
Save momin-riyadh/54388e63c789982c0812a00e9770f3c6 to your computer and use it in GitHub Desktop.
table-view for form preview
<!--**********************************
Tables View
***********************************-->
<div class="container-fluid">
<div class="row">
<div class="col-xxl-8 mx-auto">
<div class="card mb-5">
<div class="card-header">
<div class="card-title">
<h2>Form Preview</h2>
</div>
</div>
<!--begin::Body-->
<div class="card-body py-3">
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Image</span>
<div class="me-7 mb-4">
<div
class="symbol symbol-100px symbol-lg-140px symbol-fixed position-relative">
<img src="assets/media/avatars/150-26.jpg" alt="crm">
</div>
</div>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Name</span>
<span>Momin</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Email</span>
<span>momin@mail.com</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px w-lg-100px w-xxl-150px">Phone Number</span>
<span>018852356856</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Date of Birth</span>
<span>05/15/2024</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Password</span>
<span>#4334$$</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Gender</span>
<span>Male</span>
</div>
<div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Status</span>
<span>Inactive</span>
</div>
<div class="d-flex align-items-start gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Address</span>
<address>House 8, Road 4, Block A, Section 11, Mirpur, Dhaka 1216, Bangladesh
</address>
</div>
<div class="d-flex align-items-start gap-2 bg-light p-3 mb-1">
<span
class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Note</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veniam.</span>
</div>
</div>
<!--begin::Body-->
</div>
</div>
</div>
</div>
<!-- End Tables View-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment