Handcrafted and UI Components, Snippets and Blocks for Bootstrap 5
A beautiful collection of Bootstrap 5 HTML snippets, free to use on your awesome website projects. Solid, fully responsive, battle-tested on a number of different devices.
Getting Started
css
Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS.
<link href="https://demoserver22.icwares.com/designstudiox/UI_Library/css/swizzle_ui.css" rel="stylesheet" >
JS
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following scripts near the end of your pages, right before the closing body tag, to enable them.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Theme 1
<section class="login-pg login-a"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-12 col-md-6"> <div class="login-lft-sec"> <img src="img/logo-aladdin-white.png" class="" alt=""> <div class="login-img-txt"> <h3>Get notified by local <br>customers for yor business</h3> <p>Harness the power of local recognition and <br>customer trust for business.</p> </div> </div> </div> <div class="col-12 col-md-6"> <div class="card-body"> <div class="row"> <div class="col-lg-10 col-xl-7 mx-auto"> <div class="login-form"> <div class="top-login"></div> <div class="mt-4"> <h1>Welcome Back</h1> <p>Enter your mobile number and we will send you a verification code</p> <form class="my-4"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Enter your mobile number</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> <a href="otp.html" class="btn btn-primary-sw w-100">Continue</a> </form> </div> <div class="copy-rt-sec"> <p class="text-center">© Aladinz 2023. All rights reserved</p> </div> </div> </div> </div> </div> </div> </div> </div> </section>
Theme 2
<section class="signin-page login-b"> <div class="container-fluid p-0"> <div class="row"> <div class="col-12 col-md-4 col-lg-6 p-0"> <div class="sign-in-left-sec"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/logo.png"> </div> </div> <div class="col-12 col-md-8 col-lg-6"> <div class="sign-in-right-sec p-4"> <div class="row align-items-center justify-content-center h-100"> <div class="col-sm-8 col-md-8 col-lg-8 col-xxl-6 "> <form> <h1 class="mb-4">Sign in</h1> <div class="form-group mb-3"> <label class="mb-2">Enter Your Mobile Number</label> <div class="phone-form"> <span class="material-symbols-outlined">call</span> <div class="dropdown"> <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> +1 </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">+91</a></li> <li><a class="dropdown-item" href="#">+912</a></li> <li><a class="dropdown-item" href="#">+9123</a></li> </ul> </div> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Mobile Number"> </div> <small class="white pt-2 d-block text-center">We will send you a verification code</small> </div> <a href="otp.html" class="btn btn-primary-sw w-100">Sent OTP</a> </form> </div> </div> </div> </div> </div> </div> </section>
Theme 1
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <section class="login-section signup-a"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-md-12 "> <div class=" d-flex align-items-center justify-content-center loge"> <div class="signin-card head fileflow-signup"> <div class="d-flex justify-content-center"> <img class="login-logo img-fluid pb-3" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/logo.png"> </div> <div class="loge-card loge-form"> <div class="logo-head text-center mt-4"> <h3 class="mb-2">Create your free account</h3> <p class="log-p">100% free. No credit card needed.</p> </div> <a href="https://id.swizzlesuite.com/login/google?servicename=fileflow"> <div class="signin text-center social-login"> <div class="sign-in-with justify-content-center"> <span><img class="img-fluid" src="https://id.swizzlesuite.com/public/img/google.svg"></span>Continue with Google</div> </div> </a> <p class="text-center pt-3">Or Sign Up with your email.</p> <form method="POST" action="https://id.swizzlesuite.com/register-submit?servicename=fileflow" id="createregister" enctype="multipart/form-data" autocomplete="off" novalidate="novalidate"> <input type="hidden" name="_token" value="NcDeAGPYrcUoBF5qTTDmIfJf4d11irugLJLYb76b" autocomplete="off"> <div class="signup-form"> <div class="row"> <input type="hidden" class="form-control " name="servicename" value="fileflow"> <input type="hidden" class="form-control " name="invitationkey" value=""> <input type="hidden" class="form-control " name="type" value=""> <div class="col-lg-12 col-md-12"> <div class="form-sec"> <div class="input-group"> <span class="input-group-text"><span class="material-symbols-outlined">person</span></span> <input type="text" class="form-control" name="first_name" placeholder="Name"> </div> </div> </div> <div class="col-lg-12 col-md-12"> <div class="form-sec"> <div class="input-group"> <span class="input-group-text"><span class="material-symbols-outlined">mail</span></span> <input type="text" class="form-control" placeholder="Email" autocomplete="off" id="email" name="email"> </div> </div> </div> <div class="col-lg-12 col-md-12"> <div class="form-sec password-sec"> <div class="input-group "> <span class="input-group-text"><span class="material-symbols-outlined">lock</span></span> <input type="password" class="form-control checkpassword" name="password" autocomplete="off" id="password" placeholder="Password"> <input type="hidden" id="validpassword" value="" name="validpassword"> <a class="inside-btn eye-icon-point"><span class="material-symbols-outlined">visibility</span></a> </div> </div> </div> <input type="hidden" class="form-control " name="plan"> <div class="col-12"> <p class="text-center"> By clicking Sign Up or Continue with Google you are accepting to our <a href="https://swizzleup.com/termsandconditions" target="_blank">terms and conditions</a>. </p> </div> <div class="d-flex mt-2 justify-content-center"> <div class="col-md-12 col-sm-12"> <button type="button" id="createregisterbutton" onclick="Storeregister();" class="btn btn-primary-sw w-100">Sign Up</button> </div> </div> </div> </div> </form> </div> <div class="footer-loge pt-4 text-center"> <h6> Have a Swizzle account? </h6> <a href="https://id.swizzlesuite.com/login?servicename=fileflow">Sign In Now</a> </div> </div> </div> </div> </div> </div> </section>
Theme 2
<section class="signin-page signup-b"> <div class="container-fluid p-0"> <div class="row"> <div class="col-12 col-md-4 col-lg-6 p-0"> <div class="sign-in-left-sec"> <img src="images/logo-white.png"> </div> </div> <div class="col-12 col-md-8 col-lg-6"> <div class="sign-in-right-sec p-4"> <div class="row align-items-center justify-content-center h-100"> <div class="col-sm-8 col-md-8 col-lg-8 col-xxl-6"> <form> <h1 class="mb-4">Let’s Sign Up</h1> <div class="form-group mb-3"> <label class="mb-2">Please complete your profile</label> <div class=""> <input type="email" class="form-control mb-3" id="exampleFormControlInput1" placeholder="First Name"> <input type="email" class="form-control mb-3" id="exampleFormControlInput1" placeholder="Last Name"> <input type="email" class="form-control mb-3" id="exampleFormControlInput1" placeholder="Email"> </div> </div> <a href="index.html" class="btn btn-primary-sw mt-2 rounded-pill w-100">Save Profile</a> </form> </div> </div> </div> </div> </div> </div> </section>
Forgot Password
Theme 1
<section class="signin-page otp-a"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-md-4 col-lg-6 p-0"> <div class="sign-in-left-sec"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/logo.png"> </div> </div> <div class="col-12 col-md-8 col-lg-6"> <div class="sign-in-right-sec h-100 p-4"> <div class="row align-items-center justify-content-center h-100"> <div class="col-sm-8 col-md-8 col-lg-8 col-xxl-6 "> <form> <h1 class="mb-4">OTP Verification</h1> <div class="form-group mb-3"> <label class="mb-2">Enter the OTP recieved.</label> <div class="otp-sec"> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> </div> </div> <a href="signup.html" class="btn btn-primary-sw mt-2 rounded-pill ">Verify</a> <small class="d-block light mt-2 gray text-center">Didn’t receive code? <a href="" class="ms-1">Resend OTP</a></small> </form> </div> </div> </div> </div> </div> </div> </section>
Theme 2
<section class="login-pg otp-b"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-12 col-md-6"> <div class="login-lft-sec"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/logo.png" class="" alt=""> <div class="login-img-txt"> <h3>Get notified by local <br>customers for yor business</h3> <p>Harness the power of local recognition and <br> customer trust for business.</p> </div> </div> </div> <div class="col-12 col-md-6"> <div class="card-body"> <div class="row"> <div class="col-lg-10 col-xl-7 mx-auto"> <div class="login-form"> <div class="mt-4"> <h1>OTP Verification</h1> <p>Enter the OTP received</p> <form class="my-4"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">OTP Code</label> <div class="otp-input"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> </div> <div class="text-center"> <a href="login.html" class="btn btn-primary-sw mb-3">Verify</a> <a href="" class="link">Resend OTP</a> </div> </form> </div> <div class="copy-rt-sec"> <p>© Aladinz 2023. All rights reserved</p> </div> </div> </div> </div> </div> </div> </div> </div> </section>
Theme 1
<section class="card-area pb-5 card-a"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="single-card card-style-one box-shadow-border"> <div class="card-image"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg" alt="Image" /> </div> <div class="card-content"> <h4 class="card-title"> <a href="javascript:void(0)">Item title is here</a> </h4> <p class="text"> Short description for the ones who look for something new </p> </div> </div> </div> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="single-card card-style-one box-shadow-border"> <div class="card-image"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg" alt="Image" /> </div> <div class="card-content"> <h4 class="card-title"> <a href="javascript:void(0)">Item title is here</a> </h4> <p class="text"> Short description for the ones who look for something new </p> </div> </div> </div> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="single-card card-style-one box-shadow-border" > <div class="card-image"> <img src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg" alt="Image" /> </div> <div class="card-content"> <h4 class="card-title"> <a href="javascript:void(0)">Item title is here</a> </h4> <p class="text"> Short description for the ones who look for something new </p> </div> </div> </div> </div> </div> </section>
Theme 2
<section class="card-b"> <div class="web-card pb-0 mb-3 position-relative overflow-hidden "> <div class="row text-center"> <div class="col-6 mx-auto"> <div class="mt-3"> <h3>Add Your Relatives </h3> <p>Add your close relatives whom you want to book services for.</p> <a data-bs-toggle="modal" data-bs-target="#relationshipmodal" class="btn btn-primary-sw px-5">Add Relatives</a> </div> </div> </div> <img class="card-realtive mt-2" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg" alt=""></div> </section>
Theme 1
<section class="pricing-area pricing-one pricing-tables-a"> <div class="container"> <div class="row justify-content-center"> <div class="col-xxl-6 col-xl-7 col-lg-8"> <div class="section-title text-center"> <h2 class="mb-3 fw-bold">Our Pricing</h2> <p class="text-lg"> Morem ipsum dolor sit amet consectetur, adipisicing elit. Illum quam suscipit distinctio optio, quaerat consequatur labore pariatur rerum. </p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="pricing-style-one box-shadow"> <div class="pricing-header text-center"> <h5 class="sub-title">Basic</h5> <span class="price">$199</span> <h5 class="year">Per year</h5> </div> <div class="pricing-list"> <ul> <li> <span class="material-symbols-outlined">task_alt</span> Carefully crafted components </li> <li> <span class="material-symbols-outlined">task_alt</span> Amazing page examples </li> <li> <span class="material-symbols-outlined">task_alt</span> Super friendly support team </li> <li> <span class="material-symbols-outlined">task_alt</span> Awesome Support </li> </ul> </div> <div class="pricing-btn rounded-buttons text-center"> <a class="btn primary-btn rounded-full" href="javascript:void(0)" > GET STARTED </a> </div> </div> <!-- single pricing --> </div> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="pricing-style-one box-shadow"> <div class="pricing-header text-center"> <h5 class="sub-title">Pro</h5> <span class="price">$399</span> <h5 class="year">Per year</h5> </div> <div class="pricing-list"> <ul> <li> <span class="material-symbols-outlined">task_alt</span> Carefully crafted components </li> <li> <span class="material-symbols-outlined">task_alt</span> Amazing page examples </li> <li> <span class="material-symbols-outlined">task_alt</span> Super friendly support team </li> <li> <span class="material-symbols-outlined">task_alt</span>Awesome Support </li> </ul> </div> <div class="pricing-btn rounded-buttons text-center"> <a class="btn primary-btn rounded-full" href="javascript:void(0)" > GET STARTED </a> </div> </div> <!-- single pricing --> </div> <div class="col-lg-4 col-md-7 col-sm-9"> <div class="pricing-style-one box-shadow"> <div class="pricing-header text-center"> <h5 class="sub-title">Enterprise</h5> <span class="price">$699</span> <h5 class="year">Per year</h5> </div> <div class="pricing-list"> <ul> <li> <span class="material-symbols-outlined">task_alt</span> Carefully crafted components </li> <li> <span class="material-symbols-outlined">task_alt</span> Amazing page examples </li> <li> <span class="material-symbols-outlined">task_alt</span> Super friendly support team </li> <li> <span class="material-symbols-outlined">task_alt</span> Awesome Support </li> </ul> </div> <div class="pricing-btn rounded-buttons text-center"> <a class="btn primary-btn rounded-full" href="#" > GET STARTED </a> </div> </div> </div> </div> </div> </section>
Theme 1
<section class="profile-a"> <div class="container-fluid "> <div class="page"> <div class="row"> <div class="col-12"> <div class="row"> <div class="col-12 col-xl-8 col-xxl-3 mx-auto mb-3"> <div class="card cmpny-dtls"> <div class="cmpny-cover position-relative"> <img class="cmpny-cover-img" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg"> <div class="company-prfl"> <img class="" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg"> </div> </div> <div class="card-body mt-5"> <div class="text-center"> <h1 class="mb-0">Asad Bakery</h1> <span class="agent-type mb-2">Staff</span> <p class="mb-2">+91 48332 07916</p> <p class="join-dt"> <span>Join on:</span> 12 Nov 2023</p> </div> <a href="" class="btn btn-danger-outline m-1 w-100"> <i class="fa-solid fa-trash-can me-2"></i>Delete Account</a> <a href="" class="btn btn-primary-sw m-1 w-100" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> <i class="fa-solid fa-lock me-2"></i> Change Password </a> <div class="cmpny-dtls-txt mt-4"> <span class="d-block mb-2">Email</span> <p>asadbakery@gmail.com</p> <span class="d-block mb-2">Address</span> <p>GXF5+66C, Pattom Kowdiar Rd, Opp Axis Bank, Kowdiar, Thiruvananthapuram, Kerala</p> <span class="d-block mb-2">Pin Code</span> <p>695003</p> </div> </div> </div> </div> <div class="col-md-12 col-xl-12 col-xxl-9 mx-auto mb-3"> <div class="card"> <div class="card-body"> <h4>Edit Profile</h4> <p>You can edit your profile details here</p> <form class="row mt-3"> <div class="col-12 mb-4"> <div class="crte-bsness-top-banner-img p-1"> <img class="rounded-pill" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/dommy-img.jpg" alt=""><a href="" class="img-cnrtl-btn"><i class="fa-solid fa-pen"></i></a> </div> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="inputEmail4" class="form-label">First Name</label> <input type="name" class="form-control" id="inputEmail4"> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="inputEmail4" class="form-label">Last Name</label> <input type="name" class="form-control" id="inputEmail4"> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="inputEmail4" class="form-label">Email</label> <input type="name" class="form-control" id="inputEmail4"> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="inputEmail4" class="form-label">Phone Number</label> <input type="name" class="form-control" id="inputEmail4"> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Address</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <div class="col-md-6 col-lg-6 mb-3"> <label for="inputEmail4" class="form-label">Location</label> <input type="name" class="form-control" id="inputEmail4"> </div> <div class="col-12 text-end mt-3"> <button type="button" class="btn btn-primary-sw">Save Changes</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </section>
Theme 1
<section class="table-a"> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Date</th> <th scope="col">Amount</th> <th scope="col " class="text-end">Action</th> </tr> </thead> <tbody> <tr> <td data-label="Name">Visa - 3412</td> <td data-label="Date">04/01/2016</td> <td data-label="Amount">$1,190</td> <td data-label="Action" class="text-end"> <a class="btn opt-btn" href="" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Delete" data-bs-original-title="" title=""> <span class="material-symbols-outlined">delete</span> </a> </td> </tr> <tr> <td scope="row" data-label="Name">Visa - 6076</td> <td data-label="Date">03/01/2016</td> <td data-label="Amount">$2,443</td> <td data-label="Action" class="text-end"> <a class="btn opt-btn" href="" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Delete" data-bs-original-title="" title=""> <span class="material-symbols-outlined">delete</span> </a> </td> </tr> <tr> <td scope="row" data-label="Name">Corporate AMEX</td> <td data-label="Date">03/01/2016</td> <td data-label="Amount">$1,181</td> <td data-label="Action" class="text-end"> <a class="btn opt-btn" href="" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Delete" data-bs-original-title="" title=""> <span class="material-symbols-outlined">delete</span> </a> </td> </tr> <tr> <td scope="row" data-label="Name">Visa - 3412</td> <td data-label="Date">02/01/2016</td> <td data-label="Amount">$842</td> <td data-label="Action" class="text-end"> <a class="btn opt-btn" href="" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Delete" data-bs-original-title="" title=""> <span class="material-symbols-outlined">delete</span> </a> </td> </tr> </tbody> </table> </section>
Theme 1
<table class="email-a" style="width: 100%; background-color: #Fff; padding: 100px;"> <tr> <td style="padding: 0px;"> <table style="width: 640px; background-color: #fff; margin: auto; padding: 30px;"> <tr> <td> <table style="width: 100%;"> <tr> <td style="width: 100%; text-align: center;"> <img style="width: 120px;" src="https://demoserver22.icwares.com/designstudiox/UI_Library/image/logo.png"> </td> </tr> </table> </td> </tr> <!--detail table--> <tr> <td> <table style="width: 100%;" > <tr style=" border-collapse: collapse;"> <td class="deatils" style=" padding: 10px; color: #000000; font-weight: 400; font-size: 18px;">Hi , Aladinz Admin</td> </tr> <tr style=" border-collapse: collapse;"> <td class="deatils" style=" padding: 10px; font-weight: 300; font-size: 15px;">An Contact Inquiry has been submitted by <b style="font-size: 17px;">David John</b></td> </tr> <tr> <td class="contact-body"> <table class="info content-blocker" style="border: 1px solid #cdcdcd; width: 100%; padding: 20px;border-radius: 10px; "> <tr> <td class="items" style="width: 55%;"> <b style="color: #646161;">Agent Registration Enquiry</b> </td> <td> <p style="font-size: 15px; color: #333; font-weight: 500; line-height:0px;">Perk Up Café</p> </td> </tr> <tr> <td class="items" style="width: 55%;"> <b style="color: #646161;">Name</b> </td> <td> <p style="font-size: 15px; color: #333; font-weight: 500; line-height:0px;">David John</p> </td> </tr> <tr> <td class="items" style="width: 55%;"> <b style="color: #646161;">Email</b> </td> <td> <p style="font-size: 15px; color: #333; font-weight: 500; line-height:0px;">davidjohn@gmail.com</p> </td> </tr> <tr> <td class="items" style="width: 55%;"> <b style="color: #646161;">Phone</b> </td> <td> <p style="font-size: 15px; color: #333; font-weight: 500; line-height:0px;">010 1 718 222 2222</p> </td> </tr> <tr> <td class="items" style="width: 55%;border-bottom: none;vertical-align: baseline;"> <b style="color: #646161;">Comments</b></span> </td> </tr> <tr> <td colspan="2" style="border-bottom: none;"> <p style="font-size: 15px; color: #333; font-weight: 500; line-height:20px;margin: 0px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, rerum reiciendis praesentium doloremque quidem alias eligendi dolores voluptatum ratione commodi autem reprehenderit odit, assumenda nihil optio est magnam explicabo cum.</p> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table style="padding: 10px 0px 0px 0px; width: 100%;"> <tr> <td style="width: 60%;"> <p style="font-size: 14px; color: #333; font-weight: 300; line-height:0px;">Thank You,</p> <strong style="font-size: 16px;">Team Aladinz</strong> </td> </tr> </table> </td> </tr> <!--detail table end--> </table> </td> </tr> <tr> <td style="padding: 0px;"> <table style="width: 640px; margin-top:30px; margin:auto; font-weight: 300; padding: 20px 30px 10px 30px; color: #fff;"> <tr > <td style="background-color:#333; padding: 29px 5px 5px 5px;"> <p class="copywrite" style="font-size: 12px; color: #646161; font-weight: 300; line-height:0px; text-align: center; padding: 0px 0px 0px 0px;">This email was sent to davidjohn@gmail.com.</p> <p class="copywrite" style="font-size: 12px; color: #646161; font-weight: 300; line-height:0px; text-align: center; padding: 10px 0px 0px 0px;">You got this because you are registered user at Aladinz</p> <p class="copywrite" style="font-size: 12px; color: #646161; font-weight: 300; line-height:0px; text-align:center !important; padding: 10px 0px 10px 0px;"> Copyright © Aladinz 2023. All rights reserved.</p> </td> </tr> </table> </td> </tr> </table>
Theme 1
<form > <div class="mb-5"> <label class="form-label" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Your email address"> </div> <div class="mb-5"> <label class="form-label" for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" autocomplete="current-password"> </div> <div class="mb-5"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="check_example" id="check_example"> <label class="form-check-label" for="check_example"> Keep me logged in </label> </div> </div> <div> <a href="#" class="btn btn-primary-sw w-full"> Sign in </a> </div> </form>
Theme 2
<div class=""> <label class="form-label" for="input_file">Choose file</label> <input type="file" class="form-control" id="input_file" placeholder="Your email"> </div>
Theme 3
<form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
Theme 1
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#"> <i class="bi bi-chevron-left"></i> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"> <a class="page-link" href="#"> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </nav>
Theme 1
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#"> <i class="bi bi-chevron-left"></i> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><span class="page-link" href="#">...</span></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item"><a class="page-link" href="#">10</a></li> <li class="page-item"> <a class="page-link" href="#"> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </nav>
Theme 1
Theme 1
<div class="analytics-a"> <div class="row"> <div class="col-12 col-lg-4 mb-3"> <div class="card h-100"> <div class="card-body dash-counts"> <p>Users</p> <h5>149</h5> <span>13 new users this month</span><br> <a href="">View all users <span class="material-symbols-outlined">arrow_right_alt</span></a> </div> </div> </div> <div class="col-12 col-lg-4 mb-3"> <div class="card h-100"> <div class="card-body dash-counts"> <p>Agents</p> <h5>44</h5> <span>8 new agents this month</span><br> <a href="">View all agents <span class="material-symbols-outlined">arrow_right_alt</span></a> </div> </div> </div> <div class="col-12 col-lg-4 mb-3"> <div class="card h-100"> <div class="card-body dash-counts"> <p>Total Inquiries</p> <h5>33</h5> <span>12 new inquiries this month</span><br> <a href="">View all inquiries <span class="material-symbols-outlined">arrow_right_alt</span></a> </div> </div> </div> </div> </div>