বুটস্ট্র্যাপ 4 এ একটি কলামের মধ্যে সামগ্রীটি কেন্দ্র করুন

Question

সমস্যাটি সমাধান করতে আমার সহায়তা দরকার, বুটস্ট্র্যাপ ৪-এ কলামের ভিতরে থাকা সামগ্রীটি আমার দরকার, নীচে আমার কোডটি সন্ধান করুন

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

Comments

ব্যবহার করতে পারেন class="text-center"।

— মিহাই আলেকজান্দ্রু-আয়নুত

আমি এটি ব্যবহার করার চেষ্টা করেছি তবে এটি বুটস্ট্র্যাপ 4-এর জন্য কাজ করছে না, পাঠ্যটি একা হয়েই কেন্দ্রিক হয়ে উঠছে তবে আমি "নোক-ইনফরমেশন-সংযোগগুলি" বর্গের সাথে ডিভিআলটি নিজেই কর্ন -৩ ডিভের সাথে সামঞ্জস্য করে রাখতে চাই।

— প্রবীণ কুমার

আমি ধারকটিকে কেন্দ্র করে রাখার প্রচলিত পদ্ধতিটি ব্যবহার করেছি au সীমান্ত-ব্যাসার্ধ au সীমানা-ব্যাসার্ধ au সীমানা: 1px কঠিন au নাক-কমলা; উচ্চতা: 100px; প্রস্থ: 100px; মার্জিন: 0 অটো; }

— প্রবীণ কুমার

Answer 1

বুটস্ট্র্যাপ 4 এ একাধিক অনুভূমিক কেন্দ্রিক পদ্ধতি রয়েছে ...

• text-centerকেন্দ্র display:inlineউপাদান জন্য
• offset-*বা কেন্দ্রের কলামেmx-auto ব্যবহার করা যেতে পারে ( )col-*
• বা, justify-content-centerউপর rowথেকে কেন্দ্র কলাম ( col-*)
• mx-autodisplay:blockভিতরে উপাদান কেন্দ্র করার জন্যd-flex

mx-auto(অটো এক্স-অক্ষ মার্জিন) কেন্দ্র display:blockবা display:flexএমন একটি উপাদান নির্ধারণ করবে যা একটি সংজ্ঞায়িত প্রস্থ, (%, vw, px, ইত্যাদি ..) থাকবে। ফ্লেক্সবক্স গ্রিড কলামগুলিতে ডিফল্টরূপে ব্যবহৃত হয়, তাই বিভিন্ন ফ্লেক্সবক্স কেন্দ্রিক পদ্ধতিও রয়েছে।

বুটস্ট্র্যাপ 4 কেন্দ্রিক পদ্ধতিগুলির ডেমো

আপনার ক্ষেত্রে, mx-autoকেন্দ্রকে কেন্দ্র করে col-3এবং text-centerএর বিষয়বস্তুকে কেন্দ্র করতে ব্যবহার করুন ..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

অথবা,justify-content-center ফ্লেক্সবক্স উপাদানগুলিতেব্যবহারকরে (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

আরও দেখুন:
বুটস্ট্র্যাপ 4 এ উল্লম্ব সারিবদ্ধ কেন্দ্র

Comments

ধন্যবাদ আমি উদাহরণ বা বুটস্ট্র্যাপ ডক্সের মধ্যে যা দেখতে পাচ্ছি তা হ'ল বিভিন্ন ব্রেকপয়েন্টে নন-ইনলাইন উপাদানগুলির অনুভূমিক কেন্দ্রীভূত। উদাহরণস্বরূপ, <select>এমডি এবং তারপরে একটি কেন্দ্রিক করা , তবে এমডির নীচে বামদিকে প্রান্তিককরণ।

— কায়াকিনকডার

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন তবে selectএটি প্রদর্শন: ব্লক, প্রদর্শন নয়: ইনলাইন কারণ form-controlপ্রদর্শন: ব্লক। অবশ্যই মূল প্রশ্নটি প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি ব্যবহার করার বিষয়ে নয় তাই উত্তরের কোনও ব্যাখ্যা দেওয়া হয়নি।

— জিম

Answer 2

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

আমরা চাইলে কলামের জন্য 'ফ্লেক্স' সক্ষম করুন এবং ন্যায়সঙ্গত-সামগ্রী-কেন্দ্র ব্যবহার করুন

Comments

এটি আমার জন্য কাজ করা একমাত্র সমাধান। ভাই! ধন্যবাদ;)

— আখিল

Answer 3

text-centerআপনার কলামে ক্লাস যুক্ত করুন :

<div class="col text-center">
I am centered
</div>

Answer 4

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

আমি ব্যবহার করেছি justify-content-centerপরিবর্তে বর্গ mx-autoহিসেবে এই উত্তর ।

এ পরীক্ষা https://jsfiddle.net/sarfarazk/4fsp4ywh/

Comments

এটি ইতিমধ্যে শীর্ষ-ভোট প্রাপ্ত উত্তরে

— াকা আছে

@ জিন-ফ্রানোয়ায়েস কার্বেট আমি এমএক্স-অটোর পরিবর্তে ন্যায়সঙ্গত-সামগ্রী-কেন্দ্র শ্রেণি ব্যবহার করেছি। এটি করার এটিও একটি পদ্ধতি। লোকেরা এটি ব্যবহার করতে পারে আমি অন্যকে সাহায্য করার চেষ্টা করছি। ধন্যবাদ

— সরফরাজ কাশমনি

আহ ঠিক. ঠিক আছে, কিছুটা ব্যাখ্যা অনেকদূর যেতে পারে।

— জিন-ফ্রান্সোইস কর্পেট

Answer 5

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Answer 6

2020: অনুরূপ ইস্যু

যদি আপনার কন্টেন্ট একটি হল বোতাম সেট যে কোনো পৃষ্ঠায় কেন্দ্র করতে চাই, তারপর তাদের মধ্যে মোড়ানো সারি এবং ব্যবহার ন্যায্যতা প্রতিপাদন করা-সামগ্রী কেন্দ্র।

নীচে নমুনা কোড:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>