बूटस्ट्रैप 4 कस्टम फॉर्म

बूटस्ट्रैप 4 अनुकूलित प्रपत्र तत्वों के साथ आता है, जो ब्राउज़र डिफ़ॉल्ट को बदलने के लिए हैं:

कस्टम रेंज:

डिफ़ॉल्ट रेंज:

कस्टम चेकबॉक्स

एक कस्टम चेकबॉक्स बनाने के लिए, एक कंटेनर तत्व, जैसे <div>, को चेकबॉक्स के आस-पास एक वर्ग के साथ .custom-controlलपेटें .custom-checkbox। फिर .custom-control-inputटाइप = "चेकबॉक्स" के साथ इनपुट में जोड़ें।

युक्ति: यदि आप पाठ के साथ लेबल का उपयोग करते हैं, तो उसमें .custom-control-labelकक्षा जोड़ें। ध्यान दें कि विशेषता के लिए का मान चेकबॉक्स की आईडी से मेल खाना चाहिए:

उदाहरण

<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>

कस्टम स्विच

एक कस्टम "टॉगल स्विच" बनाने के लिए, एक कंटेनर तत्व, जैसे <div> को एक चेकबॉक्स के चारों ओर .custom-controlऔर उसके आस-पास लपेटें। .custom-switchफिर .custom-control-inputकक्षा को चेकबॉक्स में जोड़ें:

उदाहरण

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>

कस्टम रेडियो बटन

एक कस्टम रेडियो बटन बनाने के लिए, एक कंटेनर तत्व, जैसे <div>, को रेडियो बटन की कक्षा .custom-controlऔर .custom-radioउसके आसपास लपेटें। फिर .custom-control-inputइनपुट में टाइप = "रेडियो" के साथ जोड़ें।

युक्ति: यदि आप पाठ के साथ लेबल का उपयोग करते हैं, तो उसमें .custom-control-labelकक्षा जोड़ें। ध्यान दें कि विशेषता के लिए का मान रेडियो की आईडी से मेल खाना चाहिए:

उदाहरण

<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>

इनलाइन कस्टम फॉर्म नियंत्रण

यदि आप चाहते हैं कि कस्टम प्रपत्र नियंत्रण साथ-साथ हों (इनलाइन), .custom-control-inlineतो रैपर/कंटेनर में जोड़ें:

उदाहरण

<form>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>

कस्टम चयन मेनू

एक कस्टम चयन मेनू बनाने के लिए, .custom-selectवर्ग को <select> तत्व में जोड़ें:

उदाहरण

<form>
<select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

कस्टम चयन मेनू आकार

.custom-select-smएक छोटा चयन मेनू बनाने के लिए कक्षा का उपयोग करें और .custom-select-lgबड़े के लिए कक्षा का उपयोग करें:

उदाहरण

<form>

<select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

कस्टम रेंज

एक कस्टम श्रेणी मेनू बनाने के लिए, .custom-rangeटाइप = "<रेंज>" के साथ एक इनपुट में क्लास जोड़ें:

उदाहरण

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

कस्टम फ़ाइल अपलोड

.custom-fileएक कस्टम फ़ाइल अपलोड बनाने के लिए, टाइप = "फ़ाइल" के साथ इनपुट के चारों ओर एक वर्ग के साथ एक कंटेनर तत्व लपेटें । फिर .custom-file-inputइसमें डालें।

युक्ति: यदि आप पाठ के साथ लेबल का उपयोग करते हैं, तो उसमें .custom-file-labelकक्षा जोड़ें। ध्यान दें कि विशेषता के लिए का मान चेकबॉक्स की आईडी से मेल खाना चाहिए:

ध्यान दें कि यदि आप किसी विशिष्ट फ़ाइल का चयन करते समय फ़ाइल का नाम दिखाना चाहते हैं तो आपको कुछ jQuery कोड भी शामिल करना होगा:

उदाहरण

<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

बूटस्ट्रैप 4 ट्यूटोरियल

बूटस्ट्रैप 4 ग्रिड

बूटस्ट्रैप 4 अन्य

बूटस्ट्रैप 4 रेफरी

बूटस्ट्रैप 4 कस्टम फॉर्म