Account

Account Side Navbar

<div class="col-lg-3 col-md-4 col-12 ">
                                                            <nav class="navbar navbar-expand-md navbar-light dashboard-nav mb-3 mb-lg-0 ">
                                                               <a class="d-xl-none d-lg-none d-md-none text-inherit  fw-bold" href="#">Menu</a>
                                                               <button class="navbar-toggler d-md-none icon-shape icon-sm rounded bg-primary text-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                                                               <span class="fas fa-bars"></span>
                                                               </button>
                                                               <div class="collapse navbar-collapse" id="navbarNavDropdown">
                                                                  <div class="navbar-nav flex-column w-100 ">
                                                                     <div class="border-bottom p-4 d-flex justify-content-between text-reset">
                                                                        <div class="d-flex align-items-center">
                                                                           <img src="../assets/images/avatar-1.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ms-3">
                                                                              <h5 class="mb-0 ">Leslie Alexander</h5>
                                                                              <small>Free Member</small>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                     <div class="p-4">
                                                                        <span class="heading ">Account</span>
                                                                        <ul class="list-unstyled mb-4 mt-2">
                                                                           <li class="nav-item active">
                                                                              <a class="nav-link" href="dashboard-profile.html">My Profile</a>
                                                                           </li>
                                                                           <li class="nav-item ">
                                                                              <a class="nav-link" href="dashboard-subscription.html">Subscriptions</a>
                                                                           </li>
                                                                           <li class="nav-item ">
                                                                              <a class="nav-link" href="dashboard-security.html">Security</a>
                                                                           </li>
                                                                           <li class="nav-item ">
                                                                              <a class="nav-link" href="dashboard-notifications.html">Notifications</a>
                                                                           </li>
                                                                           <li class="nav-item ">
                                                                              <a class="nav-link" href="dashboard-user.html">Users</a>
                                                                           </li>
                                                                        </ul>
                                                                        <span class="heading border-top pt-4 d-block">Billing</span>
                                                                        <ul class="list-unstyled mb-0">
                                                                           <li class="nav-item ">
                                                                              <a class="nav-link" href="dashboard-payment-plan.html">Plan &amp; Payment</a>
                                                                           </li>
                                                                           <li class="nav-item">
                                                                              <a class="nav-link" href="dashboard-payment-history.html">Payment History</a>
                                                                           </li>
                                                                        </ul>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </nav>
                                                         </div>

Payment Method

Payment Methods

Add New 
<div class="card mb-4">
<div class="card-header bg-white p-4 d-flex justify-content-between align-items-center">
	<h4 class="mb-0">Payment Methods</h4>
	<a href="#" class="btn btn-primary btn-sm">Add New</a>
</div>
<div class="card-body p-4">
	<ul class="list-group list-group-flush">
		<li class="list-group-item px-0 pb-3 pt-0">
			<div class="d-flex justify-content-between">
				<div class="d-flex">
					<img src="../assets/images/logo-visa.svg" alt="" class="me-3" />
					<div>
						<h5 class="mb-0">Visa ending in 1234</h5>
						<p class="mb-0 font-13">Expires in 10/2024</p>
					</div>
				</div>
				<div class="d-flex flex-row align-items-center">
					<span class="badge bg-success me-lg-4 me-0">Primary</span>
					<div class="dropdown">
						<a class="text-muted text-decoration-none" href="#" role="button" id="paymentDropdown1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<i class="fe fe-more-vertical"></i>
						</a>

						<div class="dropdown-menu" aria-labelledby="paymentDropdown1">
							<a class="dropdown-item" href="#">Edit</a>
							<a class="dropdown-item" href="#">Remove</a>
							<a class="dropdown-item" href="#">Make it Primary</a>
						</div>
					</div>
				</div>
			</div>
		</li>
		<li class="list-group-item px-0 py-3">
			<div class="d-flex justify-content-between">
				<div class="d-flex">
					<img src="../assets/images/logo-mastercard.svg" alt="" class="me-3" />
					<div>
						<h5 class="mb-0">Mastercard ending in 1234</h5>
						<p class="mb-0 font-13">Expires in 03/2022</p>
					</div>
				</div>

				<div class="dropdown">
					<a class="text-muted text-decoration-none" href="#" role="button" id="paymentDropdown2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fe fe-more-vertical"></i>
					</a>

					<div class="dropdown-menu" aria-labelledby="paymentDropdown2">
						<a class="dropdown-item" href="#">Edit</a>
						<a class="dropdown-item" href="#">Remove</a>
						<a class="dropdown-item" href="#">Make it Primary</a>
					</div>
				</div>
			</div>
		</li>
		<li class="list-group-item px-0 py-3">
			<div class="d-flex justify-content-between">
				<div class="d-flex">
					<img src="../assets/images/logo-discover.svg" alt="" class="me-3" />
					<div>
						<h5 class="mb-0">Discover ending in 1234</h5>
						<p class="mb-0 font-13">Expires in 07/2024</p>
					</div>
				</div>

				<div class="dropdown">
					<a class="text-muted text-decoration-none" href="#" role="button" id="paymentDropdown3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fe fe-more-vertical"></i>
					</a>

					<div class="dropdown-menu" aria-labelledby="paymentDropdown3">
						<a class="dropdown-item" href="#">Edit</a>
						<a class="dropdown-item" href="#">Remove</a>
						<a class="dropdown-item" href="#">Make it Primary</a>
					</div>
				</div>
			</div>
		</li>
		<li class="list-group-item px-0 py-3">
			<div class="d-flex justify-content-between">
				<div class="d-flex">
					<img src="../assets/images/logo-americanexpress.svg" alt="" class="me-3" />
					<div>
						<h5 class="mb-0">American Express ending in 1234</h5>
						<p class="mb-0 font-13">Expires in 12/2024</p>
					</div>
				</div>

				<div class="dropdown">
					<a class="text-muted text-decoration-none" href="#" role="button" id="paymentDropdown4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fe fe-more-vertical"></i>
					</a>

					<div class="dropdown-menu" aria-labelledby="paymentDropdown4">
						<a class="dropdown-item" href="#">Edit</a>
						<a class="dropdown-item" href="#">Remove</a>
						<a class="dropdown-item" href="#">Make it Primary</a>
					</div>
				</div>
			</div>
		</li>
		<li class="list-group-item px-0 pt-3">
			<div class="d-flex justify-content-between">
				<div class="d-flex">
					<img src="../assets/images/logo-paypal-second.svg" alt="" class="me-3" />
					<div>
						<h5 class="mb-0">Paypal Express ending in 1234</h5>
						<p class="mb-0 font-13">Expires in 10/2024</p>
					</div>
				</div>

				<div class="dropdown">
					<a class="text-muted text-decoration-none" href="#" role="button" id="paymentDropdown5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fe fe-more-vertical"></i>
					</a>

					<div class="dropdown-menu" aria-labelledby="paymentDropdown5">
						<a class="dropdown-item" href="#">Edit</a>
						<a class="dropdown-item" href="#">Remove</a>
						<a class="dropdown-item" href="#">Make it Primary</a>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>
