Skip to content

Edit Profile Screen with Avatar Picker

Edit profile screen for mobile apps with an avatar picker bottom sheet, username availability check, bio character counter, validation and a sticky save button.

Also known as: edit profile page ui, profile settings screen mobile, change profile picture ui, username availability check, account settings form html

Bootstrap 6 Mobile Profile Screens Responsive #app #avatar #form #mobile #profile #responsive

Edit Profile Screen with Avatar Picker live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

An edit profile screen built with Bootstrap 6: an HTML mobile template with an avatar picker bottom sheet (take photo, choose from library, remove), a name field, a username availability check, a bio character counter and a sticky save button. Use this profile settings UI in social apps, marketplaces and community PWAs, or package it as a native app with Capacitor.

How it works

The root .epa-app is a 430 px app column with a sticky top bar (.epa-bar) and a sticky save bar (.epa-actions). All fields sit in one <form class="epa-form" novalidate> and use the Bootstrap 6 .form-field wrapper.

  • Avatar: .epa-avatar shows the current photo, with a camera badge (.epa-cam) and a "Change photo" button. Both open a Bootstrap 6 Drawer (.epa-sheet) with three options. "Take photo" opens a hidden input type="file" with capture="user", "Choose from library" opens a normal image picker, each previewed with URL.createObjectURL. "Remove photo" swaps in .epa-initials, built from the name.
  • Username: an @ prefix and a status icon (.epa-user-state). Typing runs a debounced check (format rules, then a simulated lookup in the taken list); taken names show suggestion chips.
  • Bio: maxlength="150" with a live counter (.epa-count) that turns amber in the last 20 characters.
  • Save: validates the fields, focuses the first problem, then shows a spinner and a Bootstrap 6 Toast.
  • Back: if there are unsaved edits, a Bootstrap 6 Dialog (.epa-discard) asks before discarding them.

Customization

  • --epa-indigo on .epa-app: the accent for the camera badge, links, focus rings and the save button (with --bs-primary-bg).
  • Edit the taken array in script.js, or replace the timeout in checkUsername() with a fetch() to your username API.
  • Change maxlength on #epa-bio to allow a longer bio; the counter reads it automatically.
  • Add fields by copying a .form-field.epa-field block into an .epa-group.
  • Replace the timeout in the submit handler with a fetch() that sends new FormData(form) and the selected photo.
  • Set capture="environment" on .epa-file-camera to open the rear camera instead.

Use cases

  • Social and community apps: profile photo, display name, handle and bio.
  • Marketplaces: seller profiles with a website link and contact email.
  • Dating and networking apps: a photo-first profile editor.

Accessibility

Every input has a visible label and the right autocomplete value (name, username, url, email). Messages are linked with aria-describedby, invalid fields get aria-invalid, and the username status is announced through aria-live="polite". The photo sheet and the discard prompt are native modal <dialog> elements: focus moves into them, Escape closes them, and focus returns to the trigger. All touch targets are at least 44 px.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). The photo sheet uses the new Drawer instead of Offcanvas, the discard prompt uses Dialog instead of Modal, suggestions use .chip, and buttons use btn-solid theme-primary, btn-subtle theme-secondary and btn-solid theme-danger. The sample portrait comes from Unsplash; replace it with your own image.

Edit Profile Screen with Avatar Picker at a glance

Framework
Bootstrap 6
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Bootstrap 6, Bootstrap Icons, fonts.googleapis.com
Layout
Mobile-first app screen, centred on wider screens
Category
Mobile Profile Screens
License
Free for personal and commercial use

Questions about this template

Can I use the Edit Profile Screen with Avatar Picker code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
  • <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  • <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.

Edit Profile Screen with Avatar Picker – Bootstrap 6 mobile profile screens component screenshot
Edit Profile Screen with Avatar Picker · Bootstrap 6 Mobile Profile Screens