बूटस्ट्रैप के कार्ड कई प्रकार और विकल्पों के साथ एक लचीला और एक्स्टेंसिबल सामग्री कंटेनर प्रदान करते हैं।
के बारे में
कार्ड एक लचीला और एक्स्टेंसिबल सामग्री कंटेनर है। इसमें हेडर और फुटर के विकल्प, सामग्री की एक विस्तृत विविधता, प्रासंगिक पृष्ठभूमि रंग और शक्तिशाली प्रदर्शन विकल्प शामिल हैं। यदि आप बूटस्ट्रैप 3 से परिचित हैं, तो कार्ड हमारे पुराने पैनल, कुओं और थंबनेल को बदल देते हैं। उन घटकों के समान कार्यक्षमता कार्ड के लिए संशोधक वर्गों के रूप में उपलब्ध है।
उदाहरण
कार्ड यथासंभव कम मार्कअप और शैलियों के साथ बनाए जाते हैं, लेकिन फिर भी एक टन नियंत्रण और अनुकूलन प्रदान करने का प्रबंधन करते हैं। फ्लेक्सबॉक्स के साथ निर्मित, वे आसान संरेखण प्रदान करते हैं और अन्य बूटस्ट्रैप घटकों के साथ अच्छी तरह से मिश्रण करते हैं। उनके पास marginडिफ़ॉल्ट रूप से नहीं है, इसलिए आवश्यकतानुसार रिक्ति उपयोगिताओं का उपयोग करें ।
नीचे मिश्रित सामग्री और निश्चित चौड़ाई वाले मूल कार्ड का उदाहरण दिया गया है। शुरू करने के लिए कार्ड की कोई निश्चित चौड़ाई नहीं है, इसलिए वे स्वाभाविक रूप से इसके मूल तत्व की पूरी चौड़ाई भर देंगे। यह हमारे विभिन्न आकार विकल्पों के साथ आसानी से अनुकूलित किया जाता है ।
कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
कार्ड विभिन्न प्रकार की सामग्री का समर्थन करते हैं, जिसमें चित्र, पाठ, सूची समूह, लिंक और बहुत कुछ शामिल हैं। क्या समर्थित है इसके उदाहरण नीचे दिए गए हैं।
शरीर
कार्ड का बिल्डिंग ब्लॉक है .card-body. जब भी आपको कार्ड के भीतर एक गद्देदार अनुभाग की आवश्यकता हो, इसका उपयोग करें।
यह कार्ड बॉडी के भीतर कुछ टेक्स्ट है।
शीर्षक, टेक्स्ट और लिंक
कार्ड टाइटल का उपयोग टैग में जोड़कर किया जाता .card-titleहै <h*>। .card-linkउसी तरह, एक <a>टैग में जोड़कर लिंक जोड़े जाते हैं और एक दूसरे के बगल में रखे जाते हैं ।
.card-subtitleउपशीर्षक का उपयोग एक <h*>टैग में जोड़कर किया जाता है । यदि आइटम .card-titleऔर .card-subtitleआइटम किसी आइटम में रखे जाते हैं .card-body, तो कार्ड शीर्षक और उपशीर्षक अच्छी तरह से संरेखित होते हैं।
कार्ड का शीर्षक
कार्ड उपशीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
.card-img-topकार्ड के शीर्ष पर एक छवि रखता है। के साथ .card-text, कार्ड में टेक्स्ट जोड़ा जा सकता है। टेक्स्ट .card-textको मानक HTML टैग्स के साथ भी स्टाइल किया जा सकता है।
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
सूची समूह
फ्लश सूची समूह वाले कार्ड में सामग्री की सूचियां बनाएं।
क्रैस जस्टो ओडियो
दापीबस एसी सुविधा
वेस्टिबुलम और एरोसी
विशेष रुप से प्रदर्शित
क्रैस जस्टो ओडियो
दापीबस एसी सुविधा
वेस्टिबुलम और एरोसी
रसोई के पानी का नल
अपनी ज़रूरत का कार्ड बनाने के लिए कई प्रकार की सामग्री को मिलाएँ और मिलाएँ, या वहाँ सब कुछ फेंक दें। नीचे दिखाए गए चित्र शैलियाँ, ब्लॉक, पाठ शैलियाँ और एक सूची समूह हैं—सभी एक निश्चित-चौड़ाई वाले कार्ड में लिपटे हुए हैं।
कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
कार्ड widthशुरू करने के लिए कोई विशिष्ट नहीं मानते हैं, इसलिए वे 100% चौड़े होंगे जब तक कि अन्यथा न कहा जाए। आप इसे कस्टम CSS, ग्रिड क्लासेस, ग्रिड Sass मिक्सिन या उपयोगिताओं के साथ आवश्यकतानुसार बदल सकते हैं।
ग्रिड मार्कअप का उपयोग करना
ग्रिड का उपयोग करते हुए, कार्ड को आवश्यकतानुसार कॉलम और पंक्तियों में लपेटें।
विशेष शीर्षक उपचार
अतिरिक्त सामग्री के लिए प्राकृतिक लीड-इन के रूप में नीचे दिए गए सहायक पाठ के साथ।
कार्ड में छवियों के साथ काम करने के लि�� कुछ विकल्प शामिल हैं। कार्ड के दोनों छोर पर "इमेज कैप्स" जोड़ने, कार्ड सामग्री के साथ छवियों को ओवरले करने, या केवल कार्ड में छवि एम्बेड करने में से चुनें।
छवि टोपियां
हेडर और फ़ुटर की तरह ही, कार्ड में ऊपर और नीचे "इमेज कैप्स" शामिल हो सकते हैं - कार्ड के ऊपर या नीचे के चित्र।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
छवि ओवरले
एक छवि को कार्ड की पृष्ठभूमि में बदलें और अपने कार्ड के टेक्स्ट को ओवरले करें। छवि के आधार पर, आपको अतिरिक्त शैलियों या उपयोगिताओं की आवश्यकता हो भी सकती है और नहीं भी।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
ध्यान दें कि सामग्री छवि की ऊंचाई से बड़ी नहीं होनी चाहिए। यदि सामग्री छवि से बड़ी है तो सामग्री छवि के बाहर प्रदर्शित होगी।
क्षैतिज
ग्रिड और उपयोगिता वर्गों के संयोजन का उपयोग करके, कार्ड को मोबाइल के अनुकूल और उत्तरदायी तरीके से क्षैतिज बनाया जा सकता है। नीचे दिए गए उदाहरण में, हम ग्रिड गटर को हटाते हैं और ब्रेकपॉइंट पर कार्ड को क्षैतिज बनाने के लिए कक्षाओं का .no-guttersउपयोग करते हैं। आपके कार्ड की सामग्री के आधार पर और समायोजन की आवश्यकता हो सकती है।.col-md-*md
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड शैलियाँ
कार्ड में उनकी पृष्ठभूमि, बॉर्डर और रंग को अनुकूलित करने के लिए विभिन्न विकल्प शामिल हैं।
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
माध्यमिक कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
सफलता कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
डेंजर कार्ड टाइटल
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
चेतावनी कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
जानकारी कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
लाइट कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
डार्क कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
सहायक तकनीकों को अर्थ देना
अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से स्पष्ट है (उदाहरण के लिए दृश्यमान पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .sr-onlyकक्षा के साथ छिपा हुआ अतिरिक्त पाठ।
सीमा
केवल कार्ड को बदलने के लिए सीमा उपयोगिताओं का उपयोग करें । border-colorध्यान दें कि आप माता-पिता या कार्ड की सामग्री के सबसेट .text-{color}पर कक्षाएं लगा सकते हैं जैसा कि नीचे दिखाया गया है।.card
हैडर
प्राथमिक कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
माध्यमिक कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
सफलता कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
डेंजर कार्ड टाइटल
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
चेतावनी कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
जानकारी कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
लाइट कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
हैडर
डार्क कार्ड शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
मिक्सिन्स यूटिलिटीज
आप आवश्यकतानुसार कार्ड हेडर और फुटर पर बॉर्डर भी बदल सकते हैं, और यहां तक कि उनके background-colorसाथ हटा भी सकते हैं .bg-transparent।
हैडर
सफलता कार्ड का शीर्षक
कार्ड के शीर्षक पर निर्माण करने और कार्ड की सामग्री का बड़ा हिस्सा बनाने के लिए कुछ त्वरित उदाहरण टेक्स्ट।
कार्ड लेआउट
कार्ड के भीतर सामग्री को स्टाइल करने के अलावा, बूटस्ट्रैप में कार्ड की श्रृंखला बिछाने के लिए कुछ विकल्प शामिल हैं। फिलहाल, ये लेआउट विकल्प अभी तक उत्तरदायी नहीं हैं ।
कार्ड समूह
समान चौड़ाई और ऊंचाई वाले स्तंभों के साथ एकल, संलग्न तत्व के रूप में कार्ड प्रस्तुत करने के लिए कार्ड समूहों का उपयोग करें। कार्ड समूह display: flex;अपने समान आकार प्राप्त करने के लिए उपयोग करते हैं।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड का शीर्षक
इस कार्ड में अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। इस कार्ड में पहले की तुलना में और भी लंबी सामग्री है जो समान ऊंचाई वाली कार्रवाई दिखाती है।
पिछली बार 3 मिनट पहले अपडेट किया गया
फ़ुटर के साथ कार्ड समूहों का उपयोग करते समय, उनकी सामग्री स्वचालित रूप से पंक्तिबद्ध हो जाएगी।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
इस कार्ड में अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। इस कार्ड में पहले की तुलना में और भी लंबी सामग्री है जो समान ऊंचाई वाली कार्रवाई दिखाती है।
कार्ड डेक
समान चौड़ाई और ऊंचाई वाले कार्डों के एक सेट की आवश्यकता है जो एक दूसरे से जुड़े नहीं हैं? कार्ड डेक का प्रयोग करें।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड का शीर्षक
इस कार्ड में अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। इस कार्ड में पहले की तुलना में और भी लंबी सामग्री है जो समान ऊंचाई वाली कार्रवाई दिखाती है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड समूहों की तरह, डेक में कार्ड फ़ुटर स्वचालित रूप से पंक्तिबद्ध हो जाएंगे।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
इस कार्ड में अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
कार्ड का शीर्षक
यह एक विस्तृत कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। इस कार्ड में पहले की तुलना में और भी लंबी सामग्री है जो समान ऊंचाई वाली कार्रवाई दिखाती है।
ग्रिड कार्ड
आप प्रति पंक्ति कितने ग्रिड कॉलम (आपके कार्ड के चारों ओर लिपटे हुए) को नियंत्रित करने के लिए बूटस्ट्रैप ग्रिड सिस्टम और इसकी .row-colsकक्षाओं का उपयोग करें। उदाहरण के लिए, यहां .row-cols-1एक कॉलम पर कार्ड्स बिछाए जा रहे हैं, और .row-cols-md-2चार कार्ड्स को मध्यम ब्रेकपॉइंट अप से कई पंक्तियों में समान चौड़ाई में विभाजित किया जा रहा है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
इसे इसमें बदलें .row-cols-3और आपको चौथा कार्ड रैप दिखाई देगा।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
जब आपको समान ऊंचाई की आवश्यकता हो, .h-100तो कार्ड में जोड़ें। यदि आप डिफ़ॉल्ट रूप से समान ऊँचाई चाहते हैं, तो आप $card-height: 100%Sass में सेट कर सकते हैं।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड का शीर्षक
यह एक छोटा कार्ड है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
कार्ड का शीर्षक
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
कार्ड कॉलम
कार्ड्स को चिनाई -समान कॉलम में व्यवस्थित किया जा सकता है, जिसमें केवल CSS को लपेटकर रखा जा सकता है .card-columns। columnआसान संरेखण के लिए कार्ड फ्लेक्सबॉक्स के बजाय सीएसएस गुणों के साथ बनाए गए हैं । कार्ड ऊपर से नीचे और बाएं से दाएं ऑर्डर किए जाते हैं।
सचेत! कार्ड कॉलम के साथ आपका माइलेज भिन्न हो सकता है। कार्डों को स्तंभों में टूटने से बचाने के लिए, हमें उन्हें अभी तक बुलेटप्रूफ समाधान के display: inline-blockरूप में सेट करना होगा।column-break-inside: avoid
कार्ड शीर्षक जो एक नई पंक्ति में लपेटता है
यह एक लंबा कार्ड है जिसमें अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है। यह सामग्री थोड़ी लंबी है।
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।
कार्ड का शीर्षक
इस कार्ड में अतिरिक्त सामग्री के लिए स्वाभाविक लीड-इन के रूप में नीचे सहायक टेक्स्ट है।
इस कार्ड के नीचे एक नियमित शीर्षक और पाठ का संक्षिप्त पैराग्राफ है।
पिछली बार 3 मिनट पहले अपडेट किया गया
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।
कार्ड का शीर्षक
यह एक अन्य कार्ड है जिसका शीर्षक और नीचे सहायक टेक्स्ट है। समग्र रूप से इसे थोड़ा लंबा बनाने के लिए इस कार्ड में कुछ अतिरिक्त सामग्री है।
पिछली बार 3 मिनट पहले अपडेट किया गया
कार्ड कॉलम को कुछ अतिरिक्त कोड के साथ बढ़ाया और अनुकूलित भी किया जा सकता है। नीचे दिखाया गया है .card-columnsकि उसी सीएसएस का उपयोग करके वर्ग का विस्तार है जिसका हम उपयोग करते हैं-सीएसएस कॉलम- कॉलम की संख्या को बदलने के लिए उत्तरदायी स्तरों का एक सेट उत्पन्न करने के लिए।