जैसा कि नाम से पता चलता है, किसी कंटेनर का उपयोग किसी चीज़ को पकड़ने या बाँधने के लिए किया जाता है उसी तरह बूटस्ट्रैप में कंटेनर का उपयोग व्यूपोर्ट पर सामग्री को संग्रहीत या बाँधने के लिए किया जाता है। कंटेनर व्यूपोर्ट के चारों तरफ से मार्जिन प्रदान करके सामग्री में पैडिंग जोड़ते हैं और इसे जरूरतों के आधार पर बदला भी जा सकता है। कंटेनरों को एक दूसरे के अंदर भी नेस्ट किया जा सकता है।
अब, प्रत्येक वर्ग को विस्तार से समझते हैं
कंटेनर
बूटस्ट्रैप में, .container वर्ग एक व्यूपोर्ट में एक निश्चित चौड़ाई के साथ एक प्रतिक्रियाशील कंटेनर बनाता है। यह एक व्यूपोर्ट के आकार के आधार पर एक कंटेनर की अधिकतम-चौड़ाई निर्धारित करता है।
व्यूपोर्ट के आकार के आधार पर कंटेनर वर्ग की अधिकतम-चौड़ाई का वर्णन करने वाला चार्ट नीचे दिया गया है।
| | अतिरिक्त छोटा | छोटा | माध्यम | बड़ा | अतिरिक्त बड़ा |
| अधिकतम-चौड़ाई | 100% | 540px | 720px | 960px | 1140px |
उदाहरण
इसे बेहतर ढंग से समझने के लिए एक उदाहरण लेते हैं
<html> <head> <title>.Container Class</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container bg-dark text-white" style> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>
आउटपुट
इस कोड का आउटपुट होगा
कंटेनर-तरल
बूटस्ट्रैप में, .container-fluid वर्ग एक व्यूपोर्ट में 100% की निश्चित चौड़ाई के साथ एक प्रतिक्रियाशील कंटेनर बनाता है। यह एक कंटेनर की अधिकतम-चौड़ाई को किसी व्यूपोर्ट के आकार के बावजूद 100% पर सेट करता है।
एक .container-fluid वर्ग की अधिकतम-चौड़ाई का वर्णन करने वाला चार्ट नीचे दिया गया है।
| | अतिरिक्त छोटा | छोटा | माध्यम | बड़ा | अतिरिक्त बड़ा |
| अधिकतम-चौड़ाई | 100% | 100% | 100% | 100% | 100% |
उदाहरण
आइए इसे बेहतर ढंग से समझने के लिए एक उदाहरण लेते हैं
<html> <head> <title>.Container Class</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container-fluid bg-dark text-white"> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>
आउटपुट
इस कोड का आउटपुट होगा
