আপনি কীভাবে টুইটার বুটস্ট্র্যাপ ব্যবহার করে কেন্দ্রিক সামগ্রী পাবেন?

Question

আমি একটি খুব প্রাথমিক উদাহরণ অনুসরণ করার চেষ্টা করছি। স্টার্টার পৃষ্ঠা এবং গ্রিড সিস্টেম ব্যবহার করে , আমি নিম্নলিখিতগুলি আশা করছি:

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

... কেন্দ্রিক পাঠ্য উত্পন্ন করবে।

তবে এটি এখনও বাম দিকে প্রদর্শিত হয়। আমি কি ভুল করছি?

Comments

আপনি কি '<ডি ক্লাস = "স্প্যান 12">' কেন্দ্রিকের ভিতরে থাকা পাঠ্যটি চান বা ব্রাউজার উইন্ডোতে কেন্দ্রিক পুরো '<div class = "قطار">' ডিভটি চান?

— NerdFury

টুইটার.github.com/bootstrap/scaffolding.html#gridSystem-

— আমল এম কুলকার্নি

@ ক্লোয়ে লোকেরা যারা এইচটিএমএল সামঞ্জস্যের বিষয়ে চিন্তা করেন। ঘটনাক্রমে বুটস্ট্র্যাপ শ্রেণীর মোড়কে ঠিক এমনটিই করা হয় যার <center>পক্ষে প্রত্যাখ্যান করা text-align: centerহয় .text-center।

— jmoss

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করছেন তবে দেখুন: stackoverflow.com/questions/42388989/…

— জিম

Answer 1

এটি পাঠ্য কেন্দ্রিককরণের জন্য ( যা ছিল প্রশ্নটি যা ছিল )

অন্যান্য ধরণের সামগ্রীর জন্য, ফ্ল্যাভিনের উত্তর দেখুন ।

আপডেট: বুটস্ট্র্যাপ ২.৩.০+ উত্তর

আসল উত্তরটি বুটস্ট্র্যাপের প্রাথমিক সংস্করণের জন্য ছিল। বুটস্ট্র্যাপ ২.৩.০ হিসাবে, আপনি কেবল.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প্রান্তিককরণ হতে চলেছে ।

— স্কটস

২.৩.০ প্রাকের .pagination-centeredজন্যও এটি কাজ করে: পি আপনাকে অন্য ক্লাস যুক্ত করার কীস্ট্রোকটি সংরক্ষণ করে।

— সরিম

@ সরিম: আসলে, pagination-centeredআপনার এইচটিএমএলে আরও একটি ক্লাস যুক্ত করা দরকার। আমার প্রাক-২.৩.০ উত্তরের জন্য কেবল একটি শ্রেণীর সম্পত্তি সংজ্ঞাটি ইতিমধ্যে প্রসারিত করতে হবে। এছাড়াও, আপনি যদি উত্তরটি ব্যবহার করে মন্তব্যগুলি ব্যবহার করে দেখে থাকেন তবে আপনি pagination-centeredকিছু সম্পর্কিত আপত্তি এবং সতর্কতা দেখতে পাবেন। তবে এটি যদি আপনার ক্ষেত্রে কার্যকর হয় - এটিতে যান! :-)

— স্কটএস

Answer 2

দ্রষ্টব্য: এটি বুটস্ট্র্যাপ 3-এ সরানো হয়েছে ।

---

প্রাক বুটস্ট্র্যাপ 3, আপনি pagination-centeredএই জাতীয় CSS শ্রেণি ব্যবহার করতে পারেন :

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

ক্লাসটি pagination-centeredইতিমধ্যে বুটস্ট্র্যাপ সিএসএসে রয়েছে (বা বুটস্ট্র্যাপ.মিনি.সিএস) এবং এর একটিমাত্র নিয়ম রয়েছে:

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

সঙ্গে বুটস্ট্র্যাপ 2.3.0। শুধু ক্লাস ব্যবহার করুনtext-center

Comments

আমি এটিকে পৃষ্ঠপোষকতার (শ্রেণীর নাম থেকে অনুমান হিসাবে) খুব নির্দিষ্ট হিসাবে ব্যবহার করার পরামর্শ দেব না। আপনি পৃষ্ঠাবদ্ধকরণে প্রয়োগ করেন এমন স্টাইলগুলির সাথে এটি সংঘর্ষ হতে পারে এবং বুটস্ট্র্যাপ সিদ্ধান্ত নেয় যে এই শ্রেণিকে কেন্দ্রিক পৃষ্ঠাবদ্ধতার জন্য আরও কিছু করা দরকার।

— ডেসসন

@ lurii.k এটি বাচ্চাদের সহ সবকিছুকে কেন্দ্রিক করে তুলেছে। আমরা কী কেবল বাহ্যিক ধারক সারিবদ্ধ করতে চাই তবে এর ভিতরে থাকা সমস্ত কিছু বামদিকে সারিবদ্ধ করা আছে?

— gatzkerob

বুটস্ট্র্যাপ ২.৩.০ সহ। স্রেফ CSS ক্লাস। টেক্সট-সেন্টার ব্যবহার করুন

— আইউরি.কি

এখন পর্যন্ত দুর্দান্ত উত্তর! বুটস্ট্র্যাপ

— ২.৩.২

এটি প্রদর্শিত হয় যে বুটস্ট্র্যাপ 3.0.0 এই শ্রেণীটি সরিয়ে নিয়েছে। .text-centerপিতামাতার উপর ব্যবহার করা এই সংস্করণটির সঠিক সমাধান।

— ব্লেজমোনজার 21

Answer 3

আমার ধারণা, এখানকার বেশিরভাগ লোকেরা কেবলমাত্র পুরোdiv পাঠ্য কেন্দ্রের দিকেই চলে এবং কেবল পাঠ্য সামগ্রীই নয় (যা তুচ্ছ ...)।

এইচটিএমএলে জিনিসগুলি কেন্দ্র করার জন্য দ্বিতীয় উপায় (পাঠ্য-বিন্যাস: কেন্দ্রের পরিবর্তে) একটি নির্দিষ্ট প্রস্থ এবং অটো মার্জিন (বাম এবং ডান) সহ একটি উপাদান থাকা। বুটস্ট্র্যাপের সাহায্যে, স্টোরটি সংজ্ঞায়িত অটো মার্জিনগুলি হল "ধারক" শ্রেণি।

<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

@ ক্লেম্যাক্স আপনার লিঙ্কটি নষ্ট হয়ে গেছে বলে মনে হচ্ছে, আপনি এটি ২.৩.২ এর

— ক্রিস

@ সেবাস্তালোনসো আমি কেবল অবহেলিত নির্ভরতা স্থির করেছি, সমস্যাটি প্রতিবেদন করার জন্য আপনাকে ধন্যবাদ

— ফ্লাভিয়েন ভলকেন

আপনি কোনও কলামটি কেন্দ্র করতে চাইলে এটি কাজ করবে না। গ্রিড কলাম কেন্দ্র করতে, ব্যবহার করুন col-*offset-*। উদাহরণস্বরূপ <div class="col-10 offset-1">বা<div class="col-8 offset-2">

— sgon00

Answer 4

2019 আপডেট করুন - বুটস্ট্র্যাপ 4

"কেন্দ্রীভূত সামগ্রী" বলতে অনেকগুলি ভিন্ন জিনিস বোঝাতে পারে এবং বুটস্ট্র্যাপ কেন্দ্রীকরণ মূল পোস্টের পরে থেকেই অনেক পরিবর্তন হয়েছে।

অনুভূমিক কেন্দ্র

বুটস্ট্র্যাপ 3

• text-centerdisplay:inlineউপাদান জন্য ব্যবহৃত হয়
• center-blockকেন্দ্র display:blockউপাদান
• col-*offset-* গ্রিড কলাম কেন্দ্র করতে
• দেখতে এই উত্তর NavBar কেন্দ্রে

ডেমো বুটস্ট্র্যাপ 3 অনুভূমিক কেন্দ্রিকরণ

বুটস্ট্র্যাপ 4

• 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 হয় flexbox ডিফল্টরূপে সেখানে ব্যবহার উল্লম্ব প্রান্তিককরণ করার বিভিন্ন পন্থা রয়েছে: স্বয়ংক্রিয় মার্জিন , flexbox utils , অথবা প্রদর্শনের utils সহ উল্লম্ব সারিবদ্ধ utils । প্রথমে "উল্লম্ব সারিবদ্ধ ব্যবহারগুলি" সুস্পষ্ট মনে হলেও এগুলি কেবল ইনলাইন এবং টেবিল প্রদর্শন উপাদানগুলির সাথে কাজ করে। এখানে কয়েকটি বুটস্ট্র্যাপ 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করুন ....rowcol-*

       <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

গ্রিড লেআউটটি ব্যবহার করার সময় আমি জানতে পেরেছিলাম যে কেবল নিম্নলিখিত সিএসএসের সংমিশ্রণটি অনুভূমিকভাবে এবং উল্লম্বভাবে একটি কলামের মধ্যে একটি ডিভ সারিবদ্ধ করবে যাতে কলামের সর্বাধিক উচ্চতাও একই সারির বৃহত্তম কলামটির সাথে মেলে। .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; }

— ব্যবহারকারী3188040

অনেক ধন্যবাদ. এটি আমার সমস্যা সমাধান করে।

— sgon00

আমি যদি পারতাম তবে প্রতিটি ডেমোকে তুলে ধরতাম। তারা মহৎ. :) অনেক ধন্যবাদ!

— পাস্কাল

Answer 5

বুটস্ট্র্যাপ ৩.১.১ এর .center-blockডিভিডগুলি কেন্দ্র করার জন্য একটি শ্রেণি রয়েছে । দেখুন: http://getbootstrap.com/css/#helper-class-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"আপনার সারি ডিভিতে বা অন্য কোনও শ্রেণিতে যুক্ত করতে পারেন যা আমি ভাবি।

Comments

এর মতো ইনলাইন শৈলী যুক্ত করা প্রায়শই খারাপ অভ্যাস হিসাবে বিবেচিত হয়

— স্পেনসার উইলিয়ামস

আমি সম্মত হই, এবং সে কারণেই আমি "বা অন্য কোনও শ্রেণি "ও

— বলেছিলাম

Answer 8

ফেব্রুয়ারী ২০১৩ পর্যন্ত, কিছু ক্ষেত্রে, আমি "স্প্যান" বিভাগে একটি "কেন্দ্রিক" শ্রেণি যুক্ত করছি:

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

এর কারণ হ'ল স্প্যান * ডিভের বাম দিকে ভাসমান এবং "অটো মার্জিন" কেন্দ্রিক কৌশলটি কেবলমাত্র ডিভিটি ভাসমান না হলে কাজ করে।

ডেমো (জেএসফিডেলে): http://jsfiddle.net/5RpSh/8/ebded/result/

জেএসফিডাল: http://jsfiddle.net/5RpSh/8/

Comments

এটি সেরা উত্তর কারণ এটি ডিভ কেন্দ্রিক এবং এটি এখনও প্রতিক্রিয়াশীল। এখানে ডেমোটির জন্য একটি বেহালতা রয়েছে। উত্তরের উত্তরটি কাজ করে না: jsfiddle.net/r7Qgn/6

— রাফি

Answer 9

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে এতে অন্তর্নির্মিত সিএসএস বর্গ রয়েছে । টেক্সট-সেন্টার নামে । তাহলে এটাই আপনি চান.

<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

না, এটি কেবল পাঠ্যের জন্যই কাজ, প্রশ্নটি মূল পাত্রে সম্পর্কে

— ড্রামার্টিন

"প্রশ্নটি মূল ধারক সম্পর্কে" আপনি কেন দাবি করছেন তা আমি দেখতে পাচ্ছি না (এবং স্বীকৃত উত্তর দেখুন)

— লিওনব্লাই

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এবং এর মতো একটি খারাপ উদাহরণ স্থাপন করে

— উইস্ক্রিপ্ট করা

পিচ্ছিল opeালু মন্তব্যের সাথে আমি একমত। আমি আরও যোগ করব যে টুইটার বুটস্ট্র্যাপের ব্যবহার নিজেই যুক্তিযুক্তভাবে পিচ্ছিল slাল।

— জেসন সোয়েট

Answer 12

আপনি যদি বুটস্ট্র্যাপ 2.0+ ব্যবহার করেন using

এটি পৃষ্ঠাকে কেন্দ্র করে ডিভ তৈরি করতে পারে।

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

Comments

এটি উপাদানকে কেন্দ্র করে না। এটি এলিমেন্টের উপরের বাম কোণটি 4 কলামে এগিয়ে রাখে। কেন্দ্রীকরণ অর্থ ধারকের উপাদানটির ঠিক মাঝখানে উপাদানটির সঠিক কেন্দ্র স্থাপন করা।

— ক্যাগাটায় কালান

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

বুটস্ট্র্যাপ সংস্করণ ৩.১.১ এবং তারপরের জন্য, বিষয়বস্তু কেন্দ্রিক করার জন্য সেরা বর্গ .center-blockহেল্পার ক্লাস।

Comments

হ্যাঁ এখন খুব থিম এবং ব্যবহারকারীরা ৩.১.১ এর চেয়ে বেশি বুটস্ট্র্যাপ সংস্করণ ব্যবহার করেন

— নিরাপদ 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

আকর্ষণীয় পদ্ধতির, তবে আমার নির্দিষ্ট ওয়েবফর্ম সিএসএসের জন্য, এটি একটি ভাল বিকল্প ছিল।

— JoshYates1980

Answer 18

কেন্দ্র-ব্লক একটি বিকল্প যা উপরের উত্তরে উল্লেখ করা হয়নি

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

সমস্ত ক্লাস center-block যাবতীয় উপাদানটিকে 0 টি অটোর মার্জিন রাখতে বলে, অটোটি বাম / ডান মার্জিন হয়। তবে, ক্লাস পাঠ্য-কেন্দ্র বা সিএসএস পাঠ্য-প্রান্তিককরণ না হওয়া পর্যন্ত: কেন্দ্র; পিতামাতার উপর সেট করা আছে, উপাদানটি এই অটো গণনাটি থেকে কাজ করার বিন্দুটি জানে না, সুতরাং এটি নিজেকে প্রত্যাশিত হিসাবে কেন্দ্র করবে না।

সুতরাং পাঠ্য কেন্দ্র একটি ভাল বিকল্প।

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

আমি দুটি উপায়ে চেষ্টা করেছি, এবং এটি ডিভটি কেন্দ্র করতে ভাল কাজ করেছে। দুটি উপায়ই সমস্ত স্ক্রিনে ডিভগুলি সারিবদ্ধ করবে।

উপায় 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/#horizontal- সেন্টারিং