Uddeshyo | Student Super App

12. Bootstrap Forms

📘 কনসেপ্ট (থিওরি)

এইচটিএমএল (HTML) ফর্মগুলোকে সহজে স্টাইল করতে বুটস্ট্র্যাপ ফর্ম কন্ট্রোল এবং লেআউট প্রদান করে।

ফর্মের জন্য গুরুত্বপূর্ণ ক্লাসগুলো:
- .form-label: লেবেলের (labels) জন্য সঠিক প্যাডিং এবং অ্যালাইনমেন্ট নিশ্চিত করে।
- .form-control: , </code>, এবং <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><select></code> এলিমেন্টগুলোতে (100% প্রস্থ, স্টাইলিং, হোভার স্টেট) বুটস্ট্র্যাপ স্টাইলিং প্রয়োগ করে।
- <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;">.mb-3</code> (ইউটিলিটি ক্লাস): ফর্ম গ্রুপগুলোর মধ্যে ফাঁকা জায়গার জন্য মার্জিন-বটম (margin-bottom) যোগ করে।</div></div><div style="margin-bottom:2.5rem"><h3 style="font-size:1.2rem;color:#10b981;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem">💡 <!-- -->উদাহরণ</h3><div style="line-height:1.7;color:var(--text-secondary);font-size:1.05rem;white-space:pre-wrap">একটি বুটস্ট্র্যাপ ফর্ম:

<div style="background: #1e1e1e; padding: 1rem; border-radius: 8px; margin: 1rem 0; font-family: monospace; color: #e2e8f0; overflow-x: auto; border: 1px solid #333;"><form>
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div></div></div><div style="background:rgba(244, 114, 182, 0.05);border:1px solid rgba(244, 114, 182, 0.2);padding:1.5rem;border-radius:12px"><h3 style="font-size:1.2rem;color:#f472b6;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem">🎯 <!-- -->আপনার কাজ (প্র্যাকটিস)</h3><div style="line-height:1.7;color:var(--text-primary);font-size:1.05rem;white-space:pre-wrap"><code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;">text</code> টাইপের একটি <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><input></code> এলিমেন্ট তৈরি করুন। এটিকে বুটস্ট্র্যাপের <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;">form-control</code> ক্লাস এবং "Enter name" প্লেসহোল্ডার দিন।</div></div></div></div><div style="flex:1;display:flex;flex-direction:column"><div style="padding:0.75rem 1rem;background:#1e1e1e;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333"><div style="display:flex;align-items:center;gap:1rem"><span style="color:#888;font-size:0.9rem;font-family:monospace">main.<!-- -->bootstrap</span><button style="background:transparent;color:#a8a29e;border:1px solid #444;padding:0.25rem 0.75rem;border-radius:4px;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;gap:0.4rem"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>Show Solution</button></div><button style="background:#22c55e;color:white;border:none;padding:0.5rem 1.5rem;border-radius:4px;cursor:pointer;font-weight:bold;display:flex;align-items:center;gap:0.5rem;opacity:1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Run Code</button></div><div style="flex:2;position:relative"><section style="display:flex;position:relative;text-align:initial;width:100%;height:100%"><div style="display:flex;height:100%;width:100%;justify-content:center;align-items:center">Loading...</div><div style="width:100%;display:none"></div></section></div><div style="flex:1;background:#0f172a;border-top:1px solid #333;display:flex;flex-direction:column"><div style="padding:0.5rem 1rem;background:#1e293b;color:#94a3b8;font-size:0.8rem;font-weight:bold">OUTPUT</div><iframe srcDoc="<!-- Write form input -->
" style="width:100%;height:100%;border:none;background:white" title="HTML Output"></iframe></div></div></div></div><!--$--><!--/$--></div></main><div style="position:fixed;bottom:10.25rem;right:1.5rem;z-index:9998;transition:bottom 0.3s ease, right 0.3s ease"><button class="btn-primary" tabindex="0" style="width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3);padding:0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg></button></div><div style="position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;font-family:var(--font-bengali, sans-serif)"><button tabindex="0" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 25px rgba(168, 85, 247, 0.4);position:relative"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg><span style="position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #fff"></span></button></div><a href="https://wa.me/8801675409533" target="_blank" rel="noopener noreferrer" class="whatsapp-widget" style="position:fixed;bottom:6.0rem;right:1.5rem;background-color:#25D366;color:white;width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37, 211, 102, 0.4);z-index:9999;text-decoration:none;transition:bottom 0.3s ease, right 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="28" height="28" fill="currentColor" style="display:block"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg></a><!--$--><!--/$--><script src="/_next/static/chunks/1jexzsn2qdw84.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[257261,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ThemeProvider\"]\n3:I[883570,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n4:I[339756,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n5:I[837457,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n6:I[840038,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"Analytics\"]\n7:I[957215,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"SpeedInsights\"]\n9:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nd:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ViewportBoundary\"]\nf:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"MetadataBoundary\"]\n11:I[168027,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\",1]\n13:I[134383,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/02eirpk-jbe6_.js\"],\"default\"]\n14:I[27201,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"style\"]\n:HL[\"/_next/static/media/1f95d4beca86b0f6-s.p.0nu0d1-zq0f7n.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/34478e929f11203a-s.p.43mqagctl8tum.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5838bc3f070fd510-s.p.3vga9zqu1bmt7.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7ca7a04daf1e7f98-s.p.2ih2w5qn4g81_.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/d62a86ea65eb628c-s.p.3eswb6t44uyhi.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"programming\",\"bootstrap\",\"forms\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"programming\",{\"children\":[[\"lang\",\"bootstrap\",\"d\",null],{\"children\":[[\"lessonId\",\"forms\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/126ur0w49mgvd.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0nwstxxvlktp5.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2ze29qu26uv8o.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/26q97ntdx9nal.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_a71539c9-module__T19VSG__variable hind_siliguri_87552521-module__JoTf0G__variable\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"dark\",\"enableSystem\":false,\"disableTransitionOnChange\":true,\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L8\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/02eirpk-jbe6_.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"8dk8ORxewiZI1aGwcqSj1\"}\n"])</script><script>self.__next_f.push([1,"12:[]\nc:\"$W12\"\n"])</script><script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"style\":{\"height\":\"calc(100vh - 64px)\",\"overflow\":\"hidden\"},\"children\":[\"$\",\"$L13\",null,{\"lang\":\"bootstrap\",\"lessonData\":{\"id\":\"bs12\",\"title\":\"12. Bootstrap Forms\",\"slug\":\"forms\",\"concept_en\":\"Bootstrap provides form controls and layouts to style HTML forms easily.\\n\\nKey Classes for Forms:\\n- `.form-label`: Ensures proper padding and alignment for labels.\\n- `.form-control`: Applies Bootstrap styling to `\u003cinput\u003e`, `\u003ctextarea\u003e`, and `\u003cselect\u003e` elements (100% width, styling, hover states).\\n- `.mb-3` (Utility class): Adds margin-bottom for spacing between form groups.\",\"concept_bn\":\"এইচটিএমএল (HTML) ফর্মগুলোকে সহজে স্টাইল করতে বুটস্ট্র্যাপ ফর্ম কন্ট্রোল এবং লেআউট প্রদান করে।\\n\\nফর্মের জন্য গুরুত্বপূর্ণ ক্লাসগুলো:\\n- `.form-label`: লেবেলের (labels) জন্য সঠিক প্যাডিং এবং অ্যালাইনমেন্ট নিশ্চিত করে।\\n- `.form-control`: `\u003cinput\u003e`, `\u003ctextarea\u003e`, এবং `\u003cselect\u003e` এলিমেন্টগুলোতে (100% প্রস্থ, স্টাইলিং, হোভার স্টেট) বুটস্ট্র্যাপ স্টাইলিং প্রয়োগ করে।\\n- `.mb-3` (ইউটিলিটি ক্লাস): ফর্ম গ্রুপগুলোর মধ্যে ফাঁকা জায়গার জন্য মার্জিন-বটম (margin-bottom) যোগ করে।\",\"example_en\":\"A Bootstrap Form:\\n\\n```html\\n\u003cform\u003e\\n  \u003cdiv class=\\\"mb-3 mt-3\\\"\u003e\\n    \u003clabel for=\\\"email\\\" class=\\\"form-label\\\"\u003eEmail:\u003c/label\u003e\\n    \u003cinput type=\\\"email\\\" class=\\\"form-control\\\" id=\\\"email\\\" placeholder=\\\"Enter email\\\" name=\\\"email\\\"\u003e\\n  \u003c/div\u003e\\n  \u003cdiv class=\\\"mb-3\\\"\u003e\\n    \u003clabel for=\\\"pwd\\\" class=\\\"form-label\\\"\u003ePassword:\u003c/label\u003e\\n    \u003cinput type=\\\"password\\\" class=\\\"form-control\\\" id=\\\"pwd\\\" placeholder=\\\"Enter password\\\" name=\\\"pswd\\\"\u003e\\n  \u003c/div\u003e\\n  \u003cbutton type=\\\"submit\\\" class=\\\"btn btn-primary\\\"\u003eSubmit\u003c/button\u003e\\n\u003c/form\u003e\\n```\",\"example_bn\":\"একটি বুটস্ট্র্যাপ ফর্ম:\\n\\n```html\\n\u003cform\u003e\\n  \u003cdiv class=\\\"mb-3 mt-3\\\"\u003e\\n    \u003clabel for=\\\"email\\\" class=\\\"form-label\\\"\u003eEmail:\u003c/label\u003e\\n    \u003cinput type=\\\"email\\\" class=\\\"form-control\\\" id=\\\"email\\\" placeholder=\\\"Enter email\\\" name=\\\"email\\\"\u003e\\n  \u003c/div\u003e\\n  \u003cdiv class=\\\"mb-3\\\"\u003e\\n    \u003clabel for=\\\"pwd\\\" class=\\\"form-label\\\"\u003ePassword:\u003c/label\u003e\\n    \u003cinput type=\\\"password\\\" class=\\\"form-control\\\" id=\\\"pwd\\\" placeholder=\\\"Enter password\\\" name=\\\"pswd\\\"\u003e\\n  \u003c/div\u003e\\n  \u003cbutton type=\\\"submit\\\" class=\\\"btn btn-primary\\\"\u003eSubmit\u003c/button\u003e\\n\u003c/form\u003e\\n```\",\"practice_en\":\"Create an `\u003cinput\u003e` element of type `text`. Give it the Bootstrap `form-control` class and a placeholder \\\"Enter name\\\".\",\"practice_bn\":\"`text` টাইপের একটি `\u003cinput\u003e` এলিমেন্ট তৈরি করুন। এটিকে বুটস্ট্র্যাপের `form-control` ক্লাস এবং \\\"Enter name\\\" প্লেসহোল্ডার দিন।\",\"starterCode\":\"\u003c!-- Write form input --\u003e\\n\",\"solutionCode\":\"\u003cinput type=\\\"text\\\" class=\\\"form-control\\\" placeholder=\\\"Enter name\\\"\u003e\"}}]}]\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nb:null\n10:[[\"$\",\"title\",\"0\",{\"children\":\"Uddeshyo | Student Super App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"All-in-one student platform for Vocabulary, Finance, Job Exams, and Personal Analytics.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"4\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Uddeshyo\"}],[\"$\",\"meta\",\"5\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"link\",\"6\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L14\",\"7\",{}]]\n"])</script></body></html>