</div>

Two Factor Authentication

Two-factor authentication

Two-factor authentication is not enabled yet.

Two-factor authentication add an additional layer of security to your account by requiring more than just a password to log in.

Enable two-factor authentication 
<div class="card rounded-3 mb-4 ">
                                                            <div class="card-header bg-white p-4">
                                                               <h3 class="mb-0 h4">Two-factor authentication</h3>
                                                            </div>
                                                            <div class="card-body p-6 text-center">
                                                               <i class="fe fe-lock font-24 text-primary mb-3 d-block"></i>
                                                               <h3>Two-factor authentication is not enabled yet.</h3>
                                                               <p class="mb-4">Two-factor authentication add an additional layer of security to your account by requiring more than just a password to log in.</p>
                                                               <a href="#" class="btn btn-primary btn-sm">Enable two-factor authentication</a>
                                                            </div>
                                                         </div>

Marketing & Product

Marketing & Product

  • Sales & Promotions

    We only notify you for significant promotions.

  • Product Updates

    Major changes in our product offering.

  • Newsletter

    Updates on what’s going on here at Coach and latest release.

  • Security Alert

    Updates on what’s going on here at Coach and latest release.

  • Events and offers

    Updates on what’s going on here at Coach and latest release.

<div class="card rounded-3 mb-4 ">
                                                            <div class="card-header bg-white p-4">
                                                               <h3 class="mb-0 h4">Marketing &amp; Product</h3>
                                                            </div>
                                                            <div class="card-body p-4">
                                                               <ul class="list-group list-group-flush">
                                                                  <li class="list-group-item px-0 pt-0 pb-3">
                                                                     <div class="d-flex justify-content-between">
                                                                        <div class="">
                                                                           <h5 class="mb-1">Sales &amp; Promotions</h5>
                                                                           <p class="mb-0">We only notify you for significant promotions.</p>
                                                                        </div>
                                                                        <div>
                                                                           <div class="form-check form-switch">
                                                                              <input type="checkbox" class="form-check-input" id="salesSwitch" checked="">
                                                                              <label class="form-check-label" for="salesSwitch"></label>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item px-0 py-3">
                                                                     <div class="d-flex justify-content-between">
                                                                        <div class="">
                                                                           <h5 class="mb-1">Product Updates</h5>
                                                                           <p class="mb-0">Major changes in our product offering.</p>
                                                                        </div>
                                                                        <div>
                                                                           <div class="form-check form-switch">
                                                                              <input type="checkbox" class="form-check-input" id="productSwitch">
                                                                              <label class="form-check-label" for="productSwitch"></label>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item px-0 py-3">
                                                                     <div class="d-flex justify-content-between">
                                                                        <div class="">
                                                                           <h5 class="mb-1">Newsletter</h5>
                                                                           <p class="mb-0">Updates on what’s going on here at Coach and latest release.</p>
                                                                        </div>
                                                                        <div>
                                                                           <div class="form-check form-switch">
                                                                              <input type="checkbox" class="form-check-input" id="newsletterSwitch" checked="">
                                                                              <label class="form-check-label" for="newsletterSwitch"></label>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item px-0 py-3">
                                                                     <div class="d-flex justify-content-between">
                                                                        <div class="">
                                                                           <h5 class="mb-1">Security Alert</h5>
                                                                           <p class="mb-0">Updates on what’s going on here at Coach and latest release.</p>
                                                                        </div>
                                                                        <div>
                                                                           <div class="form-check form-switch">
                                                                              <input type="checkbox" class="form-check-input" id="securitySwitch">
                                                                              <label class="form-check-label" for="securitySwitch"></label>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item px-0 pb-0 pt-3">
                                                                     <div class="d-flex justify-content-between">
                                                                        <div class="">
                                                                           <h5 class="mb-1">Events and offers</h5>
                                                                           <p class="mb-0">Updates on what’s going on here at Coach and latest release.</p>
                                                                        </div>
                                                                        <div>
                                                                           <div class="form-check form-switch">
                                                                              <input type="checkbox" class="form-check-input" id="eventSwitch" checked="">
                                                                              <label class="form-check-label" for="eventSwitch"></label>
                                                                           </div>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                               </ul>
                                                            </div>
                                                         </div>