PageSourceSearch

https://www.bootdey.com/snippets/view/bs4-simple-search-result

html bootdey.com collected 2026-10-01 08:45:58 UTC 134,379 bytes, 1,379 lines download raw bytes

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">&#10022;</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">&#10022;</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">&lt;!DOCTYPE html&gt;
186&lt;html lang=&quot;en&quot;&gt;
187&lt;head&gt;
188    &lt;meta charset=&quot;utf-8&quot;&gt;
189    &lt;title&gt;bs4 simple search result - Bootdey.com&lt;/title&gt;
190    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
191    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343372d322d32">[email&#160;protected]</a>/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
192&lt;/head&gt;
193&lt;body&gt;
194&lt;link href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
195&lt;div class=&quot;container&quot;&gt;
196    &lt;div class=&quot;row&quot;&gt;
197        &lt;div class=&quot;col-md-8 left-side-sidebar&quot;&gt;
198            &lt;div class=&quot;row text-center&quot;&gt;
199                &lt;div class=&quot;col-md-8 offset-md-2&quot;&gt;
200                    &lt;h3&gt;Not happy with the results?&lt;/h3&gt;
201                    &lt;p class=&quot;body-text-3x&quot;&gt;Type your search again&lt;/p&gt;
202                    &lt;div class=&quot;small-search-wrap&quot;&gt;
203                        &lt;div class=&quot;search-form&quot;&gt;
204                            &lt;form action=&quot;#&quot;&gt;
205                                &lt;div class=&quot;form-group&quot;&gt;
206                                    &lt;input type=&quot;text&quot; value=&quot;test&quot; placeholder=&quot;Search something here&quot; maxlength=&quot;100&quot; class=&quot;form-control&quot; name=&quot;name&quot; id=&quot;name&quot;&gt;
207                                &lt;/div&gt;
208                            &lt;/form&gt;
209                        &lt;/div&gt;
210                    &lt;/div&gt;
211                    &lt;hr class=&quot;invisible small&quot;&gt;
212                &lt;/div&gt;
213                &lt;div class=&quot;col-md-12&quot;&gt;
214                    &lt;div class=&quot;v-heading-v2&quot;&gt;
215                        &lt;h4 class=&quot;v-search-result-count&quot;&gt;About 18,580 results&lt;/h4&gt;
216                    &lt;/div&gt;
217                &lt;/div&gt;
218            &lt;/div&gt;
219
220            &lt;div class=&quot;clearfix mt-40&quot;&gt;
221                &lt;ul class=&quot;xsearch-items&quot;&gt;
222                    &lt;li class=&quot;search-item&quot;&gt;
223                        &lt;div class=&quot;search-item-img&quot;&gt;
224                            &lt;a href=&quot;#&quot;&gt;
225                                &lt;img src=&quot;https://bootdey.com/img/Content/avatar/avatar2.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
226                            &lt;/a&gt;
227                        &lt;/div&gt;
228                        &lt;div class=&quot;search-item-content&quot;&gt;
229                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;10 tips for creating a stunning web presentation&lt;/a&gt;&lt;/h3&gt;
230
231                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
232                                &lt;ul class=&quot;list-inline&quot;&gt;
233                                    &lt;li class=&quot;time&quot;&gt;November 10, 2017‎&lt;/li&gt;
234                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;0 Comments&lt;/a&gt;&lt;/li&gt;
235                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
236                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;Design&lt;/a&gt;&lt;/li&gt;
237                                &lt;/ul&gt;
238                            &lt;/div&gt;
239                            &lt;div&gt;
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                            &lt;/div&gt;
242                        &lt;/div&gt;
243                    &lt;/li&gt;
244
245                    &lt;li class=&quot;search-item&quot;&gt;
246                        &lt;div class=&quot;search-item-img&quot;&gt;
247                            &lt;a href=&quot;#&quot;&gt;
248                                &lt;img itemprop=&quot;image&quot; src=&quot;https://bootdey.com/img/Content/avatar/avatar3.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
249                            &lt;/a&gt;
250                        &lt;/div&gt;
251                        &lt;div class=&quot;search-item-content&quot;&gt;
252                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;Vertex makes it easy to sell your product&lt;/a&gt;&lt;/h3&gt;
253                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
254                                &lt;ul class=&quot;list-inline&quot;&gt;
255                                    &lt;li class=&quot;time&quot;&gt;October 10, 2017‎&lt;/li&gt;
256                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;0 Comments&lt;/a&gt;&lt;/li&gt;
257                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
258                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;Design&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
259                                &lt;/ul&gt;
260                            &lt;/div&gt;
261                            &lt;div&gt;
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                            &lt;/div&gt;
264                        &lt;/div&gt;
265                    &lt;/li&gt;
266
267                    &lt;li class=&quot;search-item&quot;&gt;
268                        &lt;div class=&quot;search-item-img&quot;&gt;
269                            &lt;a href=&quot;#&quot;&gt;
270                                &lt;img src=&quot;https://bootdey.com/img/Content/avatar/avatar4.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
271                            &lt;/a&gt;
272                        &lt;/div&gt;
273                        &lt;div class=&quot;search-item-content&quot;&gt;
274                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;5 questions you must ask at the start of every project&lt;/a&gt;&lt;/h3&gt;
275                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
276                                &lt;ul class=&quot;list-inline&quot;&gt;
277                                    &lt;li class=&quot;time&quot;&gt;April 15, 2017‎&lt;/li&gt;
278                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;40 Comments&lt;/a&gt;&lt;/li&gt;
279                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
280                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;Design&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
281                                &lt;/ul&gt;
282                            &lt;/div&gt;
283                            &lt;div&gt;
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                            &lt;/div&gt;
286                        &lt;/div&gt;
287                    &lt;/li&gt;
288
289                    &lt;li class=&quot;search-item&quot;&gt;
290                        &lt;div class=&quot;search-item-img&quot;&gt;
291                            &lt;a href=&quot;#&quot;&gt;
292                                &lt;img src=&quot;https://bootdey.com/img/Content/avatar/avatar5.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
293                            &lt;/a&gt;
294                        &lt;/div&gt;
295                        &lt;div class=&quot;search-item-content&quot;&gt;
296                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;How to make selling and beautifull website&lt;/a&gt;&lt;/h3&gt;
297                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
298                                &lt;ul class=&quot;list-inline&quot;&gt;
299                                    &lt;li class=&quot;time&quot;&gt;March 22, 2017‎&lt;/li&gt;
300                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;0 Comments&lt;/a&gt;&lt;/li&gt;
301                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
302                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
303                                &lt;/ul&gt;
304                            &lt;/div&gt;
305
306                            &lt;div&gt;
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                            &lt;/div&gt;
309                        &lt;/div&gt;
310                    &lt;/li&gt;
311
312                    &lt;li class=&quot;search-item&quot;&gt;
313                        &lt;div class=&quot;search-item-img&quot;&gt;
314                            &lt;a href=&quot;#&quot;&gt;
315                                &lt;img src=&quot;https://bootdey.com/img/Content/avatar/avatar6.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
316                            &lt;/a&gt;
317                        &lt;/div&gt;
318                        &lt;div class=&quot;search-item-content&quot;&gt;
319                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;Secrets of better SEO for your website&lt;/a&gt;&lt;/h3&gt;
320                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
321                                &lt;ul class=&quot;list-inline&quot;&gt;
322                                    &lt;li class=&quot;time&quot;&gt;February 19, 2017‎&lt;/li&gt;
323                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;0 Comments&lt;/a&gt;&lt;/li&gt;
324                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
325                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;SEO&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Wordpress&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Mobile&lt;/a&gt;&lt;/li&gt;
326                                &lt;/ul&gt;
327                            &lt;/div&gt;
328                            &lt;div&gt;
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                            &lt;/div&gt;
331                        &lt;/div&gt;
332                    &lt;/li&gt;
333
334                    &lt;li class=&quot;search-item&quot;&gt;
335                        &lt;div class=&quot;search-item-img&quot;&gt;
336                            &lt;a href=&quot;#&quot;&gt;
337                                &lt;img src=&quot;https://bootdey.com/img/Content/avatar/avatar7.png&quot; width=&quot;70&quot; height=&quot;70&quot;&gt;
338                            &lt;/a&gt;
339                        &lt;/div&gt;
340                        &lt;div class=&quot;search-item-content&quot;&gt;
341                            &lt;h3 class=&quot;search-item-caption&quot;&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum Dolor Sit Amet&lt;/a&gt;&lt;/h3&gt;
342                            &lt;div class=&quot;search-item-meta mb-15&quot;&gt;
343                                &lt;ul class=&quot;list-inline&quot;&gt;
344                                    &lt;li class=&quot;time&quot;&gt;February 25, 2017‎&lt;/li&gt;
345                                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5 Comments&lt;/a&gt;&lt;/li&gt;
346                                    &lt;li class=&quot;pr-0&quot;&gt;in&lt;/li&gt;
347                                    &lt;li class=&quot;pl-0&quot;&gt;&lt;a href=&quot;#&quot;&gt;Design&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
348                                &lt;/ul&gt;
349                            &lt;/div&gt;
350                            &lt;div&gt;
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                            &lt;/div&gt;
353                        &lt;/div&gt;
354                    &lt;/li&gt;
355                &lt;/ul&gt;
356            &lt;/div&gt;
357
358            &lt;div class=&quot;row&quot;&gt;
359                &lt;div class=&quot;col-md-6&quot;&gt;
360                    &lt;div class=&quot;clearfix pl-90&quot;&gt;
361                        &lt;ul class=&quot;pagination&quot;&gt;
362                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-double-left&quot;&gt;&lt;/i&gt; &lt;/a&gt;&lt;/li&gt;
363                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
364                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
365                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;..&lt;/a&gt;&lt;/li&gt;
366                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;20&lt;/a&gt;&lt;/li&gt;
367                            &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-double-right&quot;&gt;&lt;/i&gt; &lt;/a&gt;&lt;/li&gt;
368                        &lt;/ul&gt;
369                    &lt;/div&gt;
370                &lt;/div&gt;
371
372                &lt;div class=&quot;col-md-6&quot;&gt;
373                    &lt;div class=&quot;clearfix pull-right&quot;&gt;
374                        &lt;span class=&quot;o-7&quot;&gt;Page 1 of 8&lt;/span&gt;
375                    &lt;/div&gt;
376                &lt;/div&gt;
377            &lt;/div&gt;
378        &lt;/div&gt;
379    &lt;/div&gt;
380&lt;/div&gt;
381&lt;style type=&quot;text/css&quot;&gt;
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: &quot;&quot;;
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 &gt; .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&lt;/style&gt;
668&lt;script src=&quot;https://code.jquery.com/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
669&lt;script src=&quot;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020544e514e51">[email&#160;protected]</a>/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
670&lt;/body&gt;
671&lt;/html&gt;</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">&#10022;</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">&#10022;</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 &amp; mood</button><button
878type="button" data-ai-customizer-filter="2" aria-pressed="false">Brand &amp; visual system</button><button
879type="button" data-ai-customizer-filter="3" aria-pressed="false">Composition &amp; 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 &amp; 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 &amp; 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 &amp; 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 &copy; 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.