फार्म नियंत्रण शैलियें, लेआउट विकल्पें, ते व्यापक किस्म दे फार्म बनाने लेई कस्टम घटकें लेई उदाहरण ते उपयोग दिशा-निर्देश।
अवलोकन करना
बूटस्ट्रैप दे फार्म नियंत्रण क्लासें कन्नै साढ़ी रिबूट फार्म शैलियां पर विस्तार करदे न। ब्राउज़रें ते डिवाइसें च इक होर सुसंगत रेंडरिंग आस्तै उंदे अनुकूलित प्रदर्शनें च चुनने आस्तै इनें वर्गें दा इस्तेमाल करो.
ईमेल सत्यापन, नंबर चयन, ते होर मते सारे नमें इनपुट नियंत्रणें दा फायदा लैने आस्तै सब्भै इनपुटें पर इक उचित विशेषता दा उपयोग करना सुनिश्चत करो type(जियां, emailईमेल पते आस्तै जां संख्यात्मक जानकारी आस्तै)।number
बूटस्ट्रैप दी फार्म शैलियां गी प्रदर्शत करने आस्तै इक त्वरित उदाहरण ऐ। जरूरी कक्षाएं, फार्म लेआउट, ते होर मते सारे दस्तावेजें लेई पढ़दे रौह्ओ.
फार्म नियंत्रण करदा ऐ
पाठ रूप नियंत्रण-जियां <input>एस, <select>एस, ते <textarea>एस- .form-controlवर्ग कन्नै शैली कीते गेदे न। सामान्य रूप, फोकस स्थिति, आकार, ते होर मते आस्तै शैलियां शामल न।
होर शैली एस करने लेई साढ़े कस्टम रूपें दी खोज ज़रूर करो ।<select>
readonlyइनपुट दे मूल्य च संशोधन गी रोकने आस्तै इक इनपुट पर बूलियन विशेषता जोड़ो . सिर्फ-पढ़ने आह् ले इनपुट हल्के दिक्खे जंदे न (जिऱयां अक्षम इनपुट), पर मानक कर्सर गी बरकरार रक्खो.
सिर्फ पढ़ने दा सादा पाठ
जेकर तुस <input readonly>अपने फार्म च तत्वें गी सादे पाठ दे रूप च स्टाइल करना चांह् दे ओ .form-control-plaintextतां डिफाल्ट फार्म फील्ड स्टाइलिंग गी हटाने ते सही मार्जिन ते पैडिंग गी संरक्षित करने आस्तै क्लास दा इस्तेमाल करो.
रेंज इनपुट
दा उपयोग करदे होई क्षैतिज स्क्रॉल करने योग्य रेंज इनपुट सेट करो .form-control-range.
चेकबॉक्स ते रेडियो
डिफ़ॉल्ट चेकबॉक्स ते रेडियो च सुधार कीता जंदा ऐ .form-check, दौनें इनपुट किस्में आस्तै इक गै वर्ग जेह् ड़ा उंदे HTML तत्वें दे लेआउट ते व्यवहार च सुधार करदा ऐ . चेकबॉक्स इक सूची च इक जां केईं विकल्पें गी चुनने लेई होंदे न, जदके रेडियो मते सारे विकल्पें च इक विकल्प चुनने लेई होंदे न।
अक्षम चेकबॉक्स ते रेडियो समर्थत न। इनपुट दी disabledस्थिति गी दर्शाने च मदद करने आस्तै एट्रिब्यूट इक हल्के रंग लागू करग.
चेकबॉक्स ते रेडियो बटन HTML-आधारत फार्म सत्यापन दा समर्थन करदे न ते संक्षिप्त, सुलभ लेबल प्रदान करदे न। इस चाल्ली, साढ़े <input>s ते s इक दे अंदर इक दे <label>विपरीत भ्राऽ-भैन-भ्रा तत्व न । एह् थोह् ड़ी - मती शब्दावली ऐ की जे तुसें गी ते .<input><label>idfor<input><label>
डिफ़ॉल्ट (ढेर) ऐ
डिफ़ॉल्ट रूप कन्नै, कुसै बी संख्या च चेकबॉक्स ते रेडियो जेह् ड़े फौरी भ्राऽ न, लंबवत ढेर कीते जाङन ते उचित रूप कन्नै .form-check.
इनलाइन
चेकबॉक्स जां रेडियो गी इक गै क्षैतिज पंक्ति पर .form-check-inlineकुसै बी च जोड़ियै समूहीकृत करो .form-check.
बिना लेबल दे
.position-staticअंदर इनपुटें च जोड़ो .form-checkजिंदे कोल कोई लेबल पाठ नेईं ऐ। सहायक प्रौद्योगिकी (उदाहरण दे तौर पर, बरतून aria-label) आस्तै अजें बी कुसै किस्म दा सुलभ नांऽ उपलब्ध करोआना याद रक्खो ।
खाका
चूंकि बूटस्ट्रैप लागू होंदा ऐ display: blockते width: 100%लगभग साढ़े सारे फार्म नियंत्रणें पर, फार्म डिफ़ॉल्ट रूप कन्नै लंबवत ढेर होङन. इस लेआउट गी प्रति-फॉर्म आधार उप्पर बदलने लेई अतिरिक्त वर्गें दा इस्तेमाल कीता जाई सकदा ऐ।
समूह बनाओ
.form-groupक्लास फार्म च किश ढांचा जोड़ने दा सबतूं सोखा तरीका ऐ । एह् इक लचीला वर्ग प्रदान करदा ऐ जेह् ड़ा लेबल, नियंत्रण, वैकल्पिक मदद पाठ, ते फार्म सत्यापन संदेशें दे उचित समूहीकरण गी प्रोत्साहित करदा ऐ। डिफ़ॉल्ट रूप कन्नै एह् सिर्फ लागू होंदा ऐ , पर एह् जरूरत मताबक margin-bottomच अतिरिक्त शैलियां चुक्की लैंदा ऐ . .form-inlineइसदा इस्तेमाल <fieldset>s, <div>s, जां लगभग कुसै बी होर तत्व कन्नै करो।
ग्रिड बनाओ
साढ़ी ग्रिड क्लासें दा इस्तेमाल करियै होर जटिल फार्म बनाई सकदे न। फार्म लेआउट आस्तै इन्हें दा इस्तेमाल करो जिंदे च मते सारे स्तंभ, बक्ख-बक्ख चौड़ाई, ते अतिरिक्त संरेखण विकल्पें दी लोड़ होंदी ऐ.
.rowसमूहें गी बनाने च वर्ग गी जोड़ियै ते .col-*-*अपने लेबल ते नियंत्रणें दी चौड़ाई निर्दिश्ट करने आस्तै वर्गें दा इस्तेमाल करियै ग्रिड कन्नै क्षैतिज रूप बनाओ . .col-form-labelअपने एस च बी जोड़ना सुनिश्चित करो <label>तां जे ओह् अपने संबद्ध फार्म नियंत्रणें कन्नै लंबवत केंद्रत होन।
कदें-कदें, तुसेंगी उस परफेक्ट संरेखण गी बनाने लेई शायद मार्जिन जां पैडिंग उपयोगिताएं दा इस्तेमाल करने दी लोड़ होग जेह् ड़ी तुसेंगी लोड़चदी ऐ। मसाल आस्तै, padding-topपाठ बेसलाइन गी बेहतर तरीके कन्नै संरेखित करने आस्तै असें अपने ढेर कीते गेदे रेडियो इनपुट लेबल पर गी हटाई दित्ता ऐ।
क्षैतिज रूप लेबल आकार देना
ते दे आकार दा सही ढंगै कन्नै पालन करने आस्तै जां अपने एस जां एस .col-form-label-smगी .col-form-label-lgज़रूर <label>इस्तेमाल करो ।<legend>.form-control-lg.form-control-sm
स्तंभ आकार देना
जि’यां पिछले उदाहरनें च दिक्खेआ गेआ ऐ, साढ़ा ग्रिड सिस्टम तुसेंगी कुसै बी संख्या च .cols गी इक .rowजां .form-row. वे उऩरब्ध चौड़ाई को अऩने बीतय बराबर फॊट देंगे। तुस अपने स्तंभें दा इक उप-समूह बी चुनी सकदे ओ जेह् ड़ा घट्ट जां मता जगह लैंदा ऐ , जिसलै के बाकी .colदे s बाकी गी बराबर बंडदा ऐ , जिस च विशिष्ट स्तंभ वर्गें कन्नै .col-7.
ऑटो-साइजिंग करना
हेठ दित्ती गेदी उदाहरन सामग्री गी लंबवत केंद्रत करने आस्तै इक फ्लेक्सबॉक्स उपयोगिता दा उपयोग करदा ऐ ते इस च बदलाव .colकरदा ऐ .col-autoतां जे तुंदे स्तंभ सिर्फ उतनी गै जगह लैन जितना लोड़चदा ऐ. दूए तरीके कन्नै, स्तंभ सामग्री दे आधार उप्पर अपने आप गी आकार दिंदा ऐ।
.form-inlineइक गै क्षैतिज पंक्ति पर लेबल, फार्म नियंत्रण, ते बटनें दी श्रृंखला प्रदर्शत करने आस्तै वर्ग दा उपयोग करो . इनलाइन फार्म दे अंदर फार्म नियंत्रण उंदी डिफाल्ट स्थिति थमां थोड़ा बक्ख-बक्ख ऐ।
नियंत्रण न display: flex, कुसै बी HTML सफेद स्पेस गी संकुचित करदे न ते तुसेंगी स्पेसिंग ते फ्लेक्सबॉक्स उपयोगिताएं कन्नै संरेखण नियंत्रण प्रदान करने दी इजाजत दिंदे न.
नियंत्रण ते इनपुट समूह width: autoबूटस्ट्रैप डिफाल्ट गी ओवरराइड करने लेई प्राप्त करदे न width: 100%.
नियंत्रण सिर्फ उनें व्यूपोर्टें च इनलाइन दिक्खे जंदे न जेह् ड़े घट्ट शा घट्ट 576px चौड़ा होंदे न तां जे मोबाइल डिवाइस पर संकीर्ण व्यूपोर्टें दा लेखा-जोखा दित्ता जाई सकै।
तुसेंगी स्पेसिंग यूटिलिटीएं कन्नै व्यक्तिगत फार्म नियंत्रणें दी चौड़ाई ते संरेखण गी मैन्युअल रूप कन्नै संबोधित करने दी लोड़ होग (जिऱयां कि हेठ दिक्खेआ गेआ ऐ)। आखरी च, हर इक फार्म नियंत्रण कन्नै हमेशा इक गी शामल करना सुनिश्चत करो <label>, भलेआं तुसेंगी इसगी गैर-स्क्रीनरीडर आगंतुकें थमां छिपाने दी लोड़ होऐ .sr-only.
कस्टम फार्म नियंत्रण ते चयनें गी बी समर्थत कीता जंदा ऐ।
छिपे दे लेबल दे विकल्प
जेकर तुस हर इक इनपुट आस्तै इक लेबल नेईं शामल करदे ओ तां स्क्रीन रीडर जनेह् सहायक तकनीकें गी तुंदे फार्म कन्नै परेशानी होग। .sr-onlyइनें इनलाइन फार्में लेई, तुस क्लास दा इस्तेमाल करियै लेबल गी छुपाई सकदे ओ । सहायक तकनीकें लेई लेबल उपलब्ध करोआने दे होर वैकल्पिक तरीके न, जि’यां aria-label, aria-labelledbyजां titleएट्रिब्यूट। जेकर इनें चा कोई बी मौजूद नेईं ऐ तां सहायक तकनीकें गी placeholderविशेषता दा उपयोग करने दा सहारा लैता जाई सकदा ऐ, जेकर मौजूद ऐ तां, पर ध्यान देओ जे placeholderहोर लेबलिंग तरीकें दे बदले दे रूप च इसदा इस्तेमाल करने दी सलाह नेईं दित्ती जंदी ऐ।
मदद पाठ करना
फार्म च ब्लॉक-स्तरीय मदद पाठ दा उपयोग करदे होई बनाया जाई सकदा ऐ (पैह् ले v3 च .form-textजानेआ जंदा हा )। .help-blockइनलाइन मदद पाठ गी कुसै बी इनलाइन एचटीएमएल तत्व ते उपयोगिता वर्गें जि’यां .text-muted.
मदद पाठ गी फार्म नियंत्रणें कन्नै जोड़ना
मदद पाठ गी स्पश्ट रूप कन्नै उस फार्म नियंत्रण कन्नै जुड़े दा होना चाहिदा जेह् ड़ा एह् aria-describedbyविशेषता दा उपयोग करने कन्नै सरबंधत ऐ. एह् इस गल्लै गी सुनिश्चत करग जे सहायक तकनीकें-जि’यां स्क्रीन रीडर-इस मदद पाठ दी घोशणा करग जिसलै बरतूनी नियंत्रण च ध्यान केंद्रत करदा ऐ जां दाखल करदा ऐ।
इनपुटें दे हेठ दित्ती गेदी मदद पाठ गी .form-text. इस वर्ग च display: blockउपर दित्ते गेदे इनपुटें थमां आसान स्पेसिंग आस्तै किश शीर्शक मार्जिन शामल ऐ ते जोड़ेआ जंदा ऐ।
तुंदा पासवर्ड 8-20 अक्षरें दा लंबा होना चाहिदा, अक्षर ते नंबर होन, ते स्पेस, खास अक्षर, जां इमोजी नेईं होन चाहिदे।
इनलाइन पाठ कुसै बी ठेठ इनलाइन HTML तत्व (चाहे ओह् इक <small>, <span>, जां कुसै होर) दा इस्तेमाल करी सकदा ऐ जिस च इक उपयोगिता वर्ग थमां मता किश नेईं ऐ.
विकलांग फार्म
disabledबरतूनी परस्पर क्रियाएं गी रोकने ते इसगी हल्के दिक्खने आस्तै इक इनपुट पर बूलियन विशेषता जोड़ो .
अंदर सारे नियंत्रणें गी अक्षम करने disabledआस्तै a च विशेषता जोड़ो .<fieldset>
लंगर के साथ चेतावनी
ब्राउज़र a दे अंदर सारे देशी रूप नियंत्रणें ( <input>, <select>, ते <button>तत्वें) <fieldset disabled>गी अक्षम दे रूप च समझदे न, उंदे पर कीबोर्ड ते माउस दोनें परस्पर क्रियाएं गी रोकदे न.
हालांकि, जेकर तुंदे फार्म च कस्टम बटन-जैसे तत्व बी शामल न जि'यां <a ... class="btn btn-*">, तां इन्हें गी सिर्फ pointer-events: none. जिऱयां बटनें आस्तै अक्षम स्थिति दे बारे च खंड च दिक्खेआ गेआ ऐ (ते खास करियै एंकर तत्वें आस्तै उप-खंड च), एह् CSS गुण अजें तगर मानक नेईं ऐ ते इंटरनेट एक्सप्लोरर 10 च पूरी चाल्ली समर्थत नेईं ऐ एंकर-आधारत नियंत्रण बी अजें बी होग कीबोर्ड दा उपयोग करदे होई फोकस करने योग्य ते संचालन योग्य। tabindex="-1"तुसेंगी इनें नियंत्रणें गी ध्यान देने थमां रोकने ते aria-disabled="disabled"सहायक तकनीकें गी उंदी स्थिति दा संकेत देने लेई जोड़ियै मैन्युअल रूप कन्नै संशोधित करना होग ।
क्रॉस-ब्राउज़र संगतता
जदके बूटस्ट्रैप इनें शैलियें गी सारे ब्राउज़रें च लागू करग , इंटरनेट एक्सप्लोरर 11 ते हेठ दित्ते गेदे disabledइक पर विशेषता गी पूरी चाल्ली समर्थन नेईं करदे न <fieldset>. इनें ब्राउज़रें च फील्डसेट गी अक्षम करने आस्तै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो.
मान्यता देना
HTML5 फार्म सत्यापन कन्नै अपने बरतूनी गी कीमती, कार्रवाई करने योग्य प्रतिक्रिया प्रदान करो– साढ़े सारे समर्थत ब्राउज़रें च उपलब्ध ऐ . ब्राउज़र डिफाल्ट सत्यापन प्रतिक्रिया थमां चुनो, जां साढ़े बिल्ट-इन क्लासें ते स्टार्टर जावास्क्रिप्ट कन्नै कस्टम संदेशें गी लागू करो.
अस जानने आं जे इसलै ग्राहक-पक्ष कस्टम सत्यापन शैलियां ते टूलटिप्स सुलभ नेईं न, की जे एह् सहायक तकनीकें कन्नै सरबंधत नेईं न। जदूं अस इक समाधान उप्पर कम्म करदे आं , तां अस या तां सर्वर-साइड विकल्प जां डिफाल्ट ब्राउज़र सत्यापन पद्धति दा इस्तेमाल करने दी सलाह देगे.
इनपुट समूह सत्यापन
इनपुट समूहें गी सत्यापन शैलियें कन्नै दिक्कत होंदी ऐ , दुर्भाग्य कन्नै । साढ़ी सिफारिश ऐ जे फीडबैक संदेशें गी भैन-भ्रा तत्वें दे रूप च रक्खेआ जा .input-groupजेह्ड़ा .is-{valid|invalid}. इनपुट समूहें दे अंदर प्रतिक्रिया संदेशें गी रखने कन्नै border-radius. इस वर्कअराउंड गी दिक्खो .
एचटीएमएल फार्म सत्यापन CSS दे दो छद्म-वर्गें दे राहें लागू कीता जंदा ऐ, :invalidते :valid. एह् <input>, <select>, ते <textarea>तत्वें पर लागू होंदा ऐ ।
:invalidबूटस्ट्रैप माता-पिता वर्ग गी ते :validशैलियें गी दायरे बनांदा ऐ .was-validated, आमतौर पर <form>. नेईं ते, बिना कुसै मूल्य दे कोई बी जरूरी फील्ड पृष्ठ लोड पर अमान्य दे रूप च दस्सेआ जंदा ऐ. इस चाल्लीं, तुस चुन सकदे ओ जे उ’नेंगी कदूं सक्रिय करना ऐ (आम तौर पर फार्म जमा करने दी कोशश करने दे बाद)।
फार्म दी शक्ल गी रीसेट करने आस्तै (उदाहरण दे तौर पर, AJAX दा इस्तेमाल करदे होई गतिशील फार्म सबमिशन दे मामले च), सबमिशन दे बाद दुबारा .was-validatedक्लास गी हटाओ.<form>
फॉलबैक दे रूप च, .is-invalidते सर्वर साइड सत्यापन.is-valid आस्तै छद्म-वर्गें दे बजाय वर्गें दा इस्तेमाल कीता जाई सकदा ऐ . इन्हें गी पैरेंट क्लास दी लोड़ नेईं ऐ ।.was-validated
CSS किस चाल्ली कम्म करदा ऐ इस च बाधाएं दे कारण, अस (वर्तमान च) <label>कस्टम जावास्क्रिप्ट दी मदद दे बगैर इक गी शैलियें गी लागू नेईं करी सकदे जेह् ड़ी DOM च इक फार्म नियंत्रण थमां पैह् ले औंदी ऐ.
सारे आधुनिक ब्राउज़र कन्स्ट्रैंट सत्यापन एपीआई दा समर्थन करदे न , जेह् ड़ी फार्म नियंत्रणें गी प्रमाणत करने आस्तै जावास्क्रिप्ट तरीकें दी इक श्रृंखला ऐ।
फीडबैक संदेश ब्राउज़र डिफाल्ट (हर ब्राउज़र आस्तै बक्ख-बक्ख, ते CSS दे राहें अनस्टाइल करने योग्य) जां साढ़े कस्टम फीडबैक शैलियें दा उपयोग अतिरिक्त HTML ते CSS कन्नै करी सकदे न।
setCustomValidityतुस जावास्क्रिप्ट च कन्नै कस्टम वैधता संदेश उपलब्ध करोआई सकदे ओ .
उसगी ध्यान च रक्खदे होई, साढ़ी कस्टम फार्म सत्यापन शैलियें, वैकल्पिक सर्वर साइड क्लासें, ते ब्राउज़र डिफाल्टें आस्तै निम्नलिखित डेमो पर विचार करो.
कस्टम शैलियाँ
कस्टम बूटस्ट्रैप फार्म सत्यापन संदेशें आस्तै, तुसेंगी novalidateअपने <form>. एह् ब्राउज़र डिफाल्ट फीडबैक टूलटिप्स गी अक्षम करदा ऐ, पर इसदे बावजूद बी जावास्क्रिप्ट च फार्म सत्यापन एपीआई तगर पुज्ज प्रदान करदा ऐ. निचले फार्म गी जमा करने दी कोशश करो; साढ़ी जावास्क्रिप्ट सबमिट बटन गी इंटरसेप्ट करग ते तुसेंगी प्रतिक्रिया रिले करग। जमा करने दी कोशश करदे बेल्लै, तुस अपने फार्म नियंत्रणें पर लागू कीते गेदे :invalidते शैलियें गी दिक्खगे ।:valid
कस्टम फीडबैक शैलियां फीडबैक गी बेहतर तरीके कन्नै संप्रेषित करने आस्तै कस्टम रंग, सीमा, फोकस शैलियां, ते पृष्ठभूमि आइकन लागू करदियां न। s आस्तै पृष्ठभूमि चिह् <select>न सिर्फ कन्नै उपलब्ध न .custom-select, ते नेईं .form-control.
ब्राउज़र डिफ़ॉल्ट होंदा ऐ
कस्टम सत्यापन प्रतिक्रिया संदेशें च रुचि नेईं ऐ जां फार्म व्यवहार बदलने आस्तै जावास्क्रिप्ट लिखने च रुचि नेईं ऐ ? सब अच्छा, तुस ब्राउज़र डिफ़ॉल्ट दा इस्तेमाल करी सकदे ओ। निचले फार्म जमा करने दी कोशश करो। अपने ब्राउज़र ते ओएस दे आधार उप्पर, तुसें गी फीडबैक दी इक थोड़ी बक्खरी शैली दिक्खी जाग।
अस क्लाइंट-साइड सत्यापन दा इस्तेमाल करने दी सलाह दिंदे न , पर इस मामले च जेकर तुसेंगी सर्वर-साइड सत्यापन दी लोड़ ऐ , तां तुस ते कन्नै अवैध ते मान्य फार्म फील्डें गी दर्शाई सकदे .is-invalidओ .is-valid. ध्यान रक्खो जे .invalid-feedbackइनें वर्गें कन्नै बी समर्थत ऐ।
अवैध फील्डें आस्तै, सुनिश्चत करो जे अवैध प्रतिक्रिया/त्रुटि संदेश गी बरतून करियै सरबंधत फार्म फील्ड कन्नै जुड़े दा ऐ aria-describedby. एह् गुण इक थमां मते idसंदर्भ देने दी इजाजत दिंदा ऐ, इस मामले च जे फील्ड पैह् ले थमां गै अतिरिक्त फार्म पाठ गी इशारा करदा ऐ.
समर्थित तत्व
निम्नलिखित फार्म नियंत्रण ते घटकें लेई सत्यापन शैलियां उपलब्ध न:
<input>एस ते <textarea>एस दे नाल.form-control
<select>एस दे नाल .form-controlया.custom-select
.form-checkएस
.custom-checkboxएस ते .custom-radioएस
.custom-file
टूलटिप्स दा
जेकर तुंदा फार्म लेआउट इसदी इजाजत दिंदा ऐ तां तुस इक स्टाइल टूलटिप च सत्यापन प्रतिक्रिया प्रदर्शत करने आस्तै क्लासें .{valid|invalid}-feedbackआस्तै क्लासें गी स्वैप करी सकदे ओ. टूलटिप पोजीशनिंग लेई इस पर .{valid|invalid}-tooltipइक माता-पिता गी ज़रूर रखो । position: relativeहेठ दित्ते गेदे उदाहरन च, साढ़े स्तंभ वर्गें च एह् पैह् ले थमां गै ऐ, पर तुंदे प्रोजेक्ट गी इक वैकल्पिक सेटअप दी लोड़ होई सकदी ऐ.
अनुकूलित करना
Validation states can be customized via Sass with the $form-validation-states map. Located in our _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.
Input group validation workaround
We’re unable to resolve the broken border-radius of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add .rounded-right to the elements with the broken border-radius.
@
Please choose a username.
When you are using a small or large input group or customizing the default border-radius values, add custom CSS to the element with the busted border-radius.
@
Please choose a username.
Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Checkboxes and radios
Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
We use the sibling selector (~) for all our <input> states—like :checked—to properly style our custom form indicator. When combined with the .custom-control-label class, we can also style the text for each item based on the <input>’s state.
We hide the default <input> with opacity and use the .custom-control-label to build a new custom form indicator in its place with ::before and ::after. Unfortunately we can’t build a custom one from just the <input> because CSS’s content doesn’t work on that element.
In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
Checkboxes
Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
If you’re using jQuery, something like this should suffice:
Radios
Inline
Disabled
Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.
Select menu
Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
You may also choose from small and large custom selects to match our similarly sized text inputs.
The multiple attribute is also supported:
As is the size attribute:
Range
Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".
File browser
The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.
Translating or customizing the strings with SCSS
The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):
Here’s lang(es) in action on the custom file input for a Spanish translation:
एचटीएमएल कन्नै स्ट्रिंग्स दा अनुवाद करना जां अनुकूलित करना
बूटस्ट्रैप HTML च "ब्राउज़" पाठ दा अनुवाद करने दा इक तरीका बी उपलब्ध करोआंदा ऐ जिस च एह् data-browseगुण ऐ जेह् ड़ा कस्टम इनपुट लेबल च जोड़ेआ जाई सकदा ऐ (उदाहरण डच च):