बूटस्ट्रैप सीएसएस का उपयोग करके पृष्ठ पर दो केंद्र क्षैतिज रूप से साइड में संरेखित करें

Question 1

कृपया नीचे दिए गए कोड को देखें जो मैंने कोशिश की

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

आउटपुट:

First Div
SecondDiv

अपेक्षित उत्पादन :

                      First Div        Second Div

मैं बूटस्ट्रैप css का उपयोग करके दो divs को क्षैतिज रूप से केंद्र में संरेखित करना चाहता हूं। मैं यह कैसे कर सकता हूँ ? मैं ऐसा करने के लिए सरल सीएसएस और फ्लोटिंग अवधारणा का उपयोग नहीं करना चाहता। क्योंकि मुझे मीडिया क्वेरी का उपयोग करने के बजाय सभी प्रकार के लेआउट (अर्थात सभी विंडो आकार और रिज़ॉल्यूशन) में काम करने के लिए बूटस्ट्रैप सीएसएस का उपयोग करने की आवश्यकता है।

Question 2

यह काम कर जाना चाहिए:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

बूटस्ट्रैप डॉक्स के ग्रिड सिस्टम सेक्शन के बारे में अपने आप को बताएं कि बूटस्ट्रैप की ग्रिड कैसे काम करती है:

http://getbootstrap.com/css/#grid

Question 3

बूटस्ट्रैप कक्षाओं का उपयोग करें col-xx-#औरcol-xx-offset-#

तो यहाँ क्या हो रहा है आपकी स्क्रीन 12 कॉलम में विभाजित हो रही है। में col-xx-#, #आपके द्वारा कवर किए जाने वाले स्तंभों की संख्या और ऑफसेट आपके द्वारा छोड़े गए स्तंभों की संख्या है।

के लिए xx, एक सामान्य वेबसाइट में, mdपसंद किया जाता है और यदि आप चाहते हैं कि आपका लेआउट मोबाइल डिवाइस में समान दिखे, तो xsइसे पसंद किया जाता है।

मैं आपकी आवश्यकता का क्या कर सकता हूं,

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

चाल चलनी चाहिए।

Question 4

वैकल्पिक बूटस्ट्रैप 4 समाधान (इस तरह से आप div -6 का उपयोग कर सकते हैं जो col-6 से छोटे हैं ):

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

अधिक

Question 5

<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

यह ट्रिक करता है।

Question 6

दो विभाजनों को क्षैतिज रूप से संरेखित करने के लिए आपको बस बूटस्ट्रैप के दो वर्गों को जोड़ना होगा: यहाँ बताया गया है:

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

Question 7

रणवीर द्वारा दी गई प्रतिक्रिया (ऊपर दूसरा जवाब) बिल्कुल काम नहीं करती है।

वह उपयोग करने के लिए कहता है col-xx-offset-#, लेकिन ऐसा नहीं है कि कैसे ऑफसेट का उपयोग किया जाता है।

यदि आप अपना समय बर्बाद करने की कोशिश कर रहे हैं col-xx-offset-#, जैसा कि मैंने उनके जवाब के आधार पर किया था, तो समाधान का उपयोग करना है offset-xx-#।

Question 8

वैकल्पिक जो मैंने प्रोग्रामिंग कोणीय किया था:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Question 9

मैं बूटस्ट्रैप पर सीएसएस ग्रिड की सलाह देता हूं यदि आप वास्तव में क्या चाहते हैं, तो अधिक संरचित डेटा होना चाहिए, उदाहरण के लिए कई पंक्तियों के साथ साइड टेबल, क्योंकि आपको हर बच्चे के लिए क्लास का नाम नहीं जोड़ना है:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

सीएसएस ग्रिड