বুটস্ট্র্যাপে ডিভের মধ্যে বাম সারিবদ্ধ এবং ডান সারিবদ্ধ করুন

268

কিছু পাঠ্য বামে প্রান্তিককরণের কিছু সাধারণ উপায় কী এবং বুটস্ট্র্যাপে একটি ডিভ ধারক মধ্যে কিছু অন্যান্য পাঠ্যকে ডান সারিবদ্ধ করতে পারে?

যেমন

Total cost                   $42

উপরে মোট ব্যয়টি সারিবদ্ধ পাঠ্য বাম হওয়া উচিত এবং $ 42 ডানদিকে প্রান্তিক পাঠ্য হবে

twitter-bootstrap user-interface bootstrap-4

— user462455
সূত্র

610

2018 আপডেট ...

বুটস্ট্র্যাপ 4.1+ +

pull-right এখন float-right
text-right 3.x এর সমান এবং ইনলাইন উপাদানগুলির জন্য কাজ করে
উভয় float-*এবং text-*হয় প্রতিক্রিয়াশীল বিভিন্ন প্রস্থ এ বিভিন্ন প্রান্তিককরণ জন্য (অর্থাৎ, float-sm-right)

justify-content-betweenপ্রান্তিককরণের জন্য ফ্লেক্সবক্সের ব্যবহারগুলি (যেমন :) ব্যবহার করা যেতে পারে:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

বা, যে ml-autoকোনও ফ্লেক্সবক্স ধারক (সারি, নাবার, কার্ড, ডি-ফ্লেক্স, ইত্যাদি ...) এ অটো-মার্জিন (যেমন :)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

বুটস্ট্র্যাপ 4 ডেমো
বুটস্ট্র্যাপ সারিবদ্ধ করুন 4 ডান সারিবদ্ধ উদাহরণ (ফ্লোট, ফ্লেক্সবক্স, পাঠ্য-ডান, ইত্যাদি ...)

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

pull-rightক্লাসটি ব্যবহার করুন ..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

বুটস্ট্র্যাপ 3 ডেমো

আপনি text-rightক্লাসটি এটির মতো ব্যবহার করতে পারেন :

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

বুটস্ট্র্যাপ 3 ডেমো 2

— জিম্বাবুয়ে
সূত্র

2

বুটস্ট্র্যাপ 3 এর জন্য, কলামের text-rightজন্য, আমার পক্ষে কাজ করেছিল।

— ফ্লোরিন ভার্ডোল

60

ব্যবহার করার পরিবর্তে pull-rightবর্গ, এটি ব্যবহার করার জন্য উত্তম text-right, কলামে বর্গ কারণ pull-rightকখনও কখনও সমস্যা সৃষ্টি পৃষ্ঠাটি মাপ।

— অরুণ আগরওয়াল
সূত্র

16

~~বুটস্ট্র্যাপ 4 এ সঠিক উত্তরটি text-xs-rightবর্গটি ব্যবহার করা ।~~

xsBS এর মধ্যে ক্ষুদ্রতম ভিউপোর্টের আকারকে চিহ্নিত করে কারণ এটি কাজ করে। আপনি যদি চাইতেন তবে ভিউপোর্টটি মাঝারি বা বড় হয়ে গেলেই আপনি প্রান্তিককরণ প্রয়োগ করতে পারেন text-md-right।

সর্বশেষ আলফাতে, text-xs-rightসরল করা হয়েছে text-right।

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

— এরিক বার্কুন-ড্রেভনিগ
সূত্র

11

বুটস্ট্র্যাপ ভি 4 ফ্লেক্সবক্স সমর্থন প্রবর্তন করে

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Https://v4-alpha.getbootstrap.com/utilities/flexbox/ এ আরও জানুন

— উইলিয়াম এন্টারিকেন
সূত্র

6

আমরা বুটস্ট্র্যাপ 4 ফ্লেক্সবক্স দ্বারা অর্জন করতে পারি:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

উদাহরণ: জেএসফিডাল

— প্রদীপ কুমার
সূত্র

1

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

কাজ ঠিক করা উচিত

— Terrymight
সূত্র