Web Designer Wall

Snippets Layout

Bootstrap 5 Profile Settings Page with Tabs

A profile settings page with a vertical tab menu for account, password, notifications and privacy, floating-label forms, switches and a save confirmation.

Bootstrap 5 Bootstrap 6 No jQuery Oct 2020 11.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="mb-4">
      <span class="wdw-eyebrow">Account</span>
      <h1 class="h2 wdw-heading mb-0">Settings</h1>
    </div>
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="wdw-card p-2">
          <div class="nav flex-column nav-pills gap-1 ps-nav" id="psTabs" role="tablist" aria-orientation="vertical">
            <button class="nav-link text-start active" id="ps-account-tab" data-bs-toggle="pill" data-bs-target="#ps-account" type="button" role="tab" aria-controls="ps-account" aria-selected="true">Account</button>
            <button class="nav-link text-start" id="ps-password-tab" data-bs-toggle="pill" data-bs-target="#ps-password" type="button" role="tab" aria-controls="ps-password" aria-selected="false">Password</button>
            <button class="nav-link text-start" id="ps-notif-tab" data-bs-toggle="pill" data-bs-target="#ps-notif" type="button" role="tab" aria-controls="ps-notif" aria-selected="false">Notifications</button>
            <button class="nav-link text-start" id="ps-privacy-tab" data-bs-toggle="pill" data-bs-target="#ps-privacy" type="button" role="tab" aria-controls="ps-privacy" aria-selected="false">Privacy and safety</button>
            <button class="nav-link text-start text-danger" id="ps-delete-tab" data-bs-toggle="pill" data-bs-target="#ps-delete" type="button" role="tab" aria-controls="ps-delete" aria-selected="false">Delete account</button>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="tab-content">
          <div class="tab-pane fade show active" id="ps-account" role="tabpanel" aria-labelledby="ps-account-tab" tabindex="0">
            <form class="wdw-card p-4 p-md-5 mb-4" novalidate>
              <h2 class="h5 wdw-heading mb-1">Public profile</h2>
              <p class="wdw-muted small mb-4">This information is visible to other people.</p>
              <div class="row g-4">
                <div class="col-md-8 order-2 order-md-1">
                  <div class="form-floating mb-3"><input type="text" class="form-control" id="psUser" placeholder="Username" value="alex.morgan"><label for="psUser">Username</label></div>
                  <div class="form-floating"><textarea class="form-control ps-bio" id="psBio" placeholder="Biography">Product designer based in Lisbon.</textarea><label for="psBio">Biography</label></div>
                </div>
                <div class="col-md-4 order-1 order-md-2 text-center">
                  <img class="rounded-circle mb-3 ps-avatar" src="https://i.pravatar.cc/160?img=12" width="96" height="96" alt="Profile photo">
                  <div><button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3">Upload photo</button></div>
                  <p class="wdw-muted small mt-2 mb-0">JPG or PNG, at least 128px.</p>
                </div>
              </div>
              <hr class="my-4">
              <h2 class="h5 wdw-heading mb-4">Private info</h2>
              <div class="row g-3">
                <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="psFirst" placeholder="First name" value="Alex"><label for="psFirst">First name</label></div></div>
                <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="psLast" placeholder="Last name" value="Morgan"><label for="psLast">Last name</label></div></div>
                <div class="col-12"><div class="form-floating"><input type="email" class="form-control" id="psEmail" placeholder="Email" value="[email protected]"><label for="psEmail">Email</label></div></div>
              </div>
              <div class="d-flex align-items-center gap-3 mt-4">
                <button type="submit" class="btn btn-primary rounded-pill px-4">Save changes</button>
                <span class="text-success small fw-semibold d-none" id="psSaved" role="status">Saved</span>
              </div>
            </form>
          </div>
          <div class="tab-pane fade" id="ps-password" role="tabpanel" aria-labelledby="ps-password-tab" tabindex="0">
            <form class="wdw-card p-4 p-md-5">
              <h2 class="h5 wdw-heading mb-4">Change password</h2>
              <div class="form-floating mb-3"><input type="password" class="form-control" id="psCur" placeholder="Current password"><label for="psCur">Current password</label></div>
              <div class="form-floating mb-3"><input type="password" class="form-control" id="psNew" placeholder="New password"><label for="psNew">New password</label></div>
              <div class="form-floating mb-4"><input type="password" class="form-control" id="psRep" placeholder="Repeat new password"><label for="psRep">Repeat new password</label></div>
              <button type="submit" class="btn btn-primary rounded-pill px-4">Update password</button>
            </form>
          </div>
          <div class="tab-pane fade" id="ps-notif" role="tabpanel" aria-labelledby="ps-notif-tab" tabindex="0">
            <div class="wdw-card p-4 p-md-5">
              <h2 class="h5 wdw-heading mb-4">Notifications</h2>
              <div class="form-check form-switch d-flex align-items-center gap-3 ps-0 mb-3"><input class="form-check-input ms-0" type="checkbox" role="switch" id="psN1" checked><label class="form-check-label" for="psN1"><span class="d-block fw-semibold">Email notifications</span><span class="wdw-muted small">Product updates and account activity.</span></label></div>
              <div class="form-check form-switch d-flex align-items-center gap-3 ps-0 mb-3"><input class="form-check-input ms-0" type="checkbox" role="switch" id="psN2"><label class="form-check-label" for="psN2"><span class="d-block fw-semibold">Web notifications</span><span class="wdw-muted small">Browser alerts for new messages.</span></label></div>
              <div class="form-check form-switch d-flex align-items-center gap-3 ps-0"><input class="form-check-input ms-0" type="checkbox" role="switch" id="psN3" checked><label class="form-check-label" for="psN3"><span class="d-block fw-semibold">Weekly digest</span><span class="wdw-muted small">A summary every Monday morning.</span></label></div>
            </div>
          </div>
          <div class="tab-pane fade" id="ps-privacy" role="tabpanel" aria-labelledby="ps-privacy-tab" tabindex="0">
            <div class="wdw-card p-4 p-md-5">
              <h2 class="h5 wdw-heading mb-4">Privacy and safety</h2>
              <div class="form-check form-switch d-flex align-items-center gap-3 ps-0 mb-3"><input class="form-check-input ms-0" type="checkbox" role="switch" id="psP1" checked><label class="form-check-label" for="psP1"><span class="d-block fw-semibold">Public profile</span><span class="wdw-muted small">Anyone can view your profile page.</span></label></div>
              <div class="form-check form-switch d-flex align-items-center gap-3 ps-0"><input class="form-check-input ms-0" type="checkbox" role="switch" id="psP2"><label class="form-check-label" for="psP2"><span class="d-block fw-semibold">Two-factor authentication</span><span class="wdw-muted small">Require a code when signing in.</span></label></div>
            </div>
          </div>
          <div class="tab-pane fade" id="ps-delete" role="tabpanel" aria-labelledby="ps-delete-tab" tabindex="0">
            <div class="wdw-card p-4 p-md-5">
              <h2 class="h5 wdw-heading text-danger mb-2">Delete account</h2>
              <p class="wdw-muted mb-4">Deleting your account permanently removes your profile and data. This cannot be undone.</p>
              <button type="button" class="btn btn-outline-danger rounded-pill px-4">Delete my account</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More layout snippets