Twitter बूटस्ट्रैप का उपयोग करके आप कैसे केंद्रित सामग्री प्राप्त कर सकते हैं?

Question

मैं एक बहुत ही बुनियादी उदाहरण का अनुसरण करने की कोशिश कर रहा हूं। स्टार्टर पेज और ग्रिड सिस्टम का उपयोग करके , मैं निम्नलिखित की उम्मीद कर रहा था:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... केंद्रित पाठ का उत्पादन करेगा।

हालांकि, यह अभी भी बाईं ओर दिखाई देता है। मैं क्या गलत कर रहा हूं?

Comments

क्या आप '<div class = "span12"> केंद्रित है, या आप संपूर्ण' <div class = "row"> 'div ब्राउज़र विंडो में केंद्रित पाठ चाहते हैं?

— NerdFury

Twitter.github.com/bootstrap/scaffolding.html#gridSystem पर

— अमोल एम कुलकर्णी

@ जो लोग एचटीएमएल संगतता के बारे में परवाह करते हैं। जिसके <center>पक्ष में text-align: center, संयोगवश, वास्तव में बूटस्ट्रैप वर्ग .text-centerलपेटता है।

— jmoss

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, तो देखें: stackoverflow.com/questions/42388989/…

— Zim

Answer 1

यह टेक्स्ट सेंटरिंग के लिए है ( जो कि प्रश्न के बारे में था )

अन्य प्रकार की सामग्री के लिए, Flavien का उत्तर देखें ।

अपडेट: बूटस्ट्रैप 2.3.0+ उत्तर

मूल उत्तर बूटस्ट्रैप के शुरुआती संस्करण के लिए था। बूटस्ट्रैप 2.3.0 के रूप में, आप बस div को क्लास दे सकते हैं.text-center ।

---

मूल उत्तर (पूर्व 2.3.0)

आपको दो वर्गों में से एक को परिभाषित करने की आवश्यकता है, rowया span12एक के साथ text-align: center। Http://jsfiddle.net/xKSUH/ या http://jsfiddle.net/xKSUH/1/ देखें

Comments

मैंने इसे दोनों पंक्ति और स्पैन 12 के लिए आज़माया है, लेकिन स्पैन 12 के अंदर मेरी तालिका, पंक्ति के अंदर हमेशा बाईं ओर बैठती है। पैडिंग जोड़कर इसे केंद्र में ले जाया जाता है, लेकिन मैं इसे उत्तरदायी तरीके से केंद्र में रखना चाहता हूं। क्या मैं किसी तरह ऑटो पैडिंग कर सकता हूं?

— एटीएसम

मैं देखता हूं कि यह काम कर रहा है, लेकिन हमें इसे परिभाषित करने की आवश्यकता क्यों है। क्या ये पहले से परिभाषित नहीं हैं? मैं सिर्फ पाठ के बारे में बात कर रहा हूं ....

— अक्षत जीवन शर्मा

@ अक्षतजवानशर्मा - कक्षाएं परिभाषित की जाती हैं, लेकिन अंतिम बार मैंने देखा, text-align: centerउन कक्षाओं पर डिफ़ॉल्ट नहीं है। आमतौर पर डिफ़ॉल्ट leftसंरेखण होने जा रहा है ।

— स्कॉट्स

2.3.0 पूर्व के लिए .pagination-centeredभी काम करता है: पी आपको एक अन्य वर्ग को जोड़ने के कीस्ट्रोक को बचाता है।

— सरीम

@ सरीम: वास्तव में, pagination-centeredआपको HTML में एक और वर्ग जोड़ने की आवश्यकता है। मेरे पूर्व 2.3.0 उत्तर को केवल पहले से ही वहां मौजूद वर्ग की संपत्ति परिभाषा का विस्तार करने की आवश्यकता है। साथ ही, यदि आप उपयोग करने वाले उत्तर पर टिप्पणियों को देखते हैं, तो आपको pagination-centeredउससे संबंधित कुछ आपत्तियां और चेतावनी मिलेंगी। लेकिन अगर यह आपके मामले में आपके लिए काम करता है - तो इसके पास जाओ! :-)

— स्कॉट्स

Answer 2

नोट: यह बूटस्ट्रैप 3 में हटा दिया गया था ।

---

पूर्व बूटस्ट्रैप 3, आप pagination-centeredइस तरह सीएसएस वर्ग का उपयोग कर सकते हैं :

<div class="span12 pagination-centered">
    Centered content.
</div>

क्लास pagination-centeredपहले से ही bootstrap.css (या bootstrap.min.css) में है और इसका एक ही नियम है:

.pagination-centered{text-align:center;}

बूटस्ट्रैप के साथ 2.3.0। बस कक्षा का उपयोग करेंtext-center

Comments

मैं यह सुझाव देता हूं कि इसके बहुत विशिष्ट होने के रूप में इसका उपयोग पेजिनेशन के रूप में किया जा सकता है (वर्गनाम से अनुमानित)। यह उन शैलियों के साथ टकरा सकता है जो आप पृष्ठांकन पर लागू करते हैं और भविष्य के अपडेट के साथ संगत नहीं हो सकते हैं यदि बूटस्ट्रैप यह तय करता है कि इस वर्ग को केंद्रित पृष्ठ पर अंक लगाना के लिए और अधिक करने की आवश्यकता है।

— डेटसन

@ lurii.k यह बच्चों सहित सभी को केंद्रित बनाता है। क्या होगा अगर हम सिर्फ बाहरी कंटेनर को संरेखित करना चाहते हैं, लेकिन क्या इसके अंदर सब कुछ बचा हुआ है?

— gatzkerob

बूटस्ट्रैप के साथ 2.3.0। बस सीएसएस क्लास

— .text-

अब तक का सबसे शानदार जवाब! बूटस्ट्रैप 2.3.2 के साथ काम करें

— jQuery00

ऐसा प्रतीत होता है कि बूटस्ट्रैप 3.0.0 ने इस वर्ग को हटा दिया है। .text-centerमाता-पिता का उपयोग करना इस संस्करण के लिए सही समाधान है।

— ब्लेज़मॉन्गर

Answer 3

मुझे लगता है कि यहां के अधिकांश लोग वास्तव में संपूर्णdiv को केंद्र में रखने के तरीके की खोज कर रहे हैं और न केवल पाठ सामग्री (जो कि तुच्छ है ...)।

HTML में चीजों को केंद्र में रखने के लिए दूसरा तरीका (टेक्स्ट-संरेखित: केंद्र का उपयोग करने के बजाय) एक निश्चित चौड़ाई और ऑटो मार्जिन (बाएं और दाएं) के साथ एक तत्व है। बूटस्ट्रैप के साथ, ऑटो मार्जिन को परिभाषित करने वाली शैली "कंटेनर" वर्ग है।

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

एक बेला के लिए यहाँ देखें: http://jsfiddle.net/D2RLR/7788/

Comments

यह सही उत्तर है, जैसा कि यहां आधिकारिक रूप से प्रलेखित है: twitter.github.com/bootstrap/scaffolding.html#layouts

— Qlimax

@ क्यूलीमैक्स आपका लिंक टूटा हुआ प्रतीत हो रहा है, मुझे लगता है कि यह वही है जो आप 2.3.2 के लिए चाहते थे: getbootstrap.com/2.3.2/scaffolding.html#layouts

— क्रिस

@ सेबैस्टियालोनो मैंने अभी पदावनत निर्भरता तय की है, इस मुद्दे की रिपोर्ट करने के लिए धन्यवाद

— फ़्लेवियन वोल्केन

यदि आप किसी कॉलम को केंद्र में रखना चाहते हैं तो यह काम नहीं करेगा। ग्रिड कॉलम को केंद्र में रखने के लिए, उपयोग करें col-*offset-*। उदाहरण के लिए <div class="col-10 offset-1">या<div class="col-8 offset-2">

— sagon00

Answer 4

अपडेट 2019 - बूटस्ट्रैप 4

"केंद्रित सामग्री" का अर्थ कई अलग-अलग चीजें हो सकती हैं, और मूल पोस्ट के बाद से बूटस्ट्रैप सेंटरिंग बहुत बदल गई है।

क्षैतिज केंद्र

बूटस्ट्रैप ३

• text-centerdisplay:inlineतत्वों के लिए प्रयोग किया जाता है
• center-blockकेंद्र display:blockतत्वों के लिए
• col-*offset-* ग्रिड स्तंभों को केंद्र में रखना
• देखने के इस जवाब नेवबार केंद्र के लिए

डेमो बूटस्ट्रैप 3 क्षैतिज केंद्र

बूटस्ट्रैप ४

• text-centerअभी भी display:inlineतत्वों के लिए उपयोग किया जाता है
• mx-autocenter-blockकेंद्र display:blockतत्वों की जगह
• offset-* या mx-auto ग्रिड कॉलम को केंद्र में रखने के लिए इस्तेमाल किया जा सकता है
• justify-content-centerमें rowभी इस्तेमाल किया जा सकता हैcol-*

mx-auto(ऑटो x- अक्ष मार्जिन) केंद्रित कर देगा display:blockया display:flexतत्व एक है कि परिभाषित चौड़ाई , ( %, vw, px, आदि ..)। फ्लेक्सबॉक्स का उपयोग ग्रिड कॉलम पर डिफ़ॉल्ट रूप से किया जाता है , इसलिए विभिन्न फ्लेक्सबॉक्स केंद्रित तरीके भी हैं।

डेमो बूटस्ट्रैप 4 क्षैतिज केंद्र

---

कार्यक्षेत्र केंद्र

अब जब बूटस्ट्रैप 4 डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स है , तो ऑटो-मार्जिन , फ्लेक्सबॉक्स बर्तनों या प्रदर्शन बर्तनों के साथ ऊर्ध्वाधर संरेखित बर्तनों का उपयोग करके ऊर्ध्वाधर संरेखण के लिए कई अलग-अलग दृष्टिकोण हैं । पहले "वर्टिकल अलाइन बर्तन" स्पष्ट लगता है लेकिन ये केवल इनलाइन और टेबल डिस्प्ले तत्वों के साथ काम करते हैं। यहां कुछ बूटस्ट्रैप 4 वर्टिकल सेंटरिंग विकल्प दिए गए हैं।

---

1 - ऑटो मार्जिन का उपयोग करते हुए लंबवत केंद्र:

लंबवत केंद्र का दूसरा तरीका उपयोग करना है my-auto। यह तत्व को कंटेनर के भीतर केंद्रित करेगा। उदाहरण के लिए, h-100पंक्ति को पूर्ण ऊँचाई देता है, और स्तंभ my-autoको लंबवत रूप से केंद्र करेगा col-sm-12।

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

ऑटो मार्जिन डेमो का उपयोग कर कार्यक्षेत्र केंद्र

my-auto ऊर्ध्वाधर y- अक्ष पर मार्जिन का प्रतिनिधित्व करता है और इसके बराबर है:

margin-top: auto;
margin-bottom: auto;

---

2 - फ्लेक्सबॉक्स के साथ लंबवत केंद्र:

चूंकि बूटस्ट्रैप 4 .rowअब है, इसलिए display:flexआप इसे align-self-centerकिसी भी कॉलम पर वर्टिकली सेंटर कर सकते हैं ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

या, पंक्ति में सभी को केंद्र में संरेखित करने के align-items-centerलिए संपूर्ण पर उपयोग .rowकरें col-*...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

कार्यक्षेत्र केंद्र विभिन्न ऊंचाई कॉलम डेमो

---

3 - प्रदर्शन बर्तन का उपयोग कर कार्यक्षेत्र केंद्र:

बूटस्ट्रैप 4 प्रदर्शन utils कि के लिए इस्तेमाल किया जा सकता display:table, display:table-cell, display:inline, आदि .. इन के साथ इस्तेमाल किया जा सकता लंबवत संरेखण utils संरेखित इनलाइन करने के लिए, इनलाइन-ब्लॉक या तालिका सेल तत्वों।

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

प्रदर्शन बर्तन डेमो का उपयोग कर कार्यक्षेत्र केंद्र

Comments

ग्रिड लेआउट का उपयोग करते समय मैंने पाया कि सीएसएस का केवल निम्न संयोजन क्षैतिज और लंबवत रूप से एक कॉलम के अंदर एक div संरेखित करेगा ताकि स्तंभ की अधिकतम ऊंचाई भी एक ही पंक्ति में सबसे बड़े स्तंभ से मेल खाए। .className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }

— user3188040

बहुत बहुत धन्यवाद। इससे मेरी समस्या हल हो गई।

— sgan00

अगर मैं कर सकता तो मैं प्रत्येक डेमो के लिए upvote था। वे बहुत अच्छे है। :) बहुत बहुत धन्यवाद!

— पास्कल

Answer 5

बूटस्ट्रैप 3.1.1 में .center-blockdivs को केन्द्रित करने के लिए एक वर्ग है। देखें: http://getbootstrap.com/css/#helper-classes-center ।

केंद्र सामग्री ब्लॉक एक तत्व को इसके display: blockमाध्यम से और केंद्र पर सेट करें margin। एक मिश्रण और वर्ग के रूप में उपलब्ध है।

<div class="center-block">...</div>

या, जैसा कि अन्य पहले ही कह चुके हैं, .text-centerकक्षा से केंद्र पाठ तक का उपयोग करें।

Answer 6

ऐसा करने का सबसे अच्छा तरीका एक सीएसएस शैली को परिभाषित करना है:

.centered-text {
    text-align:center
}    

फिर जहां कभी आपको केंद्रित पाठ की आवश्यकता होती है वहां आप इसे जोड़ते हैं:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

या यदि आप केवल पी टैग केंद्रित चाहते हैं:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

कम इनलाइन सीएसएस आप बेहतर उपयोग करते हैं।

Comments

एक अच्छा, मैंने इसे बूटस्ट्रैप मोडल पाद में बटनों को केन्द्रित करने के लिए उपयोग किया।

— जायंट एल्क

Answer 7

वर्ग .show- ग्रिड लिंक में उदाहरण में केंद्र संरेखित पाठ लागू कर रहा है।

आप हमेशा style="text-align:center"अपनी पंक्ति div या किसी अन्य वर्ग को जोड़ सकते हैं जो मुझे लगता है।

Comments

इस तरह की इनलाइन शैलियों को जोड़ना अक्सर बुरा अभ्यास माना जाता है

— स्पेंसर विलियम्स

मैं सहमत हूँ, और इसीलिए मैंने भी कहा "या कुछ अन्य वर्ग" :)

— PAULDAWG

Answer 8

फरवरी 2013 तक, कुछ मामलों में, मैं "स्पैन" div में एक "केंद्रित" वर्ग जोड़ता हूं:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

और सीएसएस को:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

इसका कारण यह है क्योंकि स्पैन * डिव का लेफ्ट बाईं ओर फ्लोट किया जाता है, और "ऑटो मार्जिन" सेंटिंग तकनीक केवल तभी काम करती है जब डिव फ्लोट न हो।

डेमो (JSFiddle पर): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

Comments

यह सबसे अच्छा जवाब है क्योंकि यह div केंद्रित है और यह अभी भी उत्तरदायी है। यहाँ डेमो के लिए एक बेला है। जवाब में एक काम नहीं करता है: jsfiddle.net/r7Qgn/6

— रफ़ी

Answer 9

यदि आप बूटस्ट्रैप 3 का उपयोग करते हैं, तो इसमें .text-center नाम का अंतर्निहित CSS वर्ग भी होता है । ये वही है जो आप चाहते हो।

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

कृपया jsfiddle में उदाहरण देखें। http://jsfiddle.net/ucheng/Q4Fue/

Answer 10

बूटस्ट्रैप 2.3 में एक text-centerवर्ग है।

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Comments

नहीं, यह केवल पाठ के लिए काम करता है, प्रश्न मुख्य कंटेनर के बारे में है

— drmartin

"प्रश्न मुख्य कंटेनर के बारे में है" मैं यह नहीं देखता कि आप ऐसा क्यों दावा करते हैं (और स्वीकृत उत्तर देखें)

— leonbloy

Answer 11

अपनी तरफ से मैं नई CSSशैलियों को परिभाषित करने के लिए उपयोग करने के लिए तैयार हूं और याद रखना आसान है:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

क्या यह एक अच्छा विचार है? क्या इसके लिए कोई अच्छा अभ्यास है?

Comments

फिसलन वाली ढलान। सीएसएस को दस्तावेज़ संरचना से स्टाइल की चिंताओं को दूर करना है। ये, अप्रत्यक्ष रूप से, उन्हें वापस जोड़ते हैं। हो सकता है कि टीबीएस उनके span12एस और इसी तरह के उदाहरण के साथ एक बुरा उदाहरण सेट करता है

— 22

मैं फिसलन ढलान टिप्पणी से सहमत हूं। मैं यह भी जोड़ना चाहूंगा कि Twitter बूटस्ट्रैप का उपयोग अपने आप में एक फिसलन ढलान है।

— जेसन स्विट

Answer 12

यदि आप बूटस्ट्रैप 2.0+ का उपयोग कर रहे हैं

यह div को पेज पर केंद्रित कर सकता है।

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Comments

यह तत्व को केंद्रित नहीं करता है। यह तत्व के ऊपरी बाएँ कोने को 4 स्तंभों के आगे रखता है। केंद्रीकरण का अर्थ है तत्व के सटीक केंद्र को कंटेनर तत्व के केंद्र में रखना।

— Cagatay Kalan

Answer 13

कोई भी पाठ-संरेखित उपयोगिता वर्ग चाल चलन करेगा। बूटस्ट्रैप .text-centerलंबे समय से पाठ को केंद्रित करने के लिए कक्षा का उपयोग कर रहा है ।

.text-center { text-align: center !important; }

या आप अपनी खुद की यूटिलिटीज बना सकते हैं। कुछ बदलाव मैंने पिछले कुछ वर्षों में देखे हैं:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

Comments

क्लास को दिए गए तत्व को पुल-लेफ्ट और पुल-राइट प्रभाव के बाद से अच्छा डिज़ाइन नहीं। पुल-केंद्र जैसा कि आप परिभाषित करते हैं, तत्व के चिल्ड को प्रभावित करता है।

— कागटाय कलां

Answer 14

आप के साथ समायोजित करने की आवश्यकता है .span।

उदाहरण:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

Answer 15

जवाबदेही (मोबाइल अनुकूलता) को बनाए रखते हुए सूचना के ब्लॉक को केंद्रित करने के लिए मेरा पसंदीदा तरीका span1यह है कि आप जिस सामग्री को केंद्र में रखना चाहते हैं उससे पहले और बाद में दो खाली डिव को जगह दें ।

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Answer 16

बूटस्ट्रैप संस्करण 3.1.1 और इसके बाद के संस्करण के लिए, सामग्री को केंद्रित करने के लिए सबसे अच्छा वर्ग .center-blockसहायक वर्ग है।

Comments

हाँ, यह अब बहुत थीम है और उपयोगकर्ता 3.1.1 से अधिक बूटस्ट्रैप संस्करणों का उपयोग करते हैं

— SAFEEN 1990

Answer 17

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

मुख्य में कंटेनर-तरल पदार्थ का उपयोग न करें।

Comments

आपके पास centeredअपने कोड में एक वर्ग है जो बहुत भ्रम पैदा करेगा

— bg17aw

दिलचस्प दृष्टिकोण, लेकिन मेरे विशेष वेबफॉर्म सीएसएस के लिए, यह एक अच्छा विकल्प था।

— जोशिएट्स

Answer 18

केंद्र-ब्लॉक भी एक विकल्प है जो उपरोक्त उत्तरों में संदर्भित नहीं है

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

सभी वर्ग center-blockको 0 ऑटो के मार्जिन के तत्व को बताने के लिए है, ऑटो को बाएं / दाएं हाशिये पर होना चाहिए। हालाँकि, जब तक कि क्लास टेक्स्ट-सेंटर या css टेक्स्ट-एलाइन: सेंटर; माता-पिता पर सेट है, तत्व को इस ऑटो गणना से काम करने के लिए बिंदु नहीं पता है, इसलिए यह खुद को प्रत्याशित रूप से केंद्र नहीं करेगा।

इसलिए टेक्स्ट-सेंटर एक बेहतर विकल्प है।

Answer 19

आप नीचे दिए गए किसी भी प्रकार का उपयोग कर सकते हैं

1. बूटस्ट्रैप मौजूदा वर्ग का उपयोग करें text-center।
2. एक कस्टम शैली जोड़ना style = "text-align:center"।

3. एक कॉलम ऑफ़सेट का उपयोग करें:

   उदाहरण: <div class="col-md-offset-6 col-md-12"></div>

Answer 20

मैंने उत्तरदायी विशेषताओं को बनाए रखते हुए स्क्रीन आकार की परवाह किए बिना रखने के लिए इस वर्ग का निर्माण किया:

.container {
    alignment-adjust: central;
}

Answer 21

जिस डिव या टैग को आप चाहते हैं, उसके लिए बस एक क्लास, टेक्स्ट-सेंटर का उपयोग करें। मुझे लगता है कि यह ठीक काम कर सकता है। यह पाठ संरेखित केंद्र के लिए एक बूटस्ट्रैप वर्ग है।

यहाँ कुछ पाठ संरेखण बूटस्ट्रैप कक्षाएं हैं:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

Answer 22

मैंने दो तरीकों की कोशिश की, और इसने div को केन्द्रित करने का काम किया। दोनों तरीके सभी स्क्रीनों पर divs को संरेखित करेंगे।

तरीका 1: पुश का उपयोग करना:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

तरीका 2: ऑफसेट का उपयोग करना:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

परिणाम:

व्याख्या

बूटस्ट्रैप निर्दिष्ट स्क्रीन-अधिभोग के पहले कॉलम को बाईं ओर नामित करेगा। यदि हम ऑफसेट का उपयोग करते हैं या इसे धक्का देते हैं तो यह 'उन लोगों' कॉलम द्वारा 'इस' कॉलम को स्थानांतरित कर देगा। हालाँकि मुझे ऑफ़सेट की जवाबदेही में कुछ मुद्दों का सामना करना पड़ा, लेकिन पुश बहुत बढ़िया था।

Answer 23

अपडेट 2018:

में बूटस्ट्रैप 4.1.3 , सामग्री वर्ग का उपयोग कर केंद्रित किया जा सकता है mx-auto।

<div class="mx-auto">
  Centered element
</div>

संदर्भ: https://getbootstrap.com/docs/4.1/utilities/spacing/#horouble-centering