Social Media App Feed with Stories

Social media app feed with a stories row and story viewer, photo posts with like, comment and save, a comments bottom sheet and a tab bar with a create button.

Also known as: social media app ui, photo feed app ui, stories bar with avatars, photo sharing app home screen, mobile news feed template

Bootstrap 5 Mobile Home & Feed Responsive #app #feed #mobile #responsive #social #stories

Social Media App Feed with Stories live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

Beautify

An HTML mobile template for a social media app feed: a stories row with gradient rings, photo posts with like, comment, share and save, a comments bottom sheet and a tab bar with a create button. Use this photo feed UI as the home screen of a photo sharing app, community PWA or mobile site, or package it with Capacitor. Built with Bootstrap 5, Bootstrap Icons and DM Sans. The photos come from Unsplash; replace them with your own images.

How it works

The root .sfd-app is a centred app column (max 430 px) with a sticky .sfd-top bar, the .sfd-stories row, the .sfd-feed and a sticky .sfd-tabs bar. The only colour accent is the pink to purple --sfd-ring gradient around unseen stories.

Each article.sfd-post stores its counts in data-likes and data-comments. The .sfd-like button toggles aria-pressed, swaps the heart icon and updates the like count. A double click on .sfd-post__media also likes the post and plays the .sfd-burst heart. .sfd-save toggles the bookmark.

The comment button and "View all comments" open the Bootstrap offcanvas #sfd-comments. It renders that post's comments from the COMMENTS object; Post stays disabled until the field has text, and a new comment raises the count. Tapping a story opens #sfd-viewer, a full-height sheet with progress bars, previous and next zones (or arrow keys) and a reply field, and marks the ring as seen with .is-seen. The create button in the tab bar and "Your story" open #sfd-create, and the three-dot button opens #sfd-options.

Customization

--sfd-ring on .sfd-app: the gradient of the story rings, the one accent colour of the screen.
--sfd-like on .sfd-app: the colour of the liked heart and the notification badges.
aspect-ratio: 1 / 1 on .sfd-post__media: use 4 / 5 for taller portrait posts.
The COMMENTS object in script.js: replace it with comments loaded from your API, keyed by each post's data-post.
data-photo, data-name and data-time on each .sfd-story: the photo and header the story viewer shows.
data-sfd-toast on the sheet options: the confirmation text; replace the handler with your real action.
Change .sfd-logo to your own wordmark or an inline SVG logo.

Use cases

Photo sharing and social networking apps: a familiar home feed with stories
Community and club apps: members post updates, like and comment
Creator and influencer platforms: a branded feed inside a PWA

Accessibility

Like and save buttons use aria-pressed and labels that change ("Like" / "Unlike"). Icon buttons have aria-label values and decorative icons are aria-hidden. The bottom nav marks the current tab with aria-current="page". Sheets are Bootstrap offcanvas dialogs: they trap focus, close with Escape or the backdrop, and focus returns to the button that opened them. The comments list is a live region and toasts use role="status". Animations are switched off with prefers-reduced-motion.

Usage notes

Requires Bootstrap 5 (offcanvas) and Bootstrap Icons; DM Sans comes from Google Fonts. Share only shows a toast; call navigator.share() there.

Social Media App Feed with Stories at a glance

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

Questions about this template

Can I use the Social Media App Feed with Stories 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 5 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@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap">