Bootstrap में कंटेनर (Containers) - उदाहरण सहित

Bootstrap कंटेनर क्या हैं?

जैसा कि नाम से पता चलता है, कंटेनर का उपयोग सामग्री को रखने या बांधने के लिए किया जाता है। Bootstrap में कंटेनर्स व्यूपोर्ट (viewport) पर सामग्री को संग्रहीत या बांधने के लिए उपयोग किए जाते हैं। कंटेंट को चारों तरफ से मार्जिन देकर पैडिंग जोड़ते हैं और इसे आवश्यकतानुसार बदला भी जा सकता है। कंटेनर्स को एक दूसरे के अंदर नेस्ट (nested) भी किया जा सकता है।

1. .container क्लास

Bootstrap में .container क्लास एक रिस्पॉन्सिव कंटेनर बनाता है जिसकी व्यूपोर्ट में एक निश्चित चौड़ाई (fixed width) होती है। यह व्यूपोर्ट के आकार के आधार पर कंटेनर की अधिकतम चौड़ाई (max-width) सेट करता है।

मैक्स-विड्थ तालिका

उदाहरण

<!DOCTYPE html>
<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">
</head>
<body style="border:5px solid Black;">
    <br>
    <div class="container bg-dark text-white">
        <center>
            <h1>tutorialspoint</h1>
            <h6>SIMPLYEASYLEARNING</h6>
        </center>
    </div>
</body>
</html>

2. .container-fluid क्लास

Bootstrap में .container-fluid क्लास एक रिस्पॉन्सिव कंटेनर बनाता है जिसकी व्यूपोर्ट में 100% चौड़ाई होती है। यह व्यूपोर्ट के आकार की परवाह किए बिना max-width को 100% पर सेट करता है।

मैक्स-विड्थ तालिका

उदाहरण

<!DOCTYPE html>
<html>
<head>
    <title>.Container-fluid 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">
</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>

अंतर सारांश

• .container: निश्चित चौड़ाई, ब्रेकपॉइंट्स पर बदलती है, किनारों पर मार्जिन रहता है।
• .container-fluid: पूर्ण चौड़ाई (100%), कोई साइड मार्जिन नहीं, किनारों तक फैलता है।