1<!DOCTYPE html><html 2lang="en"><head><meta 3charset="utf-8"><meta 4name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta 5http-equiv="X-UA-Compatible" content="IE=edge"><title>Bs4 simple search result â HTML Example | Bootdey</title><meta 6name="description" content="The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with aâ¦"><meta 7name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"><link 8rel="shortcut icon" type="image/x-icon" href="/img/bootdey_favicon.ico"><link 9rel="apple-touch-icon" sizes="135x140" href="/img/bootdey135x140.png"><link 10rel="apple-touch-icon" sizes="76x76" href="/img/bootdey_76x76.png"><meta 11property="x:account_id" content="2433978487" /><meta 12name="twitter:card" content="summary_large_image"><meta 13name="twitter:site" content="@bootdey"><meta 14name="twitter:creator" content="@bootdey"><meta 15name="twitter:title" content="Bs4 simple search result â HTML Example | Bootdey"><meta 16name="twitter:description" content="The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with aâ¦"><meta 17name="twitter:image" content="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-898.png"><meta 18name="twitter:url" content="https://www.bootdey.com/snippets/view/bs4-simple-search-result"><meta 19property="og:title" content="Bs4 simple search result â HTML Example | Bootdey"><meta 20property="og:site_name" content="Bootdey"><meta 21property="og:type" content="article"><meta 22property="og:locale" content="en_US"><meta 23property="og:url" content="https://www.bootdey.com/snippets/view/bs4-simple-search-result"><meta 24property="og:image" content="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-898.png"><meta 25property="og:image:secure_url" content="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-898.png"><meta 26property="og:image:alt" content="Bs4 simple search result â HTML Example | Bootdey"><meta 27property="og:description" content="The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with aâ¦"><meta 28name="twitter:image:alt" content="Bs4 simple search result â HTML Example | Bootdey"><meta 29name="msvalidate.01" content="23285BE3183727A550D31CAE95A790AB" /><link 30rel="canonical" href="https://www.bootdey.com/snippets/view/bs4-simple-search-result" /><link 31rel="shortlink" href="https://www.bootdey.com/snippets/view/898"><link 32rel="describedby" href="https://www.bootdey.com/llms.txt" type="text/markdown"><link 33rel="alternate" href="https://www.bootdey.com/ai-content/snippets/898.md" type="text/markdown" title="Bs4 simple search result â HTML Example | Bootdey">
33<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.bootdey.com/#organization","name":"Bootdey","url":"https://www.bootdey.com/","logo":{"@type":"ImageObject","url":"https://www.bootdey.com/img/bootdey135x140.png"},"sameAs":["https://www.facebook.com/bootdey","https://x.com/bootdey"]},{"@type":"WebSite","@id":"https://www.bootdey.com/#website","name":"Bootdey","url":"https://www.bootdey.com/","inLanguage":"en","publisher":{"@id":"https://www.bootdey.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.bootdey.com/bootstrap-snippets?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}</script>
33
33<script type="application/ld+json">[{"@context":"https://schema.org","@type":"SoftwareSourceCode","name":"bs4 simple search result","description":"The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with a short heading and a single-line search input, followed by a muted \u201cAbout X results\u201d line. The main results are rendered as a vertical list where each item (search-item) pairs a left-aligned avatar image with a right-side content panel. The avatar is circular (70x70) with a white border, and the content area is offset with a generous left margin to clear the image. Each item contains a bold title link, a compact metadata line (date, comments count, and one or more categories), and a descriptive excerpt. Typography is restrained: dates and meta use small, uppercase/light gray styling, while titles are clearly emphasized. A hover treatment adds a dotted underline to links for affordance. At the bottom, a Bootstrap-styled pagination control and a separate page indicator are provided. Layout behavior follows Bootstrap grid rules (col-md-8) so the column scales on larger viewports and stacks to full width on smaller devices; padding and offsets maintain clear separation between avatar and text. Customization points are straightforward: swap item data (titles, dates, categories, excerpts), change avatar sources, adjust result counts, and tweak typography, spacing, or avatar size to fit a brand. This pattern suits lists of searchable items such as blogs, knowledge-base articles, products, design projects, news, forum threads, courses, or job listings.","programmingLanguage":["HTML","CSS","JavaScript"],"codeSampleType":"full","learningResourceType":"SampleCode","fileFormat":"text/html","runtimePlatform":"Bootstrap 4.1.1","text":"\u003C!DOCTYPE html\u003E\n\u003Chtml lang=\u0022en\u0022\u003E\n\u003Chead\u003E\n \u003Cmeta charset=\u0022utf-8\u0022\u003E\n \u003Ctitle\u003Ebs4 simple search result - Bootdey.com\u003C/title\u003E\n \u003Cmeta name=\u0022viewport\u0022 content=\u0022width=device-width, initial-scale=1\u0022\u003E\n \u003Clink href=\u0022https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\u0022 rel=\u0022stylesheet\u0022\u003E\n\u003C/head\u003E\n\u003Cbody\u003E\n\u003Clink href=\u0022https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\u0022 rel=\u0022stylesheet\u0022\u003E\r\n\u003Cdiv class=\u0022container\u0022\u003E\r\n \u003Cdiv class=\u0022row\u0022\u003E\r\n \u003Cdiv class=\u0022col-md-8 left-side-sidebar\u0022\u003E\r\n \u003Cdiv class=\u0022row text-center\u0022\u003E\r\n \u003Cdiv class=\u0022col-md-8 offset-md-2\u0022\u003E\r\n \u003Ch3\u003ENot happy with the results?\u003C/h3\u003E\r\n \u003Cp class=\u0022body-text-3x\u0022\u003EType your search again\u003C/p\u003E\r\n \u003Cdiv class=\u0022small-search-wrap\u0022\u003E\r\n \u003Cdiv class=\u0022search-form\u0022\u003E\r\n \u003Cform action=\u0022#\u0022\u003E\r\n \u003Cdiv class=\u0022form-group\u0022\u003E\r\n \u003Cinput type=\u0022text\u0022 value=\u0022test\u0022 placeholder=\u0022Search something here\u0022 maxlength=\u0022100\u0022 class=\u0022form-control\u0022 name=\u0022name\u0022 id=\u0022name\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/form\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \u003Chr class=\u0022invisible small\u0022\u003E\r\n \u003C/div\u003E\r\n \u003Cdiv class=\u0022col-md-12\u0022\u003E\r\n \u003Cdiv class=\u0022v-heading-v2\u0022\u003E\r\n \u003Ch4 class=\u0022v-search-result-count\u0022\u003EAbout 18,580 results\u003C/h4\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n\r\n \u003Cdiv class=\u0022clearfix mt-40\u0022\u003E\r\n \u003Cul class=\u0022xsearch-items\u0022\u003E\r\n \u003Cli class=\u0022search-item\u0022\u003E\r\n \u003Cdiv class=\u0022search-item-img\u0022\u003E\r\n \u003Ca href=\u0022#\u0022\u003E\r\n \u003Cimg src=\u0022https://bootdey.com/img/Content/avatar/avatar2.png\u0022 width=\u002270\u0022 height=\u002270\u0022\u003E\r\n \u003C/a\u003E\r\n \u003C/div\u003E\r\n \u003Cdiv class=\u0022search-item-content\u0022\u003E\r\n \u003Ch3 class=\u0022search-item-caption\u0022\u003E\u003Ca href=\u0022#\u0022\u003E10 tips for creating a stunning web presentation\u003C/a\u003E\u003C/h3\u003E\r\n\r\n \u003Cdiv class=\u0022search-item-meta mb-15\u0022\u003E\r\n \u003Cul class=\u0022list-inline\u0022\u003E\r\n \u003Cli class=\u0022time\u0022\u003ENovember 10, 2017\u200e\u003C/li\u003E\r\n \u003Cli\u003E\u003Ca href=\u0022#\u0022\u003E0 Comments\u003C/
33a\u003E\u003C/li\u003E\r\n \u003Cli class=\u0022pr-0\u0022\u003Ein\u003C/li\u003E\r\n \u003Cli class=\u0022pl-0\u0022\u003E\u003Ca href=\u0022#\u0022\u003EDesign\u003C/a\u003E\u003C/li\u003E\r\n \u003C/ul\u003E\r\n \u003C/div\u003E\r\n \u003Cdiv\u003E\r\n Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum","license":"https://www.bootdey.com/license","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.bootdey.com/snippets/view/bs4-simple-search-result"},"isPartOf":{"@id":"https://www.bootdey.com/#website"},"inLanguage":"en","headline":"bs4 simple search result","author":{"@type":"Person","name":"Bootdey Admin"},"datePublished":"2019-03-02T11:40:57-05:00","dateModified":"2026-09-30T14:11:35-05:00","url":"https://www.bootdey.com/snippets/view/bs4-simple-search-result","image":"https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-898.png","keywords":["bs4","search","list","find","blog","posts"],"abstract":"The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with a short heading and a single-line search input, followed by a muted \u201cAbout X results\u201d line. The main results are rendered as a vertical list where each item (search-item) pairs a left-aligned avatar image with a right-side content panel. The avatar is circular (70x70) with a white border, and the content area is offset with a generous left margin to clear the image. Each item contains a bold title link, a compact metadata line (date, comments count, and one or more categories), and a descriptive excerpt. Typography is restrained: dates and meta use small, uppercase/light gray styling, while titles are clearly emphasized. A hover treatment adds a dotted underline to links for affordance. At the bottom, a Bootstrap-styled pagination control and a separate page indicator are provided. Layout behavior follows Bootstrap grid rules (col-md-8) so the column scales on larger viewports and stacks to full width on smaller devices; padding and offsets maintain clear separation between avatar and text. Customization points are straightforward: swap item data (titles, dates, categories, excerpts), change avatar sources, adjust result counts, and tweak typography, spacing, or avatar size to fit a brand. This pattern suits lists of searchable items such as blogs, knowledge-base articles, products, design projects, news, forum threads, courses, or job listings.","featureList":["Blog Post Search Results","Knowledge Base Articles","Product Discovery","Design Portfolio Listings","News Search Results","Forum Threads","Course Catalog","Job Postings"],"isBasedOn":{"@type":"SoftwareApplication","name":"Bootstrap","softwareVersion":"4.1.1"}},{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"How do I use this HTML example?","acceptedA
33nswer":{"@type":"Answer","text":"Copy the complete code document into an .html file and open it in a browser. Bootstrap 4.1.1, the component styles and its JavaScript are already included."}},{"@type":"Question","name":"Can I use it in commercial projects?","acceptedAnswer":{"@type":"Answer","text":"Yes. This example is free for personal and commercial projects. Review the usage license page for details."}},{"@type":"Question","name":"Is it responsive?","acceptedAnswer":{"@type":"Answer","text":"Yes. It is built on Bootstrap 4.1.1 and inherits its responsive grid and components."}}]},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.bootdey.com"},{"@type":"ListItem","position":2,"name":"HTML examples","item":"https://www.bootdey.com/bootstrap-snippets"},{"@type":"ListItem","position":3,"name":"bs4 simple search result","item":"https://www.bootdey.com/snippets/view/bs4-simple-search-result"}]}]</script>
33 <link 34href="/cache-css/cache-1790806930-fa5de4cb034d4187519d345f327135c0.css" rel="stylesheet" type="text/css" ></head><body 35class="layout-horizontal "> <header 36class="navbar page-header darkHeader border0 navbar-expand-lg"><div 37class="container"> <a 38class="navbar-brand d-inline-flex align-items-center" href="/"> <i 39class="fas fa-code d-inline-flex mr-2 avatar32 bg-info-dark shadow-sm text-primary-light rounded-circle align-items-center justify-content-center fs-1x logo-icon"></i> <span 40class="text-white fs-1x font700">Bootdey</span> </a><ul 41class="nav flex-row order-lg-2 ml-auto nav-icons"><li 42class="nav-item bd-home-nav-action"><a 43class="bd-home-nav-action__login" href="https://www.bootdey.com/login">Log in</a></li><li 44class="nav-item bd-home-nav-action bd-home-nav-action--signup"><a 45class="bd-home-nav-action__signup" href="https://www.bootdey.com/sign-up">Sign up</a></li><li 46class="nav-item dropdown user-dropdown align-items-center bd-guest-menu"> <a 47class="nav-link text-white" href="#" id="dropdown-user" role="button" data-toggle="dropdown"> <span 48class="ml-2 h-lg-down dropdown-toggle"> <i 49class="fa fa-user-circle fa-2x"></i> </span> </a><div 50class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-user"> <a 51class="dropdown-item" href="https://www.bootdey.com/login"><i 52class="icon-User"></i>Login</a> <a 53class="dropdown-item" href="https://www.bootdey.com/sign-up"><i 54class="icon-Newspaper"></i> Sign Up</a></div></li></ul></div> </header><nav 55class="navbar navbar-expand-lg navbar-light navbar-horizontal bg-white"><div 56class="container"> <button 57class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBootdey" aria-controls="navbarBootdey" aria-expanded="false" aria-label="Toggle navigation"> <span 58class="navbar-toggler-icon"></span> </button><div 59class="collapse navbar-collapse" id="navbarBootdey"><ul 60class="navbar-nav mr-auto"><li 61class="nav-item"> <a 62class="nav-link" href="https://www.bootdey.com/bootstrap-snippets"> <i 63class="fa fa-th"></i>HTML Examples </a></li><li 64class="nav-item"> <a 65class="nav-link" href="https://www.bootdey.com/tailwind-components"> <i 66class="fa fa-th"></i>Tailwind </a></li><li 67class="nav-item"> <a 68class="nav-link" target="_blank" rel="noopener noreferrer" href="https://www.rnexamples.com/"> <i 69class="fa fa-mobile"></i>React native </a></li></ul></div></div> </nav><div 70class="page-wrapper" id="page-wrapper"> <main 71class="content" id="main-content"> <header 72class="sv-hero"><div 73class="sv-hero__main container"><div 74class="sv-hero__copy"><h1>bs4 simple search result</h1><p>The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list.</p><div 75class="sv-hero__tags" aria-label="Tags"><a 76href="https://www.bootdey.com/snippets/tagged/bs4">bs4</a><a 77href="https://www.bootdey.com/snippets/tagged/search">search</a><a 78href="https://www.bootdey.com/snippets/tagged/list">list</a><a 79href="https://www.bootdey.com/snippets/tagged/find">find</a><a 80href="https://www.bootdey.com/snippets/tagged/blog">blog</a><a 81href="https://www.bootdey.com/snippets/tagged/posts">posts</a></div></div><div 82class="sv-hero__collage" aria-hidden="true"><div 83class="sv-hero__tile sv-hero__tile--1"><img 84src="/files/SnippetsImages/bootstrap-snippets-898.png" alt="" loading="eager" decoding="async"></div><div 85class="sv-hero__tile sv-hero__tile--2"><img 86src="/files/SnippetsImages/bootstrap-snippets-1068.png" alt="" loading="eager" decoding="async"></div><div 87class="sv-hero__tile sv-hero__tile--3"><img 88src="/files/SnippetsImages/bootstrap-snippets-843.png" alt="" loading="eager" decoding="async"></div></div></div> <nav 89class="sv-hero__toolbar" aria-label="Snippet actions"><div 90class="container sv-hero__toolbar-inner"><div 91class="sv-hero__toolbar-primary"> <a 92class="sv-action sv-action--primary" href="#preview"><i 93class="far fa-eye" aria-hidden="true"></i>Preview</a> <a 94class="sv-action" href="#code"><i 95class="fas fa-code" aria-hidden="true"></i>Code</a> <a 96class="sv-action" href="https://www.bootdey.com/snippets/preview/bs4-simple-search-result?full-screen=true"><i 97class="fas fa-expand" aria-hidden="true"></i>Full Screen</a> <a 98class="sv-action sv-action--download btn-login-perform-action" href="/snippets/execute_download/o4"><i 99class="fas fa-download" aria-hidden="true"></i>Download </a></div><div 100class="sv-hero__toolbar-secondary"><div 101class="ai-action-buttons"> <button 102type="button" class="btn ai-customize-button" data-ai-customize-open aria-haspopup="dialog" aria-controls="ai-customizer-dialog" disabled> <span 103class="ai-customize-button__mark" aria-hidden="true">B</span> <span>Customize with AI</span> <span 104class="ai-customize-button__spark" aria-hidden="true">✦</span> </button><div 105class="btn-group ai-actions"> <button 106type="button" class="btn btn-info ai-actions__trigger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span 107class="ai-actions__spark" aria-hidden="true">✦</span> <span>Build with AI</span> </button><div 108class="dropdown-menu ai-actions__menu"> <button 109type="button" 110class="dropdown-item ai-actions__item ai-copy-prompt"
111data-ai-prompt="Work with this Bootdey UI example as a reusable HTML and CSS starting point.Name: bs4 simple search result 112Purpose: A reusable responsive user interface example built with HTML, CSS and JavaScript. 113Technologies: HTML, CSS and JavaScript with Bootstrap 4.1.1 114Original example: https://www.bootdey.com/snippets/view/bs4-simple-search-result 115Temporary source package: https://www.bootdey.com/ai/snippet/bootstrap/898/1790844957/ed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.jsonFirst review its structure, responsive behavior and interactions. Help me understand, customize, debug or integrate it into an existing project. Preserve semantic HTML, accessibility and mobile behavior. Return complete HTML, CSS and JavaScript when proposing code changes. Do not convert it to React or another framework unless I explicitly request it."> <span 116class="ai-actions__icon"><i 117class="far fa-copy" aria-hidden="true"></i></span> <span 118class="ai-action-label">Copy Bootdey AI brief</span> </button><div 119class="dropdown-divider"></div> <a 120class="dropdown-item ai-actions__item" 121href="https://v0.dev/chat/api/open?url=https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json" 122data-ai-provider="v0" 123target="_blank" 124rel="noopener noreferrer"> <span 125class="ai-actions__icon"> <span 126class="ai-provider-mark ai-provider-mark--v0">v0</span> </span> <span>Remix in v0</span> <i 127class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 128class="dropdown-item ai-actions__item" 129href="https://lovable.dev/?autosubmit=true#prompt=Remix%20this%20Bootdey%20UI%20example%20into%20a%20polished%2C%20working%20and%20responsive%20interface.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AUse%20the%20supplied%20source%20as%20the%20visual%20and%20functional%20starting%20point.%20Preserve%20its%20purpose%20and%20interactions%20while%20improving%20semantics%2C%20accessibility%20and%20maintainability.%20Keep%20the%20result%20in%20HTML%2C%20CSS%20and%20JavaScript%20unless%20I%20explicitly%20request%20another%20stack%2C%20and%20generate%20a%20runnable%20preview." 130data-ai-provider="lovable" 131target="_blank" 132rel="noopener noreferrer"> <span 133class="ai-actions__icon"> <i 134class="far fa-heart" aria-hidden="true"></i> </span> <span>Build in Lovable</span> <i 135class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 136class="dropdown-item ai-actions__item" 137href="https://chatgpt.com/?q=Help%20me%20understand%20and%20adapt%20this%20Bootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 138data-ai-provider="chatgpt" 139target="_blank" 140rel="noopener noreferrer"> <span 141class="ai-actions__icon"> <i 142class="fas fa-comment" aria-hidden="true"></i> </span> <span>Ask ChatGPT</span> <i 143class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 144class="dropdown-item ai-actions__item" 145href="https://claude.ai/new?q=Help%20me%20understand%20and%20adapt%20this%20B
145ootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 146data-ai-provider="claude" 147target="_blank" 148rel="noopener noreferrer"> <span 149class="ai-actions__icon"> <i 150class="fas fa-code" aria-hidden="true"></i> </span> <span>Ask Claude</span> <i 151class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 152class="dropdown-item ai-actions__item" 153href="https://aistudio.google.com/prompts/new_chat?prompt=Help%20me%20understand%20and%20adapt%20this%20Bootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 154data-ai-provider="gemini" 155target="_blank" 156rel="noopener noreferrer"> <span 157class="ai-actions__icon"> <i 158class="far fa-gem" aria-hidden="true"></i> </span> <span>Ask Gemini</span> <i 159class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a></div></div></div><div 160class="btn-group sv-hero__share"> <button 161type="button" class="sv-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i 162class="fas fa-share-alt" aria-hidden="true"></i>Actions</button><div 163class="dropdown-menu dropdown-menu-right"> <a 164href="#" class="dropdown-item" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://www.bootdey.com/snippets/view/bs4-simple-search-result'),'facebook-share-dialog','width=626,height=436');return false;"><i 165class="fab fa-facebook" aria-hidden="true"></i> Share on facebook</a> <a 166href="#" class="dropdown-item" onclick="window.open('https://x.com/share?url='+encodeURIComponent('https://www.bootdey.com/snippets/view/bs4-simple-search-result'),'twitter-share-dialog','width=626,height=436');return false;"><i 167class="fab fa-twitter" aria-hidden="true"></i> Share on X</a></div></div></div></div> </nav> </header> <main 168class="view-snippets-page"> <section 169class="sv-preview" id="preview" aria-label="Snippet preview"> <iframe 170id="snippet-preview" class="preview-iframe" src="https://www.bootdey.com/snippets/preview/bs4-simple-search-result" title="Preview: bs4 simple search result"></iframe> </section> <aside 171class="sv-sponsor" aria-label="Sponsored"><div 172class="container sv-sponsor__inner"><div 173class="sv-sponsor__copy"><span>PARTNER SPOTLIGHT</span><strong>Good ideas deserve good tools.</strong><p>Discover something useful for your next build.</p></div><div 174class="sv-sponsor__ad"><div 175class="carbon-horizontal adbanner ad-banner ad-zone ad-space ad-unit textads banner-ads banner_ads" id="ads-check">
175<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYILKJI&placement=bootdeycom" id="_carbonads_js"></script>
175 </div></div></div></aside> <section 176class="sv-code" aria-labelledby="code"><div 177class="container sv-wide"><div 178class="sv-section-head"><div><h2 id="code">The code behind it</h2><p>A complete HTML document with Bootstrap 4.1.1, CSS and JavaScript, ready to use.</p></div><div 179class="sv-code__actions"><a 180href="/snippets/execute_download/o4" class="sv-action sv-action--download btn-login-perform-action"><i 181class="fas fa-download" aria-hidden="true"></i>Download code</a></div></div><div 182class="sv-code__frame"><div 183class="sv-code__chrome"><span 184class="sv-window-dots" aria-hidden="true"><i></i><i></i><i></i></span><strong>index.html</strong><span>HTML · CSS · JS</span></div><div 185class="prism code-content code-content--protected" itemprop="programmingLanguage" content="html/css/js" oncopy="return false;" oncut="return false;" oncontextmenu="return false;" ondragstart="return false;"><pre class="line-numbers" draggable="false"><code class="language-markup" itemprop="sampleType" id="code-html" draggable="false"><!DOCTYPE html> 186<html lang="en"> 187<head> 188 <meta charset="utf-8"> 189 <title>bs4 simple search result - Bootdey.com</title> 190 <meta name="viewport" content="width=device-width, initial-scale=1"> 191 <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343372d322d32">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"> 192</head> 193<body> 194<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 195<div class="container"> 196 <div class="row"> 197 <div class="col-md-8 left-side-sidebar"> 198 <div class="row text-center"> 199 <div class="col-md-8 offset-md-2"> 200 <h3>Not happy with the results?</h3> 201 <p class="body-text-3x">Type your search again</p> 202 <div class="small-search-wrap"> 203 <div class="search-form"> 204 <form action="#"> 205 <div class="form-group"> 206 <input type="text" value="test" placeholder="Search something here" maxlength="100" class="form-control" name="name" id="name"> 207 </div> 208 </form> 209 </div> 210 </div> 211 <hr class="invisible small"> 212 </div> 213 <div class="col-md-12"> 214 <div class="v-heading-v2"> 215 <h4 class="v-search-result-count">About 18,580 results</h4> 216 </div> 217 </div> 218 </div> 219 220 <div class="clearfix mt-40"> 221 <ul class="xsearch-items"> 222 <li class="search-item"> 223 <div class="search-item-img"> 224 <a href="#"> 225 <img src="https://bootdey.com/img/Content/avatar/avatar2.png" width="70" height="70"> 226 </a> 227 </div> 228 <div class="search-item-content"> 229 <h3 class="search-item-caption"><a href="#">10 tips for creating a stunning web presentation</a></h3> 230 231 <div class="search-item-meta mb-15"> 232 <ul class="list-inline"> 233 <li class="time">November 10, 2017â</li> 234 <li><a href="#">0 Comments</a></li> 235 <li class="pr-0">in</li> 236 <li class="pl-0"><a href="#">Design</a></li> 237 </ul> 238 </div> 239 <div> 240 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. 241 </div> 242 </div> 243 </li> 244 245 <li class="search-item"> 246 <div class="search-item-img"> 247 <a href="#"> 248 <img itemprop="image" src="https://bootdey.com/img/Content/avatar/avatar3.png" width="70" height="70"> 249 </a> 250 </div> 251 <div class="search-item-content"> 252 <h3 class="search-item-caption"><a href="#">Vertex makes it easy to sell your product</a></h3> 253 <div class="search-item-meta mb-15"> 254 <ul class="list-inline"> 255 <li class="time">October 10, 2017â</li> 256 <li><a href="#">0 Comments</a></li> 257 <li class="pr-0">in</li> 258 <li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li> 259 </ul> 260 </div> 261 <div> 262 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. 263 </div> 264 </div> 265 </li> 266 267 <li class="search-item"> 268 <div class="search-item-img"> 269 <a href="#"> 270 <img src="https://bootdey.com/img/Content/avatar/avatar4.png" width="70" height="70"> 271 </a> 272 </div> 273 <div class="search-item-content"> 274 <h3 class="search-item-caption"><a href="#">5 questions you must ask at the start of every project</a></h3> 275 <div class="search-item-meta mb-15"> 276 <ul class="list-inline"> 277 <li class="time">April 15, 2017â</li> 278 <li><a href="#">40 Comments</a></li> 279 <li class="pr-0">in</li> 280 <li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li> 281 </ul> 282 </div> 283 <div> 284 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere. 285 </div> 286 </div> 287 </li> 288 289 <li class="search-item"> 290 <div class="search-item-img"> 291 <a href="#"> 292 <img src="https://bootdey.com/img/Content/avatar/avatar5.png" width="70" height="70"> 293 </a> 294 </div> 295 <div class="search-item-content"> 296 <h3 class="search-item-caption"><a href="#">How to make selling and beautifull website</a></h3> 297 <div class="search-item-meta mb-15"> 298 <ul class="list-inline"> 299 <li class="time">March 22, 2017â</li> 300 <li><a href="#">0 Comments</a></li> 301 <li class="pr-0">in</li> 302 <li class="pl-0"><a href="#">PHP</a>, <a href="#">Wordpress</a></li> 303 </ul> 304 </div> 305 306 <div> 307 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. 308 </div> 309 </div> 310 </li> 311 312 <li class="search-item"> 313 <div class="search-item-img"> 314 <a href="#"> 315 <img src="https://bootdey.com/img/Content/avatar/avatar6.png" width="70" height="70"> 316 </a> 317 </div> 318 <div class="search-item-content"> 319 <h3 class="search-item-caption"><a href="#">Secrets of better SEO for your website</a></h3> 320 <div class="search-item-meta mb-15"> 321 <ul class="list-inline"> 322 <li class="time">February 19, 2017â</li> 323 <li><a href="#">0 Comments</a></li> 324 <li class="pr-0">in</li> 325 <li class="pl-0"><a href="#">SEO</a>, <a href="#">Wordpress</a>, <a href="#">Mobile</a></li> 326 </ul> 327 </div> 328 <div> 329 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere. 330 </div> 331 </div> 332 </li> 333 334 <li class="search-item"> 335 <div class="search-item-img"> 336 <a href="#"> 337 <img src="https://bootdey.com/img/Content/avatar/avatar7.png" width="70" height="70"> 338 </a> 339 </div> 340 <div class="search-item-content"> 341 <h3 class="search-item-caption"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3> 342 <div class="search-item-meta mb-15"> 343 <ul class="list-inline"> 344 <li class="time">February 25, 2017â</li> 345 <li><a href="#">5 Comments</a></li> 346 <li class="pr-0">in</li> 347 <li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li> 348 </ul> 349 </div> 350 <div> 351 Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere. 352 </div> 353 </div> 354 </li> 355 </ul> 356 </div> 357 358 <div class="row"> 359 <div class="col-md-6"> 360 <div class="clearfix pl-90"> 361 <ul class="pagination"> 362 <li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-double-left"></i> </a></li> 363 <li class="page-item"><a class="page-link" href="#">1</a></li> 364 <li class="page-item"><a class="page-link" href="#">2</a></li> 365 <li class="page-item"><a class="page-link" href="#">..</a></li> 366 <li class="page-item"><a class="page-link" href="#">20</a></li> 367 <li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-double-right"></i> </a></li> 368 </ul> 369 </div> 370 </div> 371 372 <div class="col-md-6"> 373 <div class="clearfix pull-right"> 374 <span class="o-7">Page 1 of 8</span> 375 </div> 376 </div> 377 </div> 378 </div> 379 </div> 380</div> 381<style type="text/css"> 382body{ 383 background:#f2f3f8; 384 margin-top:20px; 385} 386 387 388.page.has-sidebar.bordered .page-header { 389 margin-bottom: 0; 390} 391 392.page.has-sidebar.bordered .page-inner { 393 padding-bottom: 0; 394 padding-top: 0px; 395} 396 397.page.has-sidebar.borde
397red .left-side-sidebar { 398 padding-top: 50px; 399 padding-bottom: 50px; 400} 401 402.page.has-sidebar.bordered .right-side-sidebar { 403 padding-top: 50px; 404 padding-bottom: 50px; 405} 406 407.has-sidebar.bordered.has-right-sidebar .left-side-sidebar { 408 border-right: 1px solid rgba(0,0,0,0.1) !important; 409 box-shadow: 1px 0px 0px 0px rgba(255,255,255,0.715) !important; 410 padding-right: 45px; 411} 412 413.has-sidebar.bordered.has-right-sidebar .right-side-sidebar { 414 padding-left: 40px; 415} 416 417.has-sidebar.bordered.has-left-sidebar .right-side-sidebar { 418 padding-left: 45px; 419} 420 421.has-sidebar.bordered.has-left-sidebar .left-side-sidebar { 422 border-right: 1px solid rgba(0,0,0,0.1) !important; 423 box-shadow: 1px 0px 0px 0px rgba(255,255,255,0.715) !important; 424 padding-right: 40px; 425} 426 427.page.has-sidebar .left-side-sidebar { 428 padding-top: 50px; 429 padding-bottom: 50px; 430} 431 432.page.has-sidebar .page-inner { 433 padding-bottom: 0; 434 padding-top: 0px; 435} 436 437.page.has-sidebar .right-side-sidebar { 438 padding-top: 50px; 439 padding-bottom: 50px; 440} 441 442/* -------------------------------------------- 443 SEARCH LIST 444 -------------------------------------------- */ 445 446.xsearch-items { 447 padding-left: 0px; 448} 449 450 451.search-item-img { 452 float: left; 453 position: relative; 454} 455 456.search-item-img img, .search-item-img .img-holder { 457 height: 70px; 458 width: 70px; 459 display: block; 460 -moz-border-radius: 50%; 461 -webkit-border-radius: 50%; 462 border-radius: 50%; 463 box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); 464 border: 4px solid white; 465} 466 467.search-item-img .img-holder { 468 border: 1px solid #e3e3e3; 469 line-height: 20px; 470 background: #f7f7f7; 471 border-color: rgba(207,215,223,.25); 472} 473 474.search-item-img .img-holder i { 475 display: inline-block; 476 padding: 28px 20px; 477 font-size: 28px; 478 opacity: 0.5; 479} 480 481.search-item-content { 482 margin-left: 100px; 483 padding-bottom: 35px; 484 margin-bottom: 20px; 485 /*border-bottom: 1px solid rgb(231, 231, 231);*/ 486} 487 488.search-item-content.no-excerpt h3 { 489 margin-top: 8px; 490} 491 492.search-item-content .search-item-meta { 493 display: block; 494 margin-bottom: 10px; 495} 496 497.search-item-meta-down a, 498.search-item-meta a { 499 font-size: 11px; 500 text-transform: uppercase; 501} 502 503.xsearch-items a:hover { 504 border-bottom-width: 1px; 505 border-bottom-style: dotted; 506} 507 508.search-item-content .time { 509 color: #999; 510 font-size: 11px; 511 text-transform: uppercase; 512} 513 514.search-item-content time, 515.search-item-content span { 516 color: #999999; 517} 518 519.xsearch-items h3.search-item-caption { 520 margin-bottom: 2px; 521 font-weight: 600; 522 font-size: 20px; 523} 524 525.xsearch-items .search-item-meta-down { 526 margin-top: 5px; 527 color: #999; 528 font-size: 12px; 529} 530 531.xsearch-items .star-vote li { 532 padding: 0; 533 font-size: 14px; 534} 535 536.xsearch-result-count { 537 color: #999; 538 margin-bottom: 30px; 539} 540 541 542ul.xsearch-items-2 { 543 padding-left: 0; 544 margin-left: 0; 545} 546 547.xsearch-items-2 li { 548 list-style: none; 549} 550 551 552.xsearch-info-meta:before, .xsearch-info-meta:after { 553 content: ""; 554 display: table; 555} 556 557.xsearch-info-meta:after { 558 clear: both; 559} 560 561.xsearch-info-meta { 562 padding: 0; 563 margin: 0; 564 list-style-type: none; 565 margin-bottom: 5px; 566 font-size: 12px; 567 opacity: 0.7; 568} 569 570.xsearch-info-meta-item { 571 float: left; 572 margin-right: 10px; 573} 574 575.xsearch-item-title h3, 576.xsearch-item-title h4 { 577 margin-bottom: 5px; 578} 579 580.xsearch-desc { 581 margin-bottom: 2px; 582} 583 584.search-item-icon { 585 padding-right: 3px; 586} 587 588nav.xsearch-navbar { 589 padding-left: 0; 590} 591 592nav.xsearch-navbar.navbar-light .navbar-nav .active > .nav-link { 593 border-bottom-width: 2px; 594 border-bottom-style: solid; 595 padding-bottom: 12px; 596} 597 598.xsearch-item .xsearch-item-title strong { 599 font-weight: 600; 600} 601 602ul.xsearch-items-2 .xsearch-item { 603 margin-bottom: 40px; 604} 605 606.xsearch-item .xsearch-desc strong { 607 color: #111; 608} 609 610 611 612.search-result-wrap .search-result-item { 613 padding-bottom: 25px; 614 padding-top: 25px; 615 border-bottom: 1px solid rgba(207,215,223,.25); 616} 617 618.search-result-wrap .search-result-item .title h4, 619.search-result-wrap .search-result-item .title h3 { 620 margin-bottom: 5px; 621} 622 623.search-result-item-meta { 624 font-size: 14px; 625 margin-bottom: 10px; 626 margin-left: 25px; 627} 628 629.search-result-item-meta li { 630 color: #999; 631 margin-right: 5px; 632} 633 634.search-result-item-meta li i { 635 margin-right: 4px; 636} 637 638.search-result-item-meta li a { 639 /*border-bottom:1px dotted rgba(207,215,223,.25); 640 padding-bottom:2px;*/ 641 color: #1a0dab; 642} 643 644.search-result-item-link, 645.search-result-item-excerpt, 646.search-result-item-meta { 647 margin-left: 25px; 648} 649 650.search-result-item-excerpt strong { 651 color: #444; 652 font-weight: 600; 653} 654 655.search-result-item-excerpt { 656 margin-bottom: 5px; 657} 658 659.search-result-item-meta li:first-child { 660 margin-left: 0; 661 padding-left: 0; 662} 663 664ul { 665 list-style-type: none; 666} 667</style> 668<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 669<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020544e514e51">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script> 670</body> 671</html></code></pre></div></div></div></section> <section 672class="sv-discovery sv-discovery--similar" aria-labelledby="similar-snippets"><div 673class="container sv-wide"><div 674class="sv-section-head"><div><h2 id="similar-snippets">More like this</h2><p>Keep exploring components that belong in the same creative direction.</p></div><span 675class="sv-section-head__index">02 / DISCOVER</span></div><div
676class="row sv-discovery__grid"><article 677class="col-sm-6 col-lg-3 mb-30"><div 678class="bd-card h-100"> <span 679class="bd-card__eyebrow">List</span><h3 class="bd-card__title"> <a 680href="https://www.bootdey.com/snippets/view/Booking-Requests-list"> Booking Requests list </a></h3><div 681class="bd-card__shot" aria-hidden="true"> <picture> <source 682srcset="/files/SnippetsImagesWebp/bootstrap-snippets-1068.webp" type="image/webp"> <img 683loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-1068.png" width="266" height="203" alt="HTML and CSS UI component example: Booking Requests list" title="HTML and CSS UI component example: Booking Requests list" class="img-fluid" /> </picture></div></div> </article> <article 684class="col-sm-6 col-lg-3 mb-30"><div 685class="bd-card h-100"> <span 686class="bd-card__eyebrow">Timeline</span><h3 class="bd-card__title"> <a 687href="https://www.bootdey.com/snippets/view/bs4-profile-with-timeline-posts"> bs4 profile with timeline posts </a></h3><div 688class="bd-card__shot" aria-hidden="true"> <picture> <source 689srcset="/files/SnippetsImagesWebp/bootstrap-snippets-843.webp" type="image/webp"> <img 690loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-843.png" width="266" height="205" alt="HTML and CSS UI component example: bs4 profile with timeline posts" title="HTML and CSS UI component example: bs4 profile with timeline posts" class="img-fluid" /> </picture></div></div> </article> <article 691class="col-sm-6 col-lg-3 mb-30"><div 692class="bd-card h-100"> <span 693class="bd-card__eyebrow">Product</span><h3 class="bd-card__title"> <a 694href="https://www.bootdey.com/snippets/view/Products-View-List"> Products View List </a></h3><div 695class="bd-card__shot" aria-hidden="true"> <picture> <source 696srcset="/files/SnippetsImagesWebp/bootstrap-snippets-432.webp" type="image/webp"> <img 697loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-432.png" width="266" height="187" alt="HTML and CSS UI component example: Products View List" title="HTML and CSS UI component example: Products View List" class="img-fluid" /> </picture></div></div> </article> <article 698class="col-sm-6 col-lg-3 mb-30"><div 699class="bd-card h-100"> <span 700class="bd-card__eyebrow">Bs4</span><h3 class="bd-card__title"> <a 701href="https://www.bootdey.com/snippets/view/bs4-ecommerce-products"> bs4 ecommerce products </a></h3><div 702class="bd-card__shot" aria-hidden="true"> <picture> <source 703srcset="/files/SnippetsImagesWebp/bootstrap-snippets-884.webp" type="image/webp"> <img 704loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-884.png" width="266" height="217" alt="HTML and CSS UI component example: bs4 ecommerce products" title="HTML and CSS UI component example: bs4 ecommerce products" class="img-fluid" /> </picture></div></div> </article></div></div></section> <section 705class="sv-discovery sv-discovery--trending" aria-labelledby="trending-snippets"><div 706class="container sv-wide"><div 707class="sv-section-head"><div><h2 id="trending-snippets">Trending now</h2><p>Fresh ideas the community is exploring right now.</p></div><span 708class="sv-section-head__index">03 / TRENDING</span></div><div 709class="row sv-discovery__grid"><article 710class="col-sm-6 col-lg-3 mb-30"><div 711class="bd-card h-100"> <span 712class="bd-card__eyebrow">Events</span><h3 class="bd-card__title"> <a 713href="https://www.bootdey.com/snippets/view/events-card-widget"> events card widget </a></h3><div 714class="bd-card__shot" aria-hidden="true"> <picture> <source 715srcset="/files/SnippetsImagesWebp/bootstrap-snippets-1094.webp" type="image/webp"> <img 716loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-1094.png" width="266" height="207" alt="HTML and CSS UI component example: events card widget" title="HTML and CSS UI component example: events card widget" class="img-fluid" /> </picture></div></div> </article> <article 717class="col-sm-6 col-lg-3 mb-30"><div 718class="bd-card h-100"> <span 719class="bd-card__eyebrow">Payment</span><h3 class="bd-card__title"> <a 720href="https://www.bootdey.com/snippets/view/payment-options"> payment options </a></h3><div 721class="bd-card__shot" aria-hidden="true"> <picture> <source 722srcset="/files/SnippetsImagesWebp/bootstrap-snippets-1301.webp" type="image/webp"> <img 723loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-1301.png" width="266" height="188" alt="HTML and CSS UI component example: payment options" title="HTML and CSS UI component example: payment options" class="img-fluid" /> </picture></div></div> </article> <article 724class="col-sm-6 col-lg-3 mb-30"><div 725class="bd-card h-100"> <span 726class="bd-card__eyebrow">Sales</span>
726<h3 class="bd-card__title"> <a 727href="https://www.bootdey.com/snippets/view/sales-report"> sales report </a></h3><div 728class="bd-card__shot" aria-hidden="true"> <picture> <source 729srcset="/files/SnippetsImagesWebp/bootstrap-snippets-1176.webp" type="image/webp"> <img 730loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-1176.png" width="266" height="208" alt="HTML and CSS UI component example: sales report" title="HTML and CSS UI component example: sales report" class="img-fluid" /> </picture></div></div> </article> <article 731class="col-sm-6 col-lg-3 mb-30"><div 732class="bd-card h-100"> <span 733class="bd-card__eyebrow">Contact</span><h3 class="bd-card__title"> <a 734href="https://www.bootdey.com/snippets/view/color-contact-list"> color contact list </a></h3><div 735class="bd-card__shot" aria-hidden="true"> <picture> <source 736srcset="/files/SnippetsImagesWebp/bootstrap-snippets-1233.webp" type="image/webp"> <img 737loading="lazy" src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-1233.png" width="266" height="211" alt="HTML and CSS UI component example: color contact list" title="HTML and CSS UI component example: color contact list" class="img-fluid" /> </picture></div></div> </article></div></div></section> <section 738class="sv-faq" aria-labelledby="snippet-faq"><div 739class="container sv-wide sv-faq__layout"><div 740class="sv-faq__intro"><h2 id="snippet-faq">Everything you need to know.</h2><p>A few practical answers before you make it your own.</p><span 741aria-hidden="true">?</span></div><div 742class="sv-faq__answers"><article><span>01</span><div><h3>How do I use this HTML example?</h3><p>Copy the complete code document into an .html file and open it in a browser. Bootstrap 4.1.1, the component styles and its JavaScript are already included.</p></div></article><article><span>02</span><div><h3>Can I use it in commercial projects?</h3><p>Yes. This example is free for personal and commercial projects. Review the usage license page for details.</p></div></article><article><span>03</span><div><h3>Is it responsive?</h3><p>Yes. It is built on Bootstrap 4.1.1 and inherits its responsive grid and components.</p></div></article></div></div></section> <section 743class="sv-intelligence" id="about" aria-labelledby="information"><div 744class="container sv-wide"> <section 745class="snippet-intelligence is-ready" data-snippet-intelligence><div 746class="snippet-intelligence__glow" aria-hidden="true"></div> <header 747class="snippet-intelligence__header"><div> <span 748class="snippet-intelligence__eyebrow"><i></i>Bootdey design intelligence<b>AI</b></span><h2 id="information">Understand the design. Imagine where it fits.</h2><p>A visual and practical reading of this exact interface, generated from its structure, styling and behavior.</p></div> <span 749class="snippet-intelligence__mark" aria-hidden="true"><b>B</b><i></i><i></i></span> </header><div 750class="snippet-intelligence__loading" data-insights-loading hidden><div 751class="snippet-intelligence__loader" aria-hidden="true"><span></span><span></span><b>B</b></div><div><strong>Reading this interface</strong><p 752data-insights-progress>Mapping its visual hierarchy and component purposeâ¦</p><i><em></em></i></div></div><div 753class="snippet-intelligence__error" data-insights-error hidden><i 754class="fas fa-info-circle" aria-hidden="true"></i><div><strong>The design analysis is taking longer than expected</strong><p></p><button 755type="button" data-insights-retry>Try again</button></div></div><div 756class="snippet-intelligence__content" data-insights-content > <article 757class="snippet-intelligence__description"> <span 758class="snippet-intelligence__number">01</span><div><h3>What this design does</h3><p 759data-insights-description>The snippet presents a Bootstrap 4.1.1 based search results layout focused on a left-column results list. A header area invites refining the query with a short heading and a single-line search input, followed by a muted âAbout X resultsâ line. The main results are rendered as a vertical list where each item (search-item) pairs a left-aligned avatar image with a right-side content panel. The avatar is circular (70x70) with a white border, and the content area is offset with a generous left margin to clear the image. Each item contains a bold title link, a compact metadata line (date, comments count, and one or more categories), and a descriptive excerpt. Typography is restrained: dates and meta use small, uppercase/light gray styling, while titles are clearly emphasized. A hover treatment adds a dotted underline to links for affordance. At the bottom, a Bootstrap-styled pagination control and a separate page indicator are provided. Layout behavior follows Bootstrap grid rules (col-md-8) so the column scales on larger viewports and stacks to full width on smaller devices; padding and offsets maintain clear separation between avatar and text. Customization points are straightforward: swap item data (titles, dates, c
759ategories, excerpts), change avatar sources, adjust result counts, and tweak typography, spacing, or avatar size to fit a brand. This pattern suits lists of searchable items such as blogs, knowledge-base articles, products, design projects, news, forum threads, courses, or job listings.</p><button 760type="button" class="snippet-intelligence__expand" data-insights-expand data-expand-label="Read more" data-collapse-label="Show less" aria-expanded="false" hidden>Read more</button></div> </article><div 761class="snippet-intelligence__ideas"><div 762class="snippet-intelligence__ideas-head"><div><span 763class="snippet-intelligence__number">02</span><h3>Ideas you can build with it</h3></div><small>Practical project directions</small></div><div 764class="snippet-intelligence__idea-grid" data-insights-ideas> <article><span><i 765class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Blog Post Search Results</strong><p>Display blog posts returned by a search with author avatars, titles, metadata, and short excerpts.</p></div></article> <article><span><i 766class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Knowledge Base Articles</strong><p>Show help articles with contributor avatars, article titles, publish dates, categories, and concise summaries.</p></div></article> <article><span><i 767class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Product Discovery</strong><p>List product results with image thumbnails, names, added dates, categories, and brief descriptions.</p></div></article> <article><span><i 768class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Design Portfolio Listings</strong><p>Present design case studies with designer avatars, project titles, dates, tags, and overviews.</p></div></article> <article><span><i 769class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>News Search Results</strong><p>Arrange news items by date with section tags and short summaries for quick scanning.</p></div></article> <article><span><i 770class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Forum Threads</strong><p>List forum threads with user avatars, thread titles, last activity dates, reply counts, and tags.</p></div></article> <article><span><i 771class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Course Catalog</strong><p>Show courses with instructor avatars, titles, release dates, subject tags, and short descriptions.</p></div></article> <article><span><i 772class="fas fa-arrow-up" aria-hidden="true"></i></span><div><strong>Job Postings</strong><p>Display job opportunities with company avatars, job titles, posted dates, categories, and summaries.</p></div></article></div></div></div><div 773class="snippet-intelligence__actions-panel" aria-label="AI design actions"><div 774class="snippet-intelligence__actions"><div 775class="ai-action-buttons"> <button 776type="button" class="btn ai-customize-button" data-ai-customize-open aria-haspopup="dialog" aria-controls="ai-customizer-dialog" disabled> <span 777class="ai-customize-button__mark" aria-hidden="true">B</span> <span>Customize with AI</span> <span 778class="ai-customize-button__spark" aria-hidden="true">✦</span> </button><div 779class="btn-group ai-actions"> <button 780type="button" class="btn btn-info ai-actions__trigger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span 781class="ai-actions__spark" aria-hidden="true">✦</span> <span>Build with AI</span> </button><div 782class="dropdown-menu ai-actions__menu"> <button 783type="button" 784class="dropdown-item ai-actions__item ai-copy-prompt" 785data-ai-prompt="Work with this Bootdey UI example as a reusable HTML and CSS starting point.Name: bs4 simple search result 786Purpose: A reusable responsive user interface example built with HTML, CSS and JavaScript. 787Technologies: HTML, CSS and JavaScript with Bootstrap 4.1.1 788Original example: https://www.bootdey.com/snippets/view/bs4-simple-search-result 789Temporary source package: https://www.bootdey.com/ai/snippet/bootstrap/898/1790844957/ed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.jsonFirst review its structure, responsive behavior and interactions. Help me understand, customize, debug or integrate it into an existing project. Preserve semantic HTML, accessibility and mobile behavior. Return complete HTML, CSS and JavaScript when proposing code changes. Do not convert it to React or another framework unless I explicitly request it."> <span 790class="ai-actions__icon"><i 791class="far fa-copy" aria-hidden="true"></i></span> <span 792class="ai-action-label">Copy Bootdey AI brief</span> </button><div 793class="dropdown-divider"></div> <a 794class="dropdown-item ai-actions__item"
795href="https://v0.dev/chat/api/open?url=https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json" 796data-ai-provider="v0" 797target="_blank" 798rel="noopener noreferrer"> <span 799class="ai-actions__icon"> <span 800class="ai-provider-mark ai-provider-mark--v0">v0</span> </span> <span>Remix in v0</span> <i 801class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 802class="dropdown-item ai-actions__item" 803href="https://lovable.dev/?autosubmit=true#prompt=Remix%20this%20Bootdey%20UI%20example%20into%20a%20polished%2C%20working%20and%20responsive%20interface.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AUse%20the%20supplied%20source%20as%20the%20visual%20and%20functional%20starting%20point.%20Preserve%20its%20purpose%20and%20interactions%20while%20improving%20semantics%2C%20accessibility%20and%20maintainability.%20Keep%20the%20result%20in%20HTML%2C%20CSS%20and%20JavaScript%20unless%20I%20explicitly%20request%20another%20stack%2C%20and%20generate%20a%20runnable%20preview." 804data-ai-provider="lovable" 805target="_blank" 806rel="noopener noreferrer"> <span 807class="ai-actions__icon"> <i 808class="far fa-heart" aria-hidden="true"></i> </span> <span>Build in Lovable</span> <i 809class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 810class="dropdown-item ai-actions__item" 811href="https://chatgpt.com/?q=Help%20me%20understand%20and%20adapt%20this%20Bootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 812data-ai-provider="chatgpt" 813target="_blank" 814rel="noopener noreferrer"> <span 815class="ai-actions__icon"> <i 816class="fas fa-comment" aria-hidden="true"></i> </span> <span>Ask ChatGPT</span> <i 817class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 818class="dropdown-item ai-actions__item" 819href="https://claude.ai/new?q=Help%20me%20understand%20and%20adapt%20this%20Bootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 820data-ai-provider="claude" 821target="_blank" 822rel="noopener noreferrer"> <span 823class="ai-actions__icon"> <i 824class="fas fa-code" aria-hidden="true"></i> </span> <span>Ask Claude</span> <i 825class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a> <a 826class="dropdown-item ai-actions__item" 827href="https://aistudio.google.com/prompts/new_chat?prompt=Help%20me%20understand%20and%20adapt%20this%20B
827ootdey%20UI%20example.%0A%0AName%3A%20bs4%20simple%20search%20result%0APurpose%3A%20A%20reusable%20responsive%20user%20interface%20example%20built%20with%20HTML%2C%20CSS%20and%20JavaScript.%0ATechnologies%3A%20HTML%2C%20CSS%20and%20JavaScript%20with%20Bootstrap%204.1.1%0AOriginal%20example%3A%20https%3A%2F%2Fwww.bootdey.com%2Fsnippets%2Fview%2Fbs4-simple-search-result%0ATemporary%20source%20package%3A%20https%3A%2F%2Fwww.bootdey.com%2Fai%2Fsnippet%2Fbootstrap%2F898%2F1790844957%2Fed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json%0A%0AExplain%20how%20its%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%2C%20identify%20dependencies%20and%20responsive%20behavior%2C%20and%20be%20ready%20to%20customize%2C%20integrate%20or%20debug%20it.%20Keep%20suggested%20changes%20framework-neutral%20unless%20I%20ask%20for%20a%20conversion." 828data-ai-provider="gemini" 829target="_blank" 830rel="noopener noreferrer"> <span 831class="ai-actions__icon"> <i 832class="far fa-gem" aria-hidden="true"></i> </span> <span>Ask Gemini</span> <i 833class="fas fa-arrow-up ai-actions__external" aria-hidden="true"></i> </a></div></div></div></div></div> </section></div></section> <nav 834class="container sv-breadcrumbs" aria-label="Breadcrumb"><ol 835class="breadcrumb"><li><a 836href="https://www.bootdey.com">Home</a></li><li><a 837href="https://www.bootdey.com/bootstrap-snippets">HTML examples</a></li><li 838class="active">bs4 simple search result</li></ol></nav> </main><div 839class="ai-customizer" id="ai-customizer-dialog" data-ai-customizer data-stage="choose" data-filter="all" 840data-source-context="Name: bs4 simple search result 841Purpose: A reusable responsive user interface example built with HTML, CSS and JavaScript. 842Technologies: HTML, CSS and JavaScript with Bootstrap 4.1.1 843Original example: https://www.bootdey.com/snippets/view/bs4-simple-search-result" 844data-context-link-url="/ai/snippet-context-link/bootstrap/898" 845data-context-url="https://www.bootdey.com/ai/snippet/bootstrap/898/1790844957/ed46f8c51cf3d2362ec0f66fbf237419c0ff3cf6244e14761dd52799a430dede.json" 846data-context-expires="1790844957" hidden><div 847class="ai-customizer__backdrop" data-ai-customizer-close></div> <section 848class="ai-customizer__dialog" role="dialog" aria-modal="true" aria-labelledby="ai-customizer-title" aria-describedby="ai-customizer-intro" tabindex="-1"> <header 849class="ai-customizer__header"><div 850class="ai-customizer__identity"> <span 851class="ai-customizer__brand" aria-hidden="true">B<span>â¦</span></span><div 852class="ai-customizer__heading"><span 853class="ai-customizer__eyebrow">BOOTDEY · DESIGN STUDIO</span><h2 id="ai-customizer-title">Make this design yours</h2><p 854id="ai-customizer-intro">Choose a direction or describe your own. Then continue with your AI.</p></div></div><div 855class="ai-customizer__header-end"><div 856class="ai-customizer__progress" aria-label="Customization progress"><span 857class="ai-customizer__progress-one"><b>1</b> Choose a direction</span><i 858class="fas fa-arrow-right" aria-hidden="true"></i><span 859class="ai-customizer__progress-two"><b>2</b> Make it yours</span></div><button 860class="ai-customizer__close" type="button" data-ai-customizer-close aria-label="Close customization"><i 861class="fas fa-times" aria-hidden="true"></i></button></div> </header><div 862class="ai-customizer__body"><div 863class="ai-customizer__browse" id="ai-customizer-browse"><div 864class="ai-customizer__section-heading"><div><span 865class="ai-customizer__section-kicker">01 / EXPLORE</span><h3>What could this become?</h3><p>Pick a starting point. You can change your mind at any time.</p></div><span 866class="ai-customizer__idea-count">59 ideas</span></div><div 867class="ai-customizer__browse-tools"> <label 868class="ai-customizer__search"><i 869class="fas fa-search" aria-hidden="true"></i><span 870class="sr-only">Search customization ideas</span><input 871type="search" data-ai-customizer-search placeholder="Search a look, feeling or changeâ¦" autocomplete="off"><span 872class="ai-customizer__search-shortcut" aria-hidden="true">/</span></label><div 873class="ai-customizer__filters" aria-label="Filter customization ideas"><button 874type="button" class="is-active" data-ai-customizer-filter="all" aria-pressed="true">All ideas</button><button 875type="button" data-ai-customizer-filter="featured" aria-pressed="false">Start here</button><button 876type="button" data-ai-customizer-filter="0" aria-pressed="false">Design movements</button><button 877type="button" data-ai-customizer-filter="1" aria-pressed="false">Art direction & mood</button><button 878type="button" data-ai-customizer-filter="2" aria-pressed="false">Brand & visual system</button><button 879type="button" data-ai-customizer-filter="3" aria-pressed="false">Composition & behavior</button></div></div><p 880class="ai-customizer__mobile-guide"><i 881class="fas fa-lock" aria-hidden="true"></i>
881 Choose an idea to unlock your details and AI options.</p><div 882class="ai-customizer__options" data-ai-customizer-options><p 883class="ai-customizer__featured-caption">A few good places to begin <span>Explore all ideas above</span></p><div 884class="ai-customizer__group ai-customizer__group--own"><div 885class="ai-customizer__option-grid"><button 886type="button" class="ai-customizer__option ai-customizer__option--own" data-ai-customizer-option data-featured="1" data-title="I have my own idea" data-description="Tell the AI exactly what you imagine." data-prompt="" aria-pressed="false"><span 887class="ai-customizer__option-art ai-customizer__option-art--own" aria-hidden="true"><svg 888focusable="false" aria-hidden="true"><use 889href="/img/ai-idea-icons.svg#ai-icon-pen-tool"></use></svg></span><span 890class="ai-customizer__option-copy"><strong>I have my own idea</strong><small>Tell the AI exactly what you imagine.</small></span><span 891class="ai-customizer__option-select" aria-hidden="true"><i 892class="fas fa-arrow-right"></i></span></button></div></div><div 893class="ai-customizer__group" data-ai-customizer-group="0"><h4>Design movements</h4><div 894class="ai-customizer__option-grid"> <button 895type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Flat design" data-description="Clean planes, clear color and zero ornamental depth." data-prompt="Transform this exact interface using a refined flat design language: clean color planes, simple shapes, crisp icons, no decorative shadows and an unmistakable hierarchy."><span 896class="ai-customizer__option-art ai-customizer__option-art--flat-design ai-customizer__option-art--blue" aria-hidden="true"><svg 897focusable="false" aria-hidden="true"><use 898href="/img/ai-idea-icons.svg#ai-icon-square"></use></svg></span><span 899class="ai-customizer__option-copy"><strong>Flat design</strong><small>Clean planes, clear color and zero ornamental depth.</small></span><span 900class="ai-customizer__option-select" aria-hidden="true"><i 901class="fas fa-arrow-right"></i></span></button><button 902type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Neumorphism" data-description="Soft extruded controls with careful readable contrast." data-prompt="Apply a usable neumorphic direction with softly extruded surfaces, paired light and dark shadows, clear focus states and sufficient contrast. Keep depth subtle and avoid low-contrast text."><span 903class="ai-customizer__option-art ai-customizer__option-art--neumorphism ai-customizer__option-art--slate" aria-hidden="true"><svg 904focusable="false" aria-hidden="true"><use 905href="/img/ai-idea-icons.svg#ai-icon-circle-dot"></use></svg></span><span 906class="ai-customizer__option-copy"><strong>Neumorphism</strong><small>Soft extruded controls with careful readable contrast.</small></span><span 907class="ai-customizer__option-select" aria-hidden="true"><i 908class="fas fa-arrow-right"></i></span></button><button 909type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Skeuomorphism" data-description="Tactile real-world cues reinterpreted for modern screens." data-prompt="Create a modern skeuomorphic direction with tactile materials, familiar physical cues and dimensional controls, balanced by contemporary typography and accessible interaction states."><span 910class="ai-customizer__option-art ai-customizer__option-art--skeuomorphism ai-customizer__option-art--amber" aria-hidden="true"><svg 911focusable="false" aria-hidden="true"><use 912href="/img/ai-idea-icons.svg#ai-icon-toggle-right"></use></svg></span><span 913class="ai-customizer__option-copy"><strong>Skeuomorphism</strong><small>Tactile real-world cues reinterpreted for modern screens.</small></span><span 914class="ai-customizer__option-select" aria-hidden="true"><i 915class="fas fa-arrow-right"></i></span></button><button 916type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Colorful maximalism" data-description="Layered color, pattern and personality with intentional order." data-prompt="Redesign this interface with controlled colorful maximalism: layered coordinated colors, expressive pattern, bold type and surprising detail while preserving a clear reading order."><span 917class="ai-customizer__option-art ai-customizer__option-art--colorful-maximalism ai-customizer__option-art--rose" aria-hidden="true"><svg 918focusable="false" aria-hidden="true"><use 919href="/img/ai-idea-icons.svg#ai-icon-palette"></use></svg></span><span 920class="ai-customizer__option-copy"><strong>Colorful maximalism</strong><small>Layered color, pattern and personality with intentional order.</small></span><span 921class="ai-customizer__option-select" aria-hidden="true"><i 922class="fas fa-arrow-right"></i></span></button><button 923type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Material Design" data-description="Purposeful elevation, motion and systematic components." data-prompt="Ap
923ply a contemporary Material Design direction with purposeful elevation, systematic spacing, expressive color, clear states and motion that explains hierarchy. Preserve the current technology stack."><span 924class="ai-customizer__option-art ai-customizer__option-art--material-design ai-customizer__option-art--blue" aria-hidden="true"><svg 925focusable="false" aria-hidden="true"><use 926href="/img/ai-idea-icons.svg#ai-icon-layers-3"></use></svg></span><span 927class="ai-customizer__option-copy"><strong>Material Design</strong><small>Purposeful elevation, motion and systematic components.</small></span><span 928class="ai-customizer__option-select" aria-hidden="true"><i 929class="fas fa-arrow-right"></i></span></button><button 930type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Claymorphism" data-description="Inflated forms, soft volume and cheerful dimensional color." data-prompt="Give this design a polished claymorphism style with inflated rounded forms, soft dimensional shadows, cheerful color and strong readable typography."><span 931class="ai-customizer__option-art ai-customizer__option-art--claymorphism ai-customizer__option-art--rose" aria-hidden="true"><svg 932focusable="false" aria-hidden="true"><use 933href="/img/ai-idea-icons.svg#ai-icon-shapes"></use></svg></span><span 934class="ai-customizer__option-copy"><strong>Claymorphism</strong><small>Inflated forms, soft volume and cheerful dimensional color.</small></span><span 935class="ai-customizer__option-select" aria-hidden="true"><i 936class="fas fa-arrow-right"></i></span></button><button 937type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Bauhaus" data-description="Primary geometry, functional type and dynamic composition." data-prompt="Apply a Bauhaus-inspired art direction using functional typography, primary geometry, strong proportion and dynamic asymmetric composition."><span 938class="ai-customizer__option-art ai-customizer__option-art--bauhaus ai-customizer__option-art--amber" aria-hidden="true"><svg 939focusable="false" aria-hidden="true"><use 940href="/img/ai-idea-icons.svg#ai-icon-triangle"></use></svg></span><span 941class="ai-customizer__option-copy"><strong>Bauhaus</strong><small>Primary geometry, functional type and dynamic composition.</small></span><span 942class="ai-customizer__option-select" aria-hidden="true"><i 943class="fas fa-arrow-right"></i></span></button><button 944type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Art Deco" data-description="Elegant symmetry, fine lines and geometric glamour." data-prompt="Create an Art Deco-inspired interface with elegant symmetry, geometric motifs, fine lines, refined contrast and restrained metallic color cues."><span 945class="ai-customizer__option-art ai-customizer__option-art--art-deco ai-customizer__option-art--slate" aria-hidden="true"><svg 946focusable="false" aria-hidden="true"><use 947href="/img/ai-idea-icons.svg#ai-icon-diamond"></use></svg></span><span 948class="ai-customizer__option-copy"><strong>Art Deco</strong><small>Elegant symmetry, fine lines and geometric glamour.</small></span><span 949class="ai-customizer__option-select" aria-hidden="true"><i 950class="fas fa-arrow-right"></i></span></button><button 951type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Memphis design" data-description="Playful geometry, pattern and unexpected color rhythm." data-prompt="Apply a contemporary Memphis direction with playful geometry, coordinated pattern, unexpected color rhythm and a disciplined underlying layout."><span 952class="ai-customizer__option-art ai-customizer__option-art--memphis-design ai-customizer__option-art--rose" aria-hidden="true"><svg 953focusable="false" aria-hidden="true"><use 954href="/img/ai-idea-icons.svg#ai-icon-party-popper"></use></svg></span><span 955class="ai-customizer__option-copy"><strong>Memphis design</strong><small>Playful geometry, pattern and unexpected color rhythm.</small></span><span 956class="ai-customizer__option-select" aria-hidden="true"><i 957class="fas fa-arrow-right"></i></span></button><button 958type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Y2K digital" data-description="Chrome, gloss and optimistic early-web futurism." data-prompt="Reimagine this interface through a polished Y2K digital lens using chrome-like highlights, translucent gloss, optimistic color and early-web cues with modern usability."><span 959class="ai-customizer__option-art ai-customizer__option-art--y2k-digital ai-customizer__option-art--violet" aria-hidden="true"><svg 960focusable="false" aria-hidden="true"><use 961href="/img/ai-idea-icons.svg#ai-icon-disc-3"></use></svg></span><span 962class="ai-customizer__option-copy"><strong>Y2K digital</strong><small>Chrome, gloss and optimistic early-web futurism.</small></span><span 963class="ai-customizer__option-select" aria-hidden="true"><i 964class="fas fa-arrow-right"></i></span></button><button 965type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Cyberpunk" data-description="Dense urban contrast, electric accents and technical type." data-prompt="Create a sophisticated cyberpunk direction with deep urban surfaces, electric accent color, technical typography and dense but legible information hierarchy."><span 966class="ai-customizer__option-art ai-customizer__option-art--cyberpunk ai-customizer__option-art--violet" aria-hidden="true"><svg 967focusable="false" aria-hidden="true"><use 968href="/img/ai-idea-icons.svg#ai-icon-circuit-board"></use></svg></span><span 969class="ai-customizer__option-copy"><strong>Cyberpunk</strong><small>Dense urban contrast, electric accents and technical type.</small></span><span 970class="ai-customizer__option-select" aria-hidden="true"><i 971class="fas fa-arrow-right"></i></span></button><button 972type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Vaporwave" data-description="Dreamlike gradients, retro grids and surreal atmosphere." data-prompt="Ap
972ply a refined vaporwave aesthetic with dreamlike gradients, retro-digital grid cues and surreal atmosphere while keeping content hierarchy sharp."><span 973class="ai-customizer__option-art ai-customizer__option-art--vaporwave ai-customizer__option-art--rose" aria-hidden="true"><svg 974focusable="false" aria-hidden="true"><use 975href="/img/ai-idea-icons.svg#ai-icon-waves"></use></svg></span><span 976class="ai-customizer__option-copy"><strong>Vaporwave</strong><small>Dreamlike gradients, retro grids and surreal atmosphere.</small></span><span 977class="ai-customizer__option-select" aria-hidden="true"><i 978class="fas fa-arrow-right"></i></span></button><button 979type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Scandinavian" data-description="Functional calm, pale warmth and honest simplicity." data-prompt="Redesign this interface in a Scandinavian direction with functional simplicity, pale warm neutrals, honest materials, clear typography and comfortable whitespace."><span 980class="ai-customizer__option-art ai-customizer__option-art--scandinavian ai-customizer__option-art--green" aria-hidden="true"><svg 981focusable="false" aria-hidden="true"><use 982href="/img/ai-idea-icons.svg#ai-icon-leaf"></use></svg></span><span 983class="ai-customizer__option-copy"><strong>Scandinavian</strong><small>Functional calm, pale warmth and honest simplicity.</small></span><span 984class="ai-customizer__option-select" aria-hidden="true"><i 985class="fas fa-arrow-right"></i></span></button><button 986type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Japandi" data-description="Warm minimalism, natural balance and quiet craft." data-prompt="Apply a Japandi visual direction combining Japanese restraint and Scandinavian warmth through natural color, balanced negative space and quiet crafted details."><span 987class="ai-customizer__option-art ai-customizer__option-art--japandi ai-customizer__option-art--green" aria-hidden="true"><svg 988focusable="false" aria-hidden="true"><use 989href="/img/ai-idea-icons.svg#ai-icon-sprout"></use></svg></span><span 990class="ai-customizer__option-copy"><strong>Japandi</strong><small>Warm minimalism, natural balance and quiet craft.</small></span><span 991class="ai-customizer__option-select" aria-hidden="true"><i 992class="fas fa-arrow-right"></i></span></button><button 993type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Hand-drawn" data-description="Human linework, imperfect details and crafted warmth." data-prompt="Give this interface a sophisticated hand-drawn personality using human linework, intentionally imperfect details and crafted warmth without hurting clarity."><span 994class="ai-customizer__option-art ai-customizer__option-art--hand-drawn ai-customizer__option-art--amber" aria-hidden="true"><svg 995focusable="false" aria-hidden="true"><use 996href="/img/ai-idea-icons.svg#ai-icon-pencil-line"></use></svg></span><span 997class="ai-customizer__option-copy"><strong>Hand-drawn</strong><small>Human linework, imperfect details and crafted warmth.</small></span><span 998class="ai-customizer__option-select" aria-hidden="true"><i 999class="fas fa-arrow-right"></i></span></button><button 1000type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Editorial collage" data-description="Layered imagery, cut-paper rhythm and expressive type." data-prompt="Create an editorial collage direction using layered framing, cut-paper rhythm, expressive typography and intentional overlaps while preserving usable controls."><span 1001class="ai-customizer__option-art ai-customizer__option-art--editorial-collage ai-customizer__option-art--blue" aria-hidden="true"><svg 1002focusable="false" aria-hidden="true"><use 1003href="/img/ai-idea-icons.svg#ai-icon-images"></use></svg></span><span 1004class="ai-customizer__option-copy"><strong>Editorial collage</strong><small>Layered imagery, cut-paper rhythm and expressive type.</small></span><span 1005class="ai-customizer__option-select" aria-hidden="true"><i 1006class="fas fa-arrow-right"></i></span></button><button 1007type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="3D dimensional" data-description="Spatial depth, dimensional objects and cinematic light." data-prompt="Give this interface a dimensional 3D-inspired direction through spatial layering, modeled forms and cinematic lighting using CSS-safe techniques and restrained performance cost."><span 1008class="ai-customizer__option-art ai-customizer__option-art--3d-dimensional ai-customizer__option-art--violet" aria-hidden="true"><svg 1009focusable="false" aria-hidden="true"><use 1010href="/img/ai-idea-icons.svg#ai-icon-box"></use></svg></span><span 1011class="ai-customizer__option-copy"><strong>3D dimensional</strong><small>Spatial depth, dimensional objects and cinematic light.</small></span><span 1012class="ai-customizer__option-select" aria-hidden="true"><i 1013class="fas fa-arrow-right"></i></span></button><button 1014type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Brutal minimalism" data-description="Radical reduction with blunt type and uncompromising grids." data-prompt="Ap
1014ply brutal minimalism: radically reduce ornament, use blunt typography, exposed structure and an uncompromising grid while retaining excellent usability."><span 1015class="ai-customizer__option-art ai-customizer__option-art--brutal-minimalism ai-customizer__option-art--slate" aria-hidden="true"><svg 1016focusable="false" aria-hidden="true"><use 1017href="/img/ai-idea-icons.svg#ai-icon-square-dashed"></use></svg></span><span 1018class="ai-customizer__option-copy"><strong>Brutal minimalism</strong><small>Radical reduction with blunt type and uncompromising grids.</small></span><span 1019class="ai-customizer__option-select" aria-hidden="true"><i 1020class="fas fa-arrow-right"></i></span></button><button 1021type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Solarpunk" data-description="Optimistic technology, natural color and regenerative energy." data-prompt="Create a solarpunk direction blending optimistic technology with botanical forms, sunlit colors, clean information design and a hopeful sustainable personality."><span 1022class="ai-customizer__option-art ai-customizer__option-art--solarpunk ai-customizer__option-art--amber" aria-hidden="true"><svg 1023focusable="false" aria-hidden="true"><use 1024href="/img/ai-idea-icons.svg#ai-icon-sun"></use></svg></span><span 1025class="ai-customizer__option-copy"><strong>Solarpunk</strong><small>Optimistic technology, natural color and regenerative energy.</small></span><span 1026class="ai-customizer__option-select" aria-hidden="true"><i 1027class="fas fa-arrow-right"></i></span></button><button 1028type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Organic modernism" data-description="Fluid shapes, natural rhythm and contemporary restraint." data-prompt="Apply organic modernism with fluid shapes, nature-derived rhythm, tactile neutral surfaces and contemporary typographic restraint."><span 1029class="ai-customizer__option-art ai-customizer__option-art--organic-modernism ai-customizer__option-art--green" aria-hidden="true"><svg 1030focusable="false" aria-hidden="true"><use 1031href="/img/ai-idea-icons.svg#ai-icon-flower-2"></use></svg></span><span 1032class="ai-customizer__option-copy"><strong>Organic modernism</strong><small>Fluid shapes, natural rhythm and contemporary restraint.</small></span><span 1033class="ai-customizer__option-select" aria-hidden="true"><i 1034class="fas fa-arrow-right"></i></span></button></div></div><div 1035class="ai-customizer__group" data-ai-customizer-group="1"><h4>Art direction & mood</h4><div 1036class="ai-customizer__option-grid"> <button 1037type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Modern premium" data-description="Refined hierarchy, crisp spacing and an elevated finish." data-prompt="Give this exact design a modern premium art direction with refined hierarchy, crisp spacing, sophisticated surfaces and restrained visual details. Preserve its purpose and content."><span 1038class="ai-customizer__option-art ai-customizer__option-art--modern-premium ai-customizer__option-art--violet" aria-hidden="true"><svg 1039focusable="false" aria-hidden="true"><use 1040href="/img/ai-idea-icons.svg#ai-icon-sparkles"></use></svg></span><span 1041class="ai-customizer__option-copy"><strong>Modern premium</strong><small>Refined hierarchy, crisp spacing and an elevated finish.</small></span><span 1042class="ai-customizer__option-select" aria-hidden="true"><i 1043class="fas fa-arrow-right"></i></span></button><button 1044type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Minimal editorial" data-description="Quiet composition, generous whitespace and expressive type." data-prompt="Redesign this exact interface in a minimal editorial style using generous whitespace, expressive typography, disciplined alignment and very little visual noise."><span 1045class="ai-customizer__option-art ai-customizer__option-art--minimal-editorial ai-customizer__option-art--slate" aria-hidden="true"><svg 1046focusable="false" aria-hidden="true"><use 1047href="/img/ai-idea-icons.svg#ai-icon-feather"></use></svg></span><span 1048class="ai-customizer__option-copy"><strong>Minimal editorial</strong><small>Quiet composition, generous whitespace and expressive type.</small></span><span 1049class="ai-customizer__option-select" aria-hidden="true"><i 1050class="fas fa-arrow-right"></i></span></button><button 1051type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Bold editorial" data-description="Oversized type, strong rhythm and magazine-like composition." data-prompt="Ap
1051ply a bold editorial art direction with oversized typography, dramatic scale contrast, asymmetric composition and a polished magazine-like rhythm."><span 1052class="ai-customizer__option-art ai-customizer__option-art--bold-editorial ai-customizer__option-art--blue" aria-hidden="true"><svg 1053focusable="false" aria-hidden="true"><use 1054href="/img/ai-idea-icons.svg#ai-icon-newspaper"></use></svg></span><span 1055class="ai-customizer__option-copy"><strong>Bold editorial</strong><small>Oversized type, strong rhythm and magazine-like composition.</small></span><span 1056class="ai-customizer__option-select" aria-hidden="true"><i 1057class="fas fa-arrow-right"></i></span></button><button 1058type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Quiet luxury" data-description="Elegant neutrals, fine details and understated depth." data-prompt="Transform this design with a quiet luxury aesthetic: elegant neutrals, refined typography, fine borders, subtle depth and generous spacing without ornamental excess."><span 1059class="ai-customizer__option-art ai-customizer__option-art--quiet-luxury ai-customizer__option-art--violet" aria-hidden="true"><svg 1060focusable="false" aria-hidden="true"><use 1061href="/img/ai-idea-icons.svg#ai-icon-gem"></use></svg></span><span 1062class="ai-customizer__option-copy"><strong>Quiet luxury</strong><small>Elegant neutrals, fine details and understated depth.</small></span><span 1063class="ai-customizer__option-select" aria-hidden="true"><i 1064class="fas fa-arrow-right"></i></span></button><button 1065type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Soft modern" data-description="Friendly shapes, calm colors and gentle visual depth." data-prompt="Give this design a soft modern direction with friendly rounded forms, a calm color palette, gentle shadows and comfortable spacing."><span 1066class="ai-customizer__option-art ai-customizer__option-art--soft-modern ai-customizer__option-art--rose" aria-hidden="true"><svg 1067focusable="false" aria-hidden="true"><use 1068href="/img/ai-idea-icons.svg#ai-icon-cloud"></use></svg></span><span 1069class="ai-customizer__option-copy"><strong>Soft modern</strong><small>Friendly shapes, calm colors and gentle visual depth.</small></span><span 1070class="ai-customizer__option-select" aria-hidden="true"><i 1071class="fas fa-arrow-right"></i></span></button><button 1072type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Playful and colorful" data-description="Bright accents, expressive shapes and energetic personality." data-prompt="Create a playful, colorful art direction using expressive shapes, bright but coordinated accents, lively typography and delightful visual details. Keep it polished."><span 1073class="ai-customizer__option-art ai-customizer__option-art--playful-and-colorful ai-customizer__option-art--amber" aria-hidden="true"><svg 1074focusable="false" aria-hidden="true"><use 1075href="/img/ai-idea-icons.svg#ai-icon-smile"></use></svg></span><span 1076class="ai-customizer__option-copy"><strong>Playful and colorful</strong><small>Bright accents, expressive shapes and energetic personality.</small></span><span 1077class="ai-customizer__option-select" aria-hidden="true"><i 1078class="fas fa-arrow-right"></i></span></button><button 1079type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Futuristic interface" data-description="Sharp contrast, luminous accents and technical precision." data-prompt="Redesign this interface with a sophisticated futuristic aesthetic using precise geometry, luminous accents, layered depth and strong contrast without becoming visually noisy."><span 1080class="ai-customizer__option-art ai-customizer__option-art--futuristic-interface ai-customizer__option-art--blue" aria-hidden="true"><svg 1081focusable="false" aria-hidden="true"><use 1082href="/img/ai-idea-icons.svg#ai-icon-rocket"></use></svg></span><span 1083class="ai-customizer__option-copy"><strong>Futuristic interface</strong><small>Sharp contrast, luminous accents and technical precision.</small></span><span 1084class="ai-customizer__option-select" aria-hidden="true"><i 1085class="fas fa-arrow-right"></i></span></button><button 1086type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Neo-brutalist" data-description="Hard edges, bold type and intentionally raw contrast." data-prompt="Ap
1086ply a polished neo-brutalist direction with bold typography, hard edges, visible borders, strong color blocking and intentionally raw but usable composition."><span 1087class="ai-customizer__option-art ai-customizer__option-art--neo-brutalist ai-customizer__option-art--slate" aria-hidden="true"><svg 1088focusable="false" aria-hidden="true"><use 1089href="/img/ai-idea-icons.svg#ai-icon-square-split-horizontal"></use></svg></span><span 1090class="ai-customizer__option-copy"><strong>Neo-brutalist</strong><small>Hard edges, bold type and intentionally raw contrast.</small></span><span 1091class="ai-customizer__option-select" aria-hidden="true"><i 1092class="fas fa-arrow-right"></i></span></button><button 1093type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Bento composition" data-description="Modular panels, varied scale and clear visual grouping." data-prompt="Recompose this design as a contemporary bento-style layout with modular panels, varied scale, strong grouping and a clear reading path."><span 1094class="ai-customizer__option-art ai-customizer__option-art--bento-composition ai-customizer__option-art--blue" aria-hidden="true"><svg 1095focusable="false" aria-hidden="true"><use 1096href="/img/ai-idea-icons.svg#ai-icon-layout-grid"></use></svg></span><span 1097class="ai-customizer__option-copy"><strong>Bento composition</strong><small>Modular panels, varied scale and clear visual grouping.</small></span><span 1098class="ai-customizer__option-select" aria-hidden="true"><i 1099class="fas fa-arrow-right"></i></span></button><button 1100type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Elegant glass" data-description="Translucent layers, soft light and restrained depth." data-prompt="Apply an elegant glass-inspired visual style using restrained translucency, soft highlights, layered surfaces and excellent text contrast."><span 1101class="ai-customizer__option-art ai-customizer__option-art--elegant-glass ai-customizer__option-art--violet" aria-hidden="true"><svg 1102focusable="false" aria-hidden="true"><use 1103href="/img/ai-idea-icons.svg#ai-icon-panels-top-left"></use></svg></span><span 1104class="ai-customizer__option-copy"><strong>Elegant glass</strong><small>Translucent layers, soft light and restrained depth.</small></span><span 1105class="ai-customizer__option-select" aria-hidden="true"><i 1106class="fas fa-arrow-right"></i></span></button><button 1107type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Monochrome system" data-description="One color family with precise tonal hierarchy." data-prompt="Redesign this interface as a sophisticated monochrome system using one color family, precise tonal hierarchy, texture and typography for distinction."><span 1108class="ai-customizer__option-art ai-customizer__option-art--monochrome-system ai-customizer__option-art--slate" aria-hidden="true"><svg 1109focusable="false" aria-hidden="true"><use 1110href="/img/ai-idea-icons.svg#ai-icon-contrast"></use></svg></span><span 1111class="ai-customizer__option-copy"><strong>Monochrome system</strong><small>One color family with precise tonal hierarchy.</small></span><span 1112class="ai-customizer__option-select" aria-hidden="true"><i 1113class="fas fa-arrow-right"></i></span></button><button 1114type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Dark cinematic" data-description="Deep surfaces, dramatic contrast and focused highlights." data-prompt="Create a dark cinematic direction with deep layered surfaces, dramatic but readable contrast, focused highlights and elegant visual depth."><span 1115class="ai-customizer__option-art ai-customizer__option-art--dark-cinematic ai-customizer__option-art--violet" aria-hidden="true"><svg 1116focusable="false" aria-hidden="true"><use 1117href="/img/ai-idea-icons.svg#ai-icon-moon-star"></use></svg></span><span 1118class="ai-customizer__option-copy"><strong>Dark cinematic</strong><small>Deep surfaces, dramatic contrast and focused highlights.</small></span><span 1119class="ai-customizer__option-select" aria-hidden="true"><i 1120class="fas fa-arrow-right"></i></span></button><button 1121type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Light and airy" data-description="Open space, luminous surfaces and calm contrast." data-prompt="Give this design a light and airy art direction with open composition, luminous surfaces, delicate borders and calm readable contrast."><span 1122class="ai-customizer__option-art ai-customizer__option-art--light-and-airy ai-customizer__option-art--amber" aria-hidden="true"><svg 1123focusable="false" aria-hidden="true"><use 1124href="/img/ai-idea-icons.svg#ai-icon-sun"></use></svg></span><span 1125class="ai-customizer__option-copy"><strong>Light and airy</strong><small>Open space, luminous surfaces and calm contrast.</small></span><span 1126class="ai-customizer__option-select" aria-hidden="true"><i 1127class="fas fa-arrow-right"></i></span></button><button 1128type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Warm and organic" data-description="Earthy color, natural curves and tactile softness." data-prompt="Ap
1128ply a warm organic visual direction with earthy colors, natural curves, tactile surfaces and relaxed typography while preserving clarity."><span 1129class="ai-customizer__option-art ai-customizer__option-art--warm-and-organic ai-customizer__option-art--green" aria-hidden="true"><svg 1130focusable="false" aria-hidden="true"><use 1131href="/img/ai-idea-icons.svg#ai-icon-leaf"></use></svg></span><span 1132class="ai-customizer__option-copy"><strong>Warm and organic</strong><small>Earthy color, natural curves and tactile softness.</small></span><span 1133class="ai-customizer__option-select" aria-hidden="true"><i 1134class="fas fa-arrow-right"></i></span></button><button 1135type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Geometric style" data-description="Precise shapes, structured rhythm and graphic accents." data-prompt="Redesign this interface around a strong geometric language using precise shapes, structured rhythm, graphic accents and consistent proportions."><span 1136class="ai-customizer__option-art ai-customizer__option-art--geometric-style ai-customizer__option-art--rose" aria-hidden="true"><svg 1137focusable="false" aria-hidden="true"><use 1138href="/img/ai-idea-icons.svg#ai-icon-hexagon"></use></svg></span><span 1139class="ai-customizer__option-copy"><strong>Geometric style</strong><small>Precise shapes, structured rhythm and graphic accents.</small></span><span 1140class="ai-customizer__option-select" aria-hidden="true"><i 1141class="fas fa-arrow-right"></i></span></button><button 1142type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Gradient direction" data-description="Controlled color transitions and luminous focal points." data-prompt="Create a refined gradient-led art direction with controlled color transitions, luminous focal points and balanced neutral surfaces. Avoid excessive effects."><span 1143class="ai-customizer__option-art ai-customizer__option-art--gradient-direction ai-customizer__option-art--blue" aria-hidden="true"><svg 1144focusable="false" aria-hidden="true"><use 1145href="/img/ai-idea-icons.svg#ai-icon-blend"></use></svg></span><span 1146class="ai-customizer__option-copy"><strong>Gradient direction</strong><small>Controlled color transitions and luminous focal points.</small></span><span 1147class="ai-customizer__option-select" aria-hidden="true"><i 1148class="fas fa-arrow-right"></i></span></button><button 1149type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Swiss grid" data-description="Strict alignment, clear type and rational composition." data-prompt="Apply a Swiss-inspired design system with strict grid alignment, objective typography, generous whitespace and a clear rational hierarchy."><span 1150class="ai-customizer__option-art ai-customizer__option-art--swiss-grid ai-customizer__option-art--slate" aria-hidden="true"><svg 1151focusable="false" aria-hidden="true"><use 1152href="/img/ai-idea-icons.svg#ai-icon-grid-3x3"></use></svg></span><span 1153class="ai-customizer__option-copy"><strong>Swiss grid</strong><small>Strict alignment, clear type and rational composition.</small></span><span 1154class="ai-customizer__option-select" aria-hidden="true"><i 1155class="fas fa-arrow-right"></i></span></button><button 1156type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Retro digital" data-description="Nostalgic cues reworked with a contemporary finish." data-prompt="Give this design a polished retro-digital style using nostalgic color, typography and interface cues reinterpreted with contemporary spacing and usability."><span 1157class="ai-customizer__option-art ai-customizer__option-art--retro-digital ai-customizer__option-art--rose" aria-hidden="true"><svg 1158focusable="false" aria-hidden="true"><use 1159href="/img/ai-idea-icons.svg#ai-icon-gamepad-2"></use></svg></span><span 1160class="ai-customizer__option-copy"><strong>Retro digital</strong><small>Nostalgic cues reworked with a contemporary finish.</small></span><span 1161class="ai-customizer__option-select" aria-hidden="true"><i 1162class="fas fa-arrow-right"></i></span></button><button 1163type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Corporate elegant" data-description="Confident structure, trustworthy color and refined restraint." data-prompt="Create an elegant corporate art direction with confident structure, trustworthy color, refined typography and restrained details that feel contemporary."><span 1164class="ai-customizer__option-art ai-customizer__option-art--corporate-elegant ai-customizer__option-art--blue" aria-hidden="true"><svg 1165focusable="false" aria-hidden="true"><use 1166href="/img/ai-idea-icons.svg#ai-icon-briefcase-business"></use></svg></span><span 1167class="ai-customizer__option-copy"><strong>Corporate elegant</strong><small>Confident structure, trustworthy color and refined restraint.</small></span><span 1168class="ai-customizer__option-select" aria-hidden="true"><i 1169class="fas fa-arrow-right"></i></span></button><button 1170type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Creative studio" data-description="Art-directed composition with distinctive personality." data-prompt="Redesign this interface like a leading creative studio: distinctive art direction, expressive composition, confident type and memorable but coherent details."><span 1171class="ai-customizer__option-art ai-customizer__option-art--creative-studio ai-customizer__option-art--violet" aria-hidden="true"><svg 1172focusable="false" aria-hidden="true"><use 1173href="/img/ai-idea-icons.svg#ai-icon-pen-tool"></use></svg></span><span 1174class="ai-customizer__option-copy"><strong>Creative studio</strong><small>Art-directed composition with distinctive personality.</small></span><span 1175class="ai-customizer__option-select" aria-hidden="true"><i 1176class="fas fa-arrow-right"></i></span></button><button 1177type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="High contrast" data-description="Graphic color blocking and unmistakable hierarchy." data-prompt="Build a high-contrast visual direction with graphic color blocking, unmistakable hierarchy, decisive typography and accessible readability."><span 1178class="ai-customizer__option-art ai-customizer__option-art--high-contrast ai-customizer__option-art--amber" aria-hidden="true"><svg 1179focusable="false" aria-hidden="true"><use 1180href="/img/ai-idea-icons.svg#ai-icon-scan-line"></use></svg></span><span 1181class="ai-customizer__option-copy"><strong>High contrast</strong><small>Graphic color blocking and unmistakable hierarchy.</small></span><span 1182class="ai-customizer__option-select" aria-hidden="true"><i 1183class="fas fa-arrow-right"></i></span></button><button 1184type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Pastel palette" data-description="Soft color combinations with enough visual definition." data-prompt="Ap
1184ply a sophisticated pastel palette with soft color combinations, clear separation, readable contrast and a fresh contemporary personality."><span 1185class="ai-customizer__option-art ai-customizer__option-art--pastel-palette ai-customizer__option-art--rose" aria-hidden="true"><svg 1186focusable="false" aria-hidden="true"><use 1187href="/img/ai-idea-icons.svg#ai-icon-paintbrush"></use></svg></span><span 1188class="ai-customizer__option-copy"><strong>Pastel palette</strong><small>Soft color combinations with enough visual definition.</small></span><span 1189class="ai-customizer__option-select" aria-hidden="true"><i 1190class="fas fa-arrow-right"></i></span></button></div></div><div 1191class="ai-customizer__group" data-ai-customizer-group="2"><h4>Brand & visual system</h4><div 1192class="ai-customizer__option-grid"> <button 1193type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Match my brand" data-description="Translate my colors and personality into a cohesive system." data-prompt="Adapt this exact design to my brand through its palette, typography, shapes and visual personality. Ask only for essential brand details if truly necessary."><span 1194class="ai-customizer__option-art ai-customizer__option-art--match-my-brand ai-customizer__option-art--rose" aria-hidden="true"><svg 1195focusable="false" aria-hidden="true"><use 1196href="/img/ai-idea-icons.svg#ai-icon-badge-check"></use></svg></span><span 1197class="ai-customizer__option-copy"><strong>Match my brand</strong><small>Translate my colors and personality into a cohesive system.</small></span><span 1198class="ai-customizer__option-select" aria-hidden="true"><i 1199class="fas fa-arrow-right"></i></span></button><button 1200type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Typography makeover" data-description="Create a stronger type scale, rhythm and personality." data-prompt="Redesign the typography system with a more distinctive type personality, clearer scale, stronger hierarchy, better rhythm and polished responsive sizing."><span 1201class="ai-customizer__option-art ai-customizer__option-art--typography-makeover ai-customizer__option-art--blue" aria-hidden="true"><svg 1202focusable="false" aria-hidden="true"><use 1203href="/img/ai-idea-icons.svg#ai-icon-type"></use></svg></span><span 1204class="ai-customizer__option-copy"><strong>Typography makeover</strong><small>Create a stronger type scale, rhythm and personality.</small></span><span 1205class="ai-customizer__option-select" aria-hidden="true"><i 1206class="fas fa-arrow-right"></i></span></button><button 1207type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="New color story" data-description="Build an intentional palette around a clear mood." data-prompt="Create a completely new, intentional color story for this interface. Establish a clear mood and coordinate primary, accent, neutral and surface colors with readable contrast."><span 1208class="ai-customizer__option-art ai-customizer__option-art--new-color-story ai-customizer__option-art--rose" aria-hidden="true"><svg 1209focusable="false" aria-hidden="true"><use 1210href="/img/ai-idea-icons.svg#ai-icon-swatch-book"></use></svg></span><span 1211class="ai-customizer__option-copy"><strong>New color story</strong><small>Build an intentional palette around a clear mood.</small></span><span 1212class="ai-customizer__option-select" aria-hidden="true"><i 1213class="fas fa-arrow-right"></i></span></button><button 1214type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Perfect the spacing" data-description="Establish rhythm, alignment and balanced breathing room." data-prompt="Perfect the visual spacing system: establish consistent rhythm, precise alignment, balanced whitespace and harmonious component proportions."><span 1215class="ai-customizer__option-art ai-customizer__option-art--perfect-the-spacing ai-customizer__option-art--slate" aria-hidden="true"><svg 1216focusable="false" aria-hidden="true"><use 1217href="/img/ai-idea-icons.svg#ai-icon-ruler"></use></svg></span><span 1218class="ai-customizer__option-copy"><strong>Perfect the spacing</strong><small>Establish rhythm, alignment and balanced breathing room.</small></span><span 1219class="ai-customizer__option-select" aria-hidden="true"><i 1220class="fas fa-arrow-right"></i></span></button><button 1221type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Recompose the layout" data-description="Create a stronger focal point and more dynamic reading path." data-prompt="Recompose this exact design with a stronger focal point, more dynamic visual flow and clearer grouping while preserving its content and function."><span 1222class="ai-customizer__option-art ai-customizer__option-art--recompose-the-layout ai-customizer__option-art--amber" aria-hidden="true"><svg 1223focusable="false" aria-hidden="true"><use 1224href="/img/ai-idea-icons.svg#ai-icon-panels-left-bottom"></use></svg></span><span 1225class="ai-customizer__option-copy"><strong>Recompose the layout</strong><small>Create a stronger focal point and more dynamic reading path.</small></span><span 1226class="ai-customizer__option-select" aria-hidden="true"><i 1227class="fas fa-arrow-right"></i></span></button><button 1228type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Redesign the cards" data-description="Give every panel better shape, grouping and presence." data-prompt="Redesign the cards and panels with a coherent shape language, intentional borders, refined elevation, clearer grouping and stronger content hierarchy."><span 1229class="ai-customizer__option-art ai-customizer__option-art--redesign-the-cards ai-customizer__option-art--violet" aria-hidden="true"><svg 1230focusable="false" aria-hidden="true"><use 1231href="/img/ai-idea-icons.svg#ai-icon-panels-top-left"></use></svg></span><span 1232class="ai-customizer__option-copy"><strong>Redesign the cards</strong><small>Give every panel better shape, grouping and presence.</small></span><span 1233class="ai-customizer__option-select" aria-hidden="true"><i 1234class="fas fa-arrow-right"></i></span></button><button 1235type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Style the actions" data-description="Make buttons and CTAs visually distinctive and cohesive." data-prompt="Redesign the buttons and calls to action with a distinctive but cohesive visual language, clear hierarchy, refined sizing and polished interaction states."><span 1236class="ai-customizer__option-art ai-customizer__option-art--style-the-actions ai-customizer__option-art--green" aria-hidden="true"><svg 1237focusable="false" aria-hidden="true"><use 1238href="/img/ai-idea-icons.svg#ai-icon-mouse-pointer-2"></use></svg></span><span 1239class="ai-customizer__option-copy"><strong>Style the actions</strong><small>Make buttons and CTAs visually distinctive and cohesive.</small></span><span 1240class="ai-customizer__option-select" aria-hidden="true"><i 1241class="fas fa-arrow-right"></i></span></button><button 1242type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Beautify the forms" data-description="Polish fields, labels and controls as one visual system." data-prompt="Give the forms a complete visual makeover with polished fields, labels, selectors, states and controls that share one elegant design language."><span 1243class="ai-customizer__option-art ai-customizer__option-art--beautify-the-forms ai-customizer__option-art--blue" aria-hidden="true"><svg 1244focusable="false" aria-hidden="true"><use 1245href="/img/ai-idea-icons.svg#ai-icon-list-checks"></use></svg></span><span 1246class="ai-customizer__option-copy"><strong>Beautify the forms</strong><small>Polish fields, labels and controls as one visual system.</small></span><span 1247class="ai-customizer__option-select" aria-hidden="true"><i 1248class="fas fa-arrow-right"></i></span></button><button 1249type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Refine surfaces" data-description="Coordinate backgrounds, borders, shadows and elevation." data-prompt="Refine the surface system b
1249y coordinating backgrounds, borders, shadows and elevation into a subtle, consistent sense of depth."><span 1250class="ai-customizer__option-art ai-customizer__option-art--refine-surfaces ai-customizer__option-art--slate" aria-hidden="true"><svg 1251focusable="false" aria-hidden="true"><use 1252href="/img/ai-idea-icons.svg#ai-icon-layers"></use></svg></span><span 1253class="ai-customizer__option-copy"><strong>Refine surfaces</strong><small>Coordinate backgrounds, borders, shadows and elevation.</small></span><span 1254class="ai-customizer__option-select" aria-hidden="true"><i 1255class="fas fa-arrow-right"></i></span></button><button 1256type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Unify the icon style" data-description="Make icon weight, size and containers feel intentional." data-prompt="Unify the visual treatment of icons through consistent weight, sizing, color, spacing and container shapes that fit this design direction."><span 1257class="ai-customizer__option-art ai-customizer__option-art--unify-the-icon-style ai-customizer__option-art--green" aria-hidden="true"><svg 1258focusable="false" aria-hidden="true"><use 1259href="/img/ai-idea-icons.svg#ai-icon-shapes"></use></svg></span><span 1260class="ai-customizer__option-copy"><strong>Unify the icon style</strong><small>
1260Make icon weight, size and containers feel intentional.</small></span><span 1261class="ai-customizer__option-select" aria-hidden="true"><i 1262class="fas fa-arrow-right"></i></span></button><button 1263type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Art-direct the imagery" data-description="Improve image treatment, crops, framing and overlays." data-prompt="Art-direct the existing imagery with stronger crops, framing, aspect ratios, overlays and color treatment. Do not invent unavailable image assets."><span 1264class="ai-customizer__option-art ai-customizer__option-art--art-direct-the-imagery ai-customizer__option-art--rose" aria-hidden="true"><svg 1265focusable="false" aria-hidden="true"><use 1266href="/img/ai-idea-icons.svg#ai-icon-image"></use></svg></span><span 1267class="ai-customizer__option-copy"><strong>Art-direct the imagery</strong><small>Improve image treatment, crops, framing and overlays.</small></span><span 1268class="ai-customizer__option-select" aria-hidden="true"><i 1269class="fas fa-arrow-right"></i></span></button></div></div><div 1270class="ai-customizer__group" data-ai-customizer-group="3"><h4>Composition & behavior</h4><div 1271class="ai-customizer__option-grid"> <button 1272type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Round and friendly" data-description="Use softer geometry and an approachable personality." data-prompt="Give this design a round, friendly personality with softer geometry, approachable proportions and cohesive curved details without making it childish."><span 1273class="ai-customizer__option-art ai-customizer__option-art--round-and-friendly ai-customizer__option-art--amber" aria-hidden="true"><svg 1274focusable="false" aria-hidden="true"><use 1275href="/img/ai-idea-icons.svg#ai-icon-circle"></use></svg></span><span 1276class="ai-customizer__option-copy"><strong>Round and friendly</strong><small>Use softer geometry and an approachable personality.</small></span><span 1277class="ai-customizer__option-select" aria-hidden="true"><i 1278class="fas fa-arrow-right"></i></span></button><button 1279type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Sharp and precise" data-description="Use crisp geometry, fine borders and disciplined structure." data-prompt="Give this design a sharp, precise personality using crisp geometry, fine borders, disciplined alignment and restrained corner radii."><span 1280class="ai-customizer__option-art ai-customizer__option-art--sharp-and-precise ai-customizer__option-art--slate" aria-hidden="true"><svg 1281focusable="false" aria-hidden="true"><use 1282href="/img/ai-idea-icons.svg#ai-icon-scan"></use></svg></span><span 1283class="ai-customizer__option-copy"><strong>Sharp and precise</strong><small>Use crisp geometry, fine borders and disciplined structure.</small></span><span 1284class="ai-customizer__option-select" aria-hidden="true"><i 1285class="fas fa-arrow-right"></i></span></button><button 1286type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Compact and polished" data-description="Increase visual density while keeping an elegant rhythm." data-prompt="Create a compact, polished version with higher visual density, efficient spacing and clear hierarchy without feeling crowded."><span 1287class="ai-customizer__option-art ai-customizer__option-art--compact-and-polished ai-customizer__option-art--blue" aria-hidden="true"><svg 1288focusable="false" aria-hidden="true"><use 1289href="/img/ai-idea-icons.svg#ai-icon-minimize-2"></use></svg></span><span 1290class="ai-customizer__option-copy"><strong>Compact and polished</strong><small>Increase visual density while keeping an elegant rhythm.</small></span><span 1291class="ai-customizer__option-select" aria-hidden="true"><i 1292class="fas fa-arrow-right"></i></span></button><button 1293type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Spacious and calm" data-description="Open the composition and give every element room." data-prompt="Make the design spacious and calm by opening the composition, increasing breathing room and simplifying visual relationships while retaining all important content."><span 1294class="ai-customizer__option-art ai-customizer__option-art--spacious-and-calm ai-customizer__option-art--green" aria-hidden="true"><svg 1295focusable="false" aria-hidden="true"><use 1296href="/img/ai-idea-icons.svg#ai-icon-expand"></use></svg></span><span 1297class="ai-customizer__option-copy"><strong>Spacious and calm</strong><small>Open the composition and give every element room.</small></span><span 1298class="ai-customizer__option-select" aria-hidden="true"><i 1299class="fas fa-arrow-right"></i></span></button><button 1300type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="1" data-title="Mobile-first composition" data-description="Redesign the visual flow for smaller screens first." data-prompt="Recompose the visual design from a mobile-first perspective, refining hierarchy, stacking, scale, spacing and touch-friendly proportions while retaining a strong desktop composition."><span 1301class="ai-customizer__option-art ai-customizer__option-art--mobile-first-composition ai-customizer__option-art--violet" aria-hidden="true"><svg 1302focusable="false" aria-hidden="true"><use 1303href="/img/ai-idea-icons.svg#ai-icon-smartphone"></use></svg></span><span 1304class="ai-customizer__option-copy"><strong>Mobile-first composition</strong><small>Redesign the visual flow for smaller screens first.</small></span><span 1305class="ai-customizer__option-select" aria-hidden="true"><i 1306class="fas fa-arrow-right"></i></span></button><button 1307type="button" class="ai-customizer__option" data-ai-customizer-option aria-pressed="false" data-featured="0" data-title="Add visual motion" data-description="Use tasteful transitions to make the design feel alive." data-prompt="Add tasteful visual motion and micro-interactions that reinfor
1307ce hierarchy and personality, with subtle timing and an appropriate reduced-motion treatment."><span 1308class="ai-customizer__option-art ai-customizer__option-art--add-visual-motion ai-customizer__option-art--green" aria-hidden="true"><svg 1309focusable="false" aria-hidden="true"><use 1310href="/img/ai-idea-icons.svg#ai-icon-move-right"></use></svg></span><span 1311class="ai-customizer__option-copy"><strong>Add visual motion</strong><small>Use tasteful transitions to make the design feel alive.</small></span><span 1312class="ai-customizer__option-select" aria-hidden="true"><i 1313class="fas fa-arrow-right"></i></span></button></div></div><p 1314class="ai-customizer__empty" data-ai-customizer-empty hidden>No ideas match your search. Try a different word or describe your own.</p></div></div> <aside 1315class="ai-customizer__compose" aria-label="Customize and open with AI"><div 1316class="ai-customizer__source"><div 1317class="ai-customizer__source-copy"><span>YOUR STARTING POINT</span><strong>bs4 simple search result</strong><small>You are customizing this exact snippet</small></div><div 1318class="ai-customizer__source-frame"><img 1319src="https://www.bootdey.com/files/SnippetsImages/bootstrap-snippets-898.png" alt="Preview of bs4 simple search result" loading="lazy" decoding="async"></div></div><div 1320class="ai-customizer__finish"><div 1321class="ai-customizer__finish-content" data-ai-customizer-finish-content aria-hidden="true" inert><div 1322class="ai-customizer__section-heading ai-customizer__section-heading--finish"><div><span 1323class="ai-customizer__section-kicker">02 / REFINE</span><h3 tabindex="-1" data-ai-customizer-finish-title>Make it specific</h3><p 1324data-ai-customizer-finish-description>Your selected direction is ready to take into an AI tool.</p></div></div><div 1325class="ai-customizer__selection" data-ai-customizer-selection aria-live="polite"><span 1326class="ai-customizer__selection-icon"><i 1327class="fas fa-magic" aria-hidden="true"></i></span><div><small>YOUR DIRECTION</small><strong 1328data-ai-customizer-selection-title>Choose an idea to begin</strong><p 1329data-ai-customizer-selection-description>Select an idea from the gallery.</p></div><button 1330type="button" data-ai-customizer-change>Change idea</button></div><div 1331class="ai-customizer__details" data-ai-customizer-details hidden> <label 1332class="ai-customizer__note-label" for="ai-customizer-notes">Describe what you want <span>required</span></label><textarea id="ai-customizer-notes" data-ai-customizer-notes rows="4" maxlength="360" disabled placeholder="Describe the change you want for this designâ¦"></textarea><p 1333class="ai-customizer__note-hint">Your description and the original snippet will be included in the request.</p></div><div 1334class="ai-customizer__provider-section"><div 1335class="ai-customizer__section-heading ai-customizer__section-heading--send"><div><span 1336class="ai-customizer__section-kicker">03 / CREATE</span><h3>Choose your AI</h3><p>We prepare the request; you continue in a new tab.</p></div></div><div 1337class="ai-customizer__providers"><a 1338class="ai-customizer__provider ai-customizer__provider--chatgpt is-disabled" data-ai-customizer-provider="chatgpt" href="#" target="_blank" rel="noopener noreferrer" aria-disabled="true" tabindex="-1"><span 1339class="ai-customizer__provider-mark" aria-hidden="true">â</span><span><strong>Continue in ChatGPT</strong><small>Open prepared request</small></span><i 1340class="fas fa-arrow-up ai-customizer__provider-arrow" aria-hidden="true"></i></a><a 1341class="ai-customizer__provider ai-customizer__provider--claude is-disabled" data-ai-customizer-provider="claude" href="#" target="_blank" rel="noopener noreferrer" aria-disabled="true" tabindex="-1"><span 1342class="ai-customizer__provider-mark" aria-hidden="true">â³</span><span><strong>Continue in Claude</strong><small>Open prepared request</small></span><i 1343class="fas fa-arrow-up ai-customizer__provider-arrow" aria-hidden="true"></i></a><a 1344class="ai-customizer__provider ai-customizer__provider--v0 is-disabled" data-ai-customizer-provider="v0" href="#" target="_blank" rel="noopener noreferrer" aria-disabled="true" tabindex="-1"><span 1345class="ai-customizer__provider-mark" aria-hidden="true">v0</span><span><strong>Continue in v0</strong><small>Open source and direction</small></span><i 1346class="fas fa-arrow-up ai-customizer__provider-arrow" aria-hidden="true"></i></a><a 1347class="ai-customizer__provider ai-customizer__provider--lovable is-disabled" data-ai-customizer-provider="lovable" href="#" target="_blank" rel="noopener noreferrer" aria-disabled="true" tabindex="-1"><span 1348class="ai-customizer__provider-mark" aria-hidden="true">â¥</span><span><strong>Continue in Lovable</strong><small>Review and send request</small></span><i 1349class="fas fa-arrow-up ai-customizer__provider-arrow" aria-hidden="true"></i></a></div> <button
1350type="button" class="ai-customizer__copy" data-ai-customizer-copy disabled><i 1351class="far fa-copy" aria-hidden="true"></i> <span>Copy request instead</span></button><p 1352class="ai-customizer__handoff-note"><i 1353class="fas fa-info-circle" aria-hidden="true"></i> Check the prepared request in the new tab. The source link is temporary, so start soon after opening.</p></div></div><div 1354class="ai-customizer__gate" data-ai-customizer-gate><div 1355class="ai-customizer__gate-art" aria-hidden="true"><span></span><span></span><span></span><i 1356class="fas fa-magic"></i></div><span 1357class="ai-customizer__gate-kicker">FIRST, FIND YOUR SPARK</span><h3>Your next step starts with an idea.</h3><p>Explore the directions on the left and choose one. Your details and AI options will open up here.</p><span 1358class="ai-customizer__gate-hint"><i 1359class="fas fa-arrow-left" aria-hidden="true"></i> Choose an idea to continue</span></div></div> </aside></div> </section></div></main></div> <footer 1360class="content-footer d-flex p-3 align-items-center bg-light b-t"><div 1361class="d-flex container"><div 1362class="d-flex flex ml-auto col-8"><div> <a 1363href="https://www.bootdey.com/license" class="d-inline-flex pl-0 pr-2 b-r"> License </a> <a 1364href="https://www.bootdey.com/privacy" class="d-inline-flex pl-2 pr-2 b-r"> Privacy policy </a> <a 1365href="https://www.bootdey.com/about" class="d-inline-flex pl-2 pr-2 "> About </a> <a 1366href="https://www.bootdey.com/advertise-here" class="d-inline-flex pl-2 pr-2 "> Advertise here </a> <a 1367href="https://www.biexam.com/en" class="d-inline-flex pl-2 pr-2 "> Biexam </a> <a 1368href="https://www.bootdey.com/llms.txt" class="d-inline-flex pl-2 pr-2 " type="text/markdown"> LLMs.txt </a> <a 1369href="https://x.com/bootdey" target="_blank" rel="noopener noreferrer" class="d-inline-flex pl-2 pr-2 "> <span 1370class="btn btn-info btn-sm"> X </span> </a> <a 1371href="https://www.facebook.com/bootdey" target="_blank" rel="noopener noreferrer" class="d-inline-flex pl-2 pr-2 "> <span 1372class="btn btn-primary btn-sm"> Facebook </span> </a></div></div><div 1373class="d-flex flex mr-auto col-4 justify-content-end"><div 1374class="text-muted">Copyright © 2026. Bootdey</div></div></div> </footer>
vendor: 109 bytes, line 1374
1374 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1374<script src="/cache-js/cache-1790806930-f09498d9a062ac62e066e48233d1da40.js" type="text/javascript"></script>
1374<script type="text/javascript" src="/js/analyse.js"></script>
vendor: 64 bytes, line 1374
1374 <script async src="https://www.googletagmanager.com/gtag/js?id=
1374G-F1RTS0P1CD
vendor: 12 bytes, line 1374
1374"></script>
1374<script>
vendor: 152 bytes, lines 1374-1378
1374window.dataLayer = window.dataLayer || []; 1375 function gtag(){dataLayer.push(arguments);} 1376 gtag('js', new Date()); 1377 1378 gtag('config', '
1378G-F1RTS0P1CD
vendor: 3 bytes, line 1378
1378');
1378</script>
1378
1378<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0982648f21b7499c83a555a3f57e966f","r":1,"spa":2}' crossorigin="anonymous"></script>
1378 1379</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.