বুটস্ট্র্যাপ কলামে সামগ্রী কীভাবে কেন্দ্র করবেন?

Question 1

আমি কলামের বিষয়বস্তু কেন্দ্র করার চেষ্টা করছি। দেখে মনে হচ্ছে না এটি আমার পক্ষে কাজ করে। এখানে আমার এইচটিএমএল:

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

জেএসফিডাল ডেমো

Question 2

ব্যবহার:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

পরিবর্তে

<div class="col-xs-1 center-block">

আপনি বুটস্ট্র্যাপ 3 সিএসএসও ব্যবহার করতে পারেন:

<!-- recommended method -->
<div class="col-xs-1 text-center">

বুটস্ট্র্যাপ 4 এ এখন ফ্লেক্স ক্লাস রয়েছে যা সামগ্রীকে কেন্দ্র করবে:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

নোট করুন যে ডিফল্টরূপে এটি না x-axisথাকলেই flex-directionহবেcolumn

Question 3

আমি জানি এই প্রশ্নটি পুরানো। এবং প্রশ্নটিতে বুটস্ট্র্যাপের কোন সংস্করণ তিনি ব্যবহার করছেন তা উল্লেখ করা হয়নি। সুতরাং আমি অনুমান করব যে এই প্রশ্নের উত্তরটি সমাধান হয়ে গেছে।

আপনারা কেউ (আমার মতো) যদি এই প্রশ্নটিতে হোঁচট খায় এবং বর্তমান (2019) বুটস্ট্র্যাপ কাঠামো ব্যবহার করে উত্তর খুঁজছেন, তবে সমাধানটি এখানে দেওয়া হয়েছে।

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

d-flex justify-content-centerআপনার কলাম ডিভ ব্যবহার করুন। এটি সেই কলামের ভিতরে সমস্ত কিছুকে কেন্দ্র করবে।

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

কলামের ভিতরে যদি আপনার কাছে পাঠ্য থাকে এবং আপনি সেটিকে কেন্দ্র করে সারিবদ্ধ করতে চান। শুধু text-centerএকই ক্লাসে যুক্ত করুন।

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

Question 4

বুটস্ট্র্যাপের নামকরণের কনভেনশনগুলি তাদের নিজস্ব স্টাইল বহন করে, কল-এক্সএস -১ একটি কলামকে বোঝায় যে উপাদানটি প্রশস্ত রয়েছে তার 8.33% রয়েছে .3 আপনার পাঠ্যটি সম্ভবত সুনির্দিষ্ট প্রস্থের ছাড়িয়ে প্রসারিত হবে এবং এর মধ্যে কেন্দ্রীভূত হতে পারে না। আপনি যদি এটি ডিভের দিকে সীমাবদ্ধ রাখতে চান, আপনি CSS শব্দ-বিরতির মতো কিছু ব্যবহার করতে পারেন।

পাঠ্যের বাইরেও প্রসারিত করার জন্য পর্যাপ্ত পরিমাণে উপাদানকে কেন্দ্র করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে।

বিকল্প 1: এইচটিএমএল সেন্টার ট্যাগ

<div class="row">
  <div class="col-xs-1 center-block">
    <center>
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </center>
  </div>
</div>

বিকল্প 2: সিএসএস পাঠ্য-সারিবদ্ধ করুন

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

আপনি যদি সবকিছু কলামের প্রস্থে সীমাবদ্ধ রাখতে চেয়েছিলেন

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

আপডেট - বুটস্ট্র্যাপের পাঠ্য-কেন্দ্র শ্রেণীর ব্যবহার

<div class="row">
  <div class="col-xs-1 center-block text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

ফ্লেক্সবক্স পদ্ধতি

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

Question 5

জিনিসগুলিকে জটিল করার দরকার নেই। বুটস্ট্র্যাপ 4 দিয়ে আপনি মার্জিন অটো ক্লাস ব্যবহার করে কোনও কলামের অভ্যন্তরে আইটেমগুলি আনুভূমিকভাবে প্রান্তিককরণ করতে পারেনmy-auto

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

Question 6

বুটস্ট্র্যাপ 4, অনুভূমিক এবং উল্লম্ব সারিবদ্ধ সামগ্রী ফ্লেক্স বাক্স ব্যবহার করে

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

বুটস্ট্র্যাপ শ্রেণিটি প্রান্তিককরণ-আইটেমস-কেন্দ্র এবং ন্যায়সঙ্গত-সামগ্রী-কেন্দ্র ব্যবহার করুন

.page-hero {
  height: 200px;
  background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="page-hero d-flex align-items-center justify-content-center">
  <h1>Some text </h1>
</div>

স্নিপেট প্রসারিত করুন

Question 7

text-centerপরিবর্তে ব্যবহার করুন center-block।

অথবা center-blockস্প্যান উপাদানটিতে ব্যবহার করুন (আমি কলামটি আরও প্রশস্ত করেছি যাতে আপনি সারিবদ্ধতা আরও ভাল দেখতে পারেন):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

Question 8

এটি একটি সহজ উপায়।

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

সংখ্যা 6 নিয়ন্ত্রণগুলি প্রস্থ কলামের।

Question 9

//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

Question 10

কল-এলজি -4 কল-এমডি -6 কল-এসএম -8 কল -11 এমএক্স-অটো

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center

Question 11

আপনি float:none; margin:auto;কলাম বিষয়বস্তু কেন্দ্রীভূত করতে স্টাইলিং যোগ করতে পারেন ।