twitter-bootstrap
बूटस्ट्रैप 4 की ओर पलायन

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

परिचय

बूटस्ट्रैप 4 एक प्रमुख पुनर्लेखन है और बूटस्टैप 3 से अपग्रेड करते समय जागरूक होने के लिए कई बदलाव हैं। यहां बूटस्ट्रैप 3.x कोड को बूटस्ट्रैप 4.x पर माइग्रेट करने के वर्ग नाम परिवर्तन, सुझाव और उदाहरण दिए गए हैं।

टिप्पणियों

यह सिर्फ एक छोटा सा उदाहरण अधिक विस्तृत उदाहरणों का पालन किया जाना है।

बूटस्ट्रैप 4 में ग्रिड सिस्टम के कॉलम लेआउट में बदलाव

पहला कोड ब्लॉक बूटस्ट्रैप 3 में लिखा गया है। बूटस्ट्रैप 3 में कॉलम स्पेसिफिकेशन्स के 4 प्रकार हैं, जैसे कि col-md-* col-lg-* col-sm-* col-xs-* । पूरी तरह उत्तरदायी लेआउट बूटस्ट्रैप 3 में इस तरह दिखेगा:

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

बूटस्ट्रैप 4 में, उन्होंने अधिक दानेदार नियंत्रण के लिए 768px से नीचे एक नया sm ग्रिड टीयर जोड़ा है। तो Bootstrap 4 में col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* । तो जो पहले v3 में .col-md-6 हुआ करता था, अब v4 में .col-lg-6 है। ध्यान दें कि -xs infix को हटा दिया गया है .col-6 अतिरिक्त छोटे (डिफ़ॉल्ट) ब्रेकपॉइंट पर 6 कॉलम इकाइयों का प्रतिनिधित्व करता है।

इसलिए, यदि हम अब बूटस्ट्रैप 4 में एक ही उपरोक्त उदाहरण लिखना चाहते हैं, तो यह इस तरह दिखेगा:

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>

ग्रिड लेआउट बूटस्ट्रैप 4

ब्राउज़र समर्थन परिवर्तन

ट्विटर-बूटस्ट्रैप 4 में IE8, IE9, and iOS 6 लिए समर्थन छोड़ दिया गया है। v4 अब केवल IE10+ and iOS 7+ । उन में से किसी एक की आवश्यकता वाली साइटों के लिए, v3 का उपयोग करें।

ट्विटर-बूटस्ट्रैप 4 में Android v5.0 Lollipop's Browser and WebView लिए आधिकारिक समर्थन जोड़ा गया है। Android ब्राउज़र और WebView के पहले के संस्करण केवल unofficially supported ।

Affix वर्ग हटाने

Affix को बूटस्ट्रैप 4 से हटा दिया गया है।

एक position: sticky का उपयोग करने की सिफारिश की जाती है position: sticky इसके बजाय position: sticky पॉलीफिल।

यदि आप अतिरिक्त, गैर-स्थिति शैलियों को लागू करने के लिए एफिक्स का उपयोग कर रहे हैं, तो पॉलीफिल आपके उपयोग के मामले का समर्थन नहीं कर सकते हैं। इस तरह के उपयोगों के लिए एक विकल्प थर्ड-पार्टी स्क्रॉलपोस-स्टाइलर लाइब्रेरी है।

बूटस्ट्रैप डॉक्यूमेंटेशन के अनुसार

Affix jQuery प्लगइन को गिरा दिया। हम एक स्थिति का उपयोग करने की सलाह देते हैं: इसके बजाय चिपचिपा पॉलीफिल। विवरण और विशिष्ट पॉलीफ़िल सिफारिशों के लिए कृपया एचटीएमएल 5 देखें।
यदि आप अतिरिक्त, गैर-स्थिति शैलियों को लागू करने के लिए एफिक्स का उपयोग कर रहे हैं, तो पॉलीफिल आपके उपयोग के मामले का समर्थन नहीं कर सकते हैं। इस तरह के उपयोगों के लिए एक विकल्प थर्ड-पार्टी स्क्रॉलपोस-स्टाइलर लाइब्रेरी है।

यदि कोई व्यक्ति Bootstrap v3 से Bootstrap v4 , तो फॉलबैक दृष्टिकोण नीचे दिया गया है -

एचटीएमएल

<header>
    
</header>
<nav class="navbar navbar-light bg-faded" data-toggle="affix">
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        ☰
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="Preview">
                    <a class="dropdown-item" href="">Logout</a>

                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="main">
    <h2>Hello Bootstrap 4.</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-9">
            <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore
                PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg
                sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>

सीएसएस

header {
height: 220px;
background: #ccc;
}

JAVASCRIPT

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {
  
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
    
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
      
  };
  

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
    
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
    
    // init
    toggleAffix(ele, $(window), wrapper);
  });
  
});

बूटस्ट्रैप 4 नवबर

नया बूटस्ट्रैप 4 नवबार कंपोनेंट में सुधार किया गया है क्योंकि यह बूटस्ट्रैप 3.x पूर्ववर्ती है। बूटस्ट्रैप 4 में, नवबार डिफ़ॉल्ट रूप से उत्तरदायी है और फ्लेक्सबॉक्स का उपयोग करके नवबार सामग्री के संरेखण को बहुत आसान बना देता है। नवाब ब्रेकपॉइंट को बदलने के लिए नए नवबार navbar-toggleable-* वर्गों का उपयोग करना भी एक सरल मामला है। अब नवबार के 6 ब्रेकपॉइंट आकार या "स्टेट्स" हैं ताकि आप आसानी से निम्नलिखित नवबार विकल्पों में से एक रख सकें।

नवबर कभी भी ऊर्ध्वाधर मोबाइल दृश्य में नहीं गिरता है, और हमेशा क्षैतिज होता है।
नवबार हमेशा ऊर्ध्वाधर दृश्य में ढह जाता है, और हैमबर्गर के माध्यम से टॉगल किया जाता है।
4 उत्तरदायी ब्रेकप्वाइंट में से एक में नवबार ऊर्ध्वाधर दृश्य में ढह जाता है।

बेसिक बूटस्ट्रैप 4 नवबर

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

जैसा कि आप देख सकते हैं कि navbar-header वर्ग के ऊपर के कोड को बूटस्ट्रैप 4 से हटा दिया गया है, और container-fluid को अब पूरी चौड़ाई के नवबार की आवश्यकता नहीं है।

नवबार ब्रेकपॉइंट बदलना

Navbar navbar-toggleable-md वर्ग 992px के मध्यम (md) ब्रेकपॉइंट पर ऊपर (और टॉगलर आइकन को दिखाने के लिए) ऊपर के नवबार को ढहता है। इसे एक अलग ब्रेकपॉइंट में बदलने के लिए, हमें बस इनमें से किसी एक के साथ navbar-toggleable-md को स्वैप करना होगा।

navbar-toggleable = xs चौड़ाई पर पतन <576px
navbar-toggleable-sm = sm चौड़ाई पर ढहना <768px
navbar-toggleable-lg = lg चौड़ाई पर पतन <1200px

बूटस्ट्रैप 4 ब्रेकपॉइंट नवबार डेमो

नवबार संरेखण को बदलना

फ्लेक्सबॉक्स हमें आसानी से नवबार और इसकी सामग्री (ब्रांड, लिंक, फॉर्म या पाठ) के संरेखण को बदलने में सक्षम बनाता है। डिफ़ॉल्ट नवबार सामग्री को संरेखित किया गया है। बेशक कई अन्य संरेखण परिदृश्य हैं ...

ब्रांड बाएं (डिफ़ॉल्ट), लिंक केंद्र और दाएं
ब्रांड केंद्र, बाएँ और दाएँ लिंक
ब्रांड बाएं और दाएं लिंक
ब्रांड, लिंक और चौड़ाई फार्म इनपुट भरें
कोई ब्रांड, लिंक केंद्र और अधिकार नहीं
ब्रांड बाएं, कंटेनर के अंदर दाएं लिंक
औचित्यपूर्ण लिंक (भरण चौड़ाई) केंद्रित

बूटस्ट्रैप 4 ब्रांडेड के साथ नवबार, और लेफ्ट / राइट लिंक

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

ब्रांड लेफ्ट, लिंक्स सेंटर और राइट के साथ बूटस्ट्रैप 4 नवबार

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

नवबार संरेखण प्रदर्शन: http://www.codeply.com/go/qhaBrcWp3v

बूटस्ट्रैप 4 नवबर पर अधिक

रंग, संरेखण या ऊंचाई को अनुकूलित करना

बूटस्ट्रैप 3 से बूटस्ट्रैप 4 सीएसएस परिवर्तन

चूंकि बूटस्ट्रैप 4 एक प्रमुख रीराइट है, इसलिए बूटस्ट्रैप 3.x वर्ग के कई नाम बदल दिए गए हैं या हटा दिए गए हैं। इस तरह के नेवबार के रूप में घटकों के पुनर्गठन, और नए सीएसएस वर्गों और flexbox समर्थन का मतलब है की शुरूआत कि 4.x के उन्नयन 3.x. से एक सरल रूपांतरण प्रक्रिया नहीं है

हालाँकि, कुछ बूटस्ट्रैप 3.x CSS वर्ग हैं जिनमें एक विशिष्ट बूटस्ट्रैप 4 प्रतिस्थापन है।

CSS क्लास का नाम / चयनकर्ता बूटस्ट्रैप 3.3.7 से 4 में परिवर्तन करता है (अल्फा 6)

{t} - एक स्तरीय या विराम बिंदु (यानी: sm, md, lg, आदि ..) का प्रतिनिधित्व करता है।
xs टियर डिफ़ॉल्ट है, और इसे निर्दिष्ट करने की आवश्यकता नहीं है: col-3 , col-6 , आदि।

{u} - एक कोला यूनिट आकार का प्रतिनिधित्व करता है (अर्थात: १-१२)

बूटस्ट्रैप 3.x	बूटस्ट्रैप ४
.col- {t} - {यू}	.col- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} -offset- {यू}	.offset- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} {-push- यू}	.push- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} {-pull- यू}	.pull- {t} - {u} ( `leave {t} blank for xs` )
.panel	.card
.panel-शीर्षक	.card हेडर
.panel-शीर्षक	.card-शीर्षक
.panel शरीर	.card-ब्लॉक
.panel-पाद लेख	.card-पाद लेख
.panel-प्राथमिक	.card-primary.card-विलोम
.panel-सफलता	.card-success.card-विलोम
.panel-जानकारी	.card-info.card-विलोम
.panel चेतावनी	.card-warning.card-विलोम
.panel-खतरा	.card-danger.card-विलोम
।कुंआ	.card.card-ब्लॉक
.thumbnail	.card.card-ब्लॉक
.लिस्ट-इनलाइन> ली	.list-इनलाइन आइटम
.dropdown-मेनू> ली	.dropdown-आइटम
.nav नवबार> ली	.nav-आइटम
.nav नेवबर> ली> ए	.nav-लिंक
.navbar-सही	.ml-ऑटो
.navbar-btn	.nav-आइटम
.navbar-फिक्स्ड-टॉप	.fixed टॉप
.nav-खड़ी	.flex-स्तंभ
.btn-डिफ़ॉल्ट	.btn माध्यमिक
.img संवेदनशील	.img-द्रव
.img सर्कल	.rounded सर्कल
।मैं जमीन पर ही हूँ	.rounded
.form-क्षैतिज	(हटा दिया)
हो.रेडियो	.form की जांच
.checkbox	.form की जांच
.input-एलजी	.form नियंत्रण-एलजी
.input-एस.एम.	.form नियंत्रण-एस.एम.
.control-लेबल	.form नियंत्रण लेबल
.table-सघन	.table-एस.एम.
.pagination> ली	.page-आइटम
.pagination> ली> ए	।पेज लिंक
.item	.carousel-आइटम
.text सहायता	.form नियंत्रण-प्रतिक्रिया
.pull-सही	।सही नाव
.pull-बाएँ	।बाईंओर तैरना
.center-ब्लॉक	.mx-ऑटो
.collapse.in	.collapse.show
.hidden-एस.एम.	.hidden-MD-नीचे
.hidden-md	.hidden-एलजी-डाउन
.hidden-XS	.hidden-XS-डाउन
.visible-XS	.hidden-SM-अप
.visible-एस.एम.	.hidden-XS-down.hidden-MD-अप
.visible-md	.hidden-SM-down.hidden-एलजी-अप
.visible-एलजी	.hidden-MD-down.hidden-XL-अप
.label	.badge
.badge	.badge.badge गोली

और देखें:
बूटस्ट्रैप 3.x से 4 माइग्रेशन टूल
बूटस्ट्रैप 4 में नया क्या है

बूटस्ट्रैप 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 में डिस्प्ले बर्तन होते हैं जिन्हें display:table लिए इस्तेमाल किया जा सकता है display:table , display:table-cell , display:inline , आदि। इनलाइन, इनलाइन-ब्लॉक या टेबल सेल तत्वों को संरेखित करने के लिए इन्हें वर्टिकल अलाइनमेंट बर्तनों के साथ इस्तेमाल किया जा सकता है।

<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>

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

बूटस्ट्रैप 4 केंद्र

किसी तत्व, स्तंभ या सामग्री को किसी स्तंभ के अंदर कैसे केंद्रित किया जाए, यह बूटस्ट्रैप 4 में अलग तरह से काम करता है।

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

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

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

केंद्र पाठ या इनलाइन तत्व: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

केंद्र display:block या display:flex : mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

ऑफ़सेट का उपयोग कर केंद्र स्तंभ: offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

कॉलम भी केंद्रित हो सकते हैं : mx-auto

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

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

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

बूटस्ट्रैप 4 (y- अक्ष) में ऊर्ध्वाधर केंद्र के लिए, डॉक्स को देखें: बूटस्ट्रैप 4 कार्यक्षेत्र संरेखित करें

बूटस्ट्रैप 4 कॉलम ऑर्डर

पुश पुल कक्षाओं का उपयोग करके बूटस्ट्रैप 3 में ऑर्डर (या स्थिति) बदलना संभव था। बूटस्ट्रैप 4 में, पुश पुल कक्षाएं अभी भी काम करती हैं, और इसके अलावा फ्लेक्सबॉक्स ऑर्डर का उपयोग किया जा सकता है।

बूटस्ट्रैप 4 में, पुश पुल क्लासेस अब push-{viewport}-{units} और pull-{viewport}-{units} और xs- को हटा दिया गया है। इस उदाहरण पर विचार करें जो स्तंभ क्रम को 1-3-2 लेआउट में बदलकर xs और sm :

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

बूटस्ट्रैप 4 पुश पुल डेमो

चूंकि नया संस्करण 4 फ्लेक्सबॉक्स है, इसलिए कॉलम का क्रम बदलने के लिए फ्लेक्सबॉक्स उपयोगिता वर्गों का उपयोग करने का एक और विकल्प है। अब पूरी चौड़ाई, 12 यूनिट col-*-12 कॉलम फ्लेक्सबॉक्स ऑर्डरिंग का उपयोग करके उलटा किया जा सकता है।

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

फ्लेक्सबॉक्स ऑर्डरिंग डेमो

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow