in English

स्तम्भाः

अस्माकं flexbox grid system इत्यस्य धन्यवादेन संरेखणस्य, आदेशस्य, offsetting इत्यस्य च कृते मुष्टिभ्यां विकल्पैः सह स्तम्भान् कथं परिवर्तयितुं शक्यते इति ज्ञातव्यम् । अधिकं, गैर-जाल-तत्त्वानां विस्तारं प्रबन्धयितुं स्तम्भवर्गाणां उपयोगः कथं भवति इति पश्यन्तु ।

इस पृष्ठ पर

शिरः उपरि ! स्वस्य जालस्तम्भान् कथं परिवर्तयितव्यं अनुकूलितं च कर्तव्यमिति गोतां कर्तुं पूर्वं प्रथमं Grid पृष्ठं अवश्यं पठन्तु ।

ते कथं कार्यं कुर्वन्ति

स्तम्भाः जालस्य flexbox वास्तुकलायां निर्मान्ति । Flexbox इत्यस्य अर्थः अस्ति यत् अस्माकं समीपे व्यक्तिगतस्तम्भान् परिवर्तयितुं पङ्क्तिस्तरस्य स्तम्भसमूहान् परिवर्तयितुं च विकल्पाः सन्ति | स्तम्भाः कथं वर्धन्ते, संकुचन्ति, अन्यथा वा परिवर्तन्ते इति भवन्तः चिन्वन्ति ।
जालविन्यासस्य निर्माणकाले सर्वा सामग्री स्तम्भेषु गच्छति । Bootstrap इत्यस्य जालस्य पदानुक्रमः पात्रात् पङ्क्तितः स्तम्भे भवतः सामग्रीं प्रति गच्छति । दुर्लभेषु अवसरेषु भवन्तः सामग्रीं स्तम्भं च संयोजयितुं शक्नुवन्ति, परन्तु अवगताः भवन्तु यत् अनभिप्रेताः परिणामाः भवितुम् अर्हन्ति ।
बूटस्ट्रैप् इत्यत्र द्रुत, प्रतिक्रियाशीलविन्यासस्य निर्माणार्थं पूर्वनिर्धारितवर्गाः समाविष्टाः सन्ति । प्रत्येकं जालस्तरस्य षट् ब्रेकपॉइण्ट्स् एकदर्जनस्तम्भाः च सन्ति, अस्माकं कृते भवतः इष्टविन्यासानां निर्माणार्थं पूर्वमेव दशकशः वर्गाः निर्मिताः सन्ति । इदं Sass मार्गेण निष्क्रियं कर्तुं शक्यते यदि भवान् इच्छति।

संरेखणम्

स्तम्भान् लम्बवत् क्षैतिजरूपेण च संरेखयितुं flexbox alignment utilities इत्यस्य उपयोगं कुर्वन्तु ।

ऊर्ध्वाधर संरेखण

त्रयाणां स्तम्भानां एकः

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

त्रयाणां स्तम्भानां एकः

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

क्षैतिज संरेखण

द्वयोः स्तम्भयोः एकः

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <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 class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

स्तम्भ लपेटना

यदि एकस्याः पङ्क्तौ १२ तः अधिकाः स्तम्भाः स्थापिताः सन्ति तर्हि अतिरिक्तस्तम्भानां प्रत्येकं समूहः एकैकरूपेण नूतनरेखायां वेष्टयिष्यति ।

.कोल-९

.col-4
9 + 4 = 13 > 12 इति कारणतः अयं 4-स्तम्भ-विस्तारः दिवः एकः सङ्गत-एककरूपेण नूतनायां रेखायां वेष्टितः भवति ।

.col-6
तदनन्तरं स्तम्भाः नूतनपङ्क्तौ निरन्तरं भवन्ति ।

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

स्तम्भ भङ्गः भवति

flexbox मध्ये नूतनपङ्क्तौ स्तम्भान् भङ्गयितुं लघुहैकस्य आवश्यकता भवति: width: 100%यत्र यत्र भवन्तः नूतनपङ्क्तौ स्वस्तम्भान् वेष्टयितुम् इच्छन्ति तत्र सह एकं तत्त्वं योजयन्तु। सामान्यतया एतत् बहुभिः .rows इत्यनेन सह सिद्धं भवति, परन्तु प्रत्येकं कार्यान्वयनविधिः एतस्य लेखा न कर्तुं शक्नोति ।

.कोल-६ .कोल-स्म-३

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

अस्माकं प्रतिक्रियाशीलप्रदर्शनप्रयोगितायाः सह विशिष्टविरामस्थानेषु अपि भवान् एतत् विरामं प्रयोक्तुं शक्नोति |

.कोल-६ .कोल-स्म-४

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

पुनर्क्रमणम्

कक्षाः आदेशयन्तु

भवतः सामग्रीयाः दृश्यक्रमस्य.order- नियन्त्रणार्थं वर्गाणां उपयोगं कुर्वन्तु । एते वर्गाः प्रतिक्रियाशीलाः सन्ति, अतः भवान् by breakpoint (eg, ) सेट् कर्तुं शक्नोति । षट् जालस्तरयोः मध्ये माध्यमेन समर्थनं समावेशयति ।order.order-1.order-md-215

प्रथमं DOM मध्ये कोऽपि आदेशः न प्रयुक्तः

द्वितीयं DOM मध्ये, बृहत्तरेण क्रमेण सह

DOM इत्यत्र तृतीयः, १ क्रमेण

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

तत्र प्रतिक्रियाशीलाः .order-firstतथा वर्गाः अपि सन्ति ये क्रमशः तथा , प्रयोक्तुं कस्यचित् तत्त्वस्य .order-lastपरिवर्तनं कुर्वन्ति । एतेषां वर्गानां आवश्यकतानुसारं संख्यायुक्तवर्गैः सह अपि अन्तरमिश्रणं कर्तुं शक्यते ।orderorder: -1order: 6.order-*

प्रथमं DOM मध्ये, अन्तिमम् आदेशितम्

DOM मध्ये द्वितीयम्, अक्रमितम्

DOM मध्ये तृतीयः, प्रथमं आदेशितः

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

स्तम्भों को ऑफसेट करना

भवान् जालस्तम्भान् द्वयोः प्रकारयोः आफ्सेट् कर्तुं शक्नोति: अस्माकं प्रतिक्रियाशीलजालवर्गाः .offset-अस्माकं मार्जिन उपयोगिता च . ग्रिड् वर्गाः स्तम्भानां मेलार्थं आकारिताः भवन्ति यदा तु मार्जिन्स् द्रुतविन्यासानां कृते अधिकं उपयोगिनो भवन्ति यत्र ऑफसेट् इत्यस्य विस्तारः परिवर्तनशीलः भवति ।

ऑफसेट वर्ग

.offset-md-*क्लास् इत्यस्य उपयोगेन स्तम्भान् दक्षिणदिशि चालयन्तु । एते वर्गाः स्तम्भस्य वाममार्जिनं *स्तम्भैः वर्धयन्ति । यथा - चतुर्णां स्तम्भानां उपरि .offset-md-4गच्छति ।.col-md-4

.कोल-मद्-४

.कोल-मद्-४ .ऑफसेट्-मद्-४

.कोल-मद्-३ .ऑफसेट्-मद्-३

.कोल-मद्-६ .ऑफसेट्-मद्-३

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

प्रतिक्रियाशील-विच्छेद-बिन्दुषु स्तम्भ-समाशोधनस्य अतिरिक्तं, भवद्भिः आफ्सेट्-पुनः सेट्-करणस्य आवश्यकता भवितुमर्हति । एतत् जाल उदाहरणे क्रियायां पश्यन्तु .

.कोल-स्म-५ .कोल-मद्-६

.कोल-स्म-५ .ऑफसेट-स्म-२ .कोल-मड-६ .ऑफसेट-मड-०

.कोल-स्म-६ .कोल-मद्-५ .कोल-लग-६

.कोल-स्म-६ .कोल-मड-५ .ऑफसेट-मड-२ .कोल-लग-६ .ऑफसेट-लग-०

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

मार्जिन उपयोगिताएँ

v4 मध्ये flexbox मध्ये गमनेन सह, भवान् margin utilities इत्यस्य उपयोगं कर्तुं शक्नोति यथा .me-autosibling columns इत्येतत् परस्परं दूरं कर्तुं बाध्यते ।

.कोल-मद्-४

.कोल-मद्-४ .म्स-स्वतः

.कोल-मद्-३ .म्स-मद्-स्वतः

.कोल-स्वतः .मे-स्वतः

.कोल-स्वतः

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

स्वतन्त्रस्तम्भवर्गाः

एकस्य तत्त्वस्य विशिष्टविस्तारं दातुं a इत्यस्य .col-*बहिः अपि वर्गाणां उपयोगः कर्तुं शक्यते । .rowयदा कदापि स्तम्भवर्गाः पङ्क्तिस्य अप्रत्यक्षसन्ततिरूपेण उपयुज्यन्ते तदा गद्दीनां लोपः भवति ।

.col-3: 25% की चौड़ाई .

.col-sm-9: sm ब्रेकपॉइंट से ऊपर 75% की चौड़ाई

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

प्रतिक्रियाशीलप्लवकप्रतिमाः निर्मातुं उपयोगिताभिः सह वर्गाणां उपयोगः कर्तुं शक्यते । .clearfixयदि पाठः लघुः अस्ति तर्हि प्लवकं स्वच्छं कर्तुं सामग्रीं आवरणेन अवश्यं वेष्टयन्तु ।

स्थानधारकपाठस्य एकः अनुच्छेदः । वयम् अत्र clearfix वर्गस्य उपयोगं दर्शयितुं तस्य उपयोगं कुर्मः । अत्र स्तम्भाः प्लवितप्रतिबिम्बेन सह कथं अन्तरक्रियां कुर्वन्ति इति दर्शयितुं वयम् अत्र कानिचन निरर्थकवाक्यानि योजयामः ।

यथा भवन्तः पश्यन्ति अनुच्छेदाः प्लवितं प्रतिबिम्बं ललिततया वेष्टयन्ति। अधुना कल्पयतु यत् एतत् अत्र किञ्चित् वास्तविकसामग्रीभिः सह कथं दृश्यते, न तु केवलं एतत् नीरसस्थानधारकपाठं यत् अग्रे गच्छति, परन्तु वास्तवतः अत्र कोऽपि मूर्तसूचना न प्रसारयति केवलं स्थानं गृह्णाति, तत् वस्तुतः पठनीयं न भवति।

तथापि, अत्र भवान् अस्ति, अद्यापि अस्य स्थानधारकपाठस्य पठने धैर्यं धारयति, किञ्चित् अधिकान् अन्वेषणानाम् आशां कुर्वन्, अथवा सामग्रीयाः किञ्चित् गुप्तं ईस्टर-अण्डम्। एकः हास्यः, सम्भवतः। दुर्भाग्येन अत्र तत् किमपि नास्ति।

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>