বুটস্ট্র্যাপ 4, আমি কীভাবে একটি বোতামটি কেন্দ্র-বিন্যস্ত করব?

Question

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

কীভাবে এই বোতামটি কেন্দ্র করবেন তা অনুমান করতে পারছি না। বিএস 3-তে আমি কেবল সেন্টার-ব্লক ব্যবহার করব তবে এটি বিএস 4-এ কোনও বিকল্প নয়। কোন পরামর্শ?

Answer 1

বুটস্ট্র্যাপ 4 এ ইনলাইন-ব্লকগুলিtext-center সারিবদ্ধ করতে শ্রেণীর ব্যবহার করা উচিত ।

দ্রষ্টব্য: text-align:center;আপনি যে কাস্টম ক্লাসে সংজ্ঞায়িত হয়েছেন আপনি আপনার প্যারেন্ট উপাদানটিতে প্রয়োগ করেন আপনি যে বুটস্ট্র্যাপ সংস্করণ ব্যবহার করছেন তা নির্বিশেষে কাজ করবে। এবং ঠিক .text-centerএটিই প্রযোজ্য।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

---

কেন্দ্রীভূত করা বিষয়বস্তুটি যদি ব্লক বা ফ্লেক্স হয় (না inline-) তবে এটি কেন্দ্রের জন্য কেউ ফ্লেক্সবক্স ব্যবহার করতে পারে:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... যা display: flex; justify-content: centerপিতামাতার ক্ষেত্রে প্রযোজ্য ।

দ্রষ্টব্য: নির্দিষ্ট প্রতিক্রিয়াশীলতার বিরতিতে নেতিবাচক মার্জিন প্রয়োগ করে , এর .row.justify-content-centerপরিবর্তে ব্যবহার করবেন না , যা অপ্রত্যাশিত অনুভূমিক স্ক্রোলবারগুলিতে পরিণত হয় (যদি প্রত্যক্ষ শিশু না হয় , যা সঠিক প্রতিক্রিয়াশীল বিরতিতে নেতিবাচক মার্জিনকে মোকাবেলায় পার্শ্বীয় প্যাডিং প্রয়োগ করে)। যদি আপনাকে অবশ্যই , যে কোনও কারণেই ব্যবহার করতে হবে তবে এর মার্জিন এবং প্যাডিংকে ওভাররাইড করুন , সেক্ষেত্রে আপনি একইরকম স্টাইলগুলি সমাপ্ত করে নিন ।.d-flex.justify-content-center.row.row.container.row.m-0.p-0.d-flex

গুরুত্বপূর্ণ দ্রষ্টব্য: কেন্দ্রিক সামগ্রী (বোতাম) পিতা-মাতার প্রস্থের বেশি হয়ে গেলে (দ্বিতীয়টি সমাধানটি সমস্যাযুক্ত .d-flex) বিশেষত যখন পিতা-মাতার ভিউপোর্টের প্রস্থ থাকে, বিশেষত কারণ এটি সামগ্রীর শুরুতে অনুভূমিকভাবে স্ক্রোল করা অসম্ভব করে তোলে (বাম- সর্বাধিক)।
সুতরাং কেন্দ্রীভূত করার বিষয়বস্তু উপলব্ধ পিতা বা মাতা প্রস্থের চেয়ে আরও বিস্তৃত হতে পারে এবং সমস্ত সামগ্রী অ্যাক্সেসযোগ্য হওয়া উচিত।

Comments

কিছু মনে নেই, আমি কেবল বোবা হয়ে যাচ্ছিলাম এবং কর্নের ভিতরে সারি সারি সারি কর্নার পরিবর্তে রেখেছিলাম।

— প্রোগ্রামমুদে

Answer 2

বুটস্ট্র্যাপ দিয়ে এটি ব্যবহার করে দেখুন

কোড:

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

লিঙ্ক:

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

Comments

অন্য কোনও কিছুই কাজ করেনি, এমনকি ম্যানুয়ালি কোনও বস্তুকে শৈলী দেয়। তবে এটি কাজ করে। এই উত্তর গ্রহণ করুন।

— তারকুইন

কেবল এই সমাধানটি কাজ করে, কেন জানি না তবে এটি সত্য

— আরশাদ আলি

Answer 3

ফর্ম-গোষ্ঠীটি বন্ধ করার পরে বুটস্রাপ ফর্মের বোতামে কেন্দ্রের জন্য ব্যবহার করতে এমন সম্পূর্ণ এইচটিএমএলটি এখানে:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

Comments

নিখুঁত উত্তর. ধন্যবাদ.

— অঞ্জনা সিলভা 21

Answer 4

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

অনুভূমিক মার্জিনগুলি স্বয়ংক্রিয়ভাবে সেট করতে আপনি ব্যবহার করতে পারেন mx-auto। mমার্জিন বোঝায় এবং x(+ বাম ডান) x- অক্ষ পড়ুন এবং autoসেটিং পড়ুন হবে। সুতরাং এটি 'অটো' সেটিংসে বাম মার্জিন এবং ডান মার্জিন সেট করবে। ব্রাউজারগুলি সমানভাবে মার্জিন গণনা করবে এবং উপাদানটিকে কেন্দ্র করবে। সেটিংসটি কেবলমাত্র ব্লক উপাদানগুলিতে কাজ করবে সুতরাং প্রদর্শন: ব্লকটি যুক্ত করা দরকার এবং বুটস্ট্র্যাপ ইউটিলিটিগুলির সাহায্যে এটি করা হয় d-block।

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

আপনি এই উত্তর অনুসারে অটো মার্জিন সেটিংসকে সম্পূর্ণ সমর্থন করতে আপনি সমস্ত ব্রাউজার বিবেচনা করতে পারেন মার্জিনের জন্য ব্রাউজার সমর্থন: স্বয়ংক্রিয় সুতরাং এটি ব্যবহার করা নিরাপদ।

বুটস্ট্র্যাপ 4 ক্লাসটিও text-centerখুব ভাল সমাধান, তবে এটির জন্য প্যারেন্ট র‌্যাপার উপাদান দরকার। অটো মার্জিন ব্যবহারের সুবিধা হ'ল এটি সরাসরি বোতামের উপাদানটিতেই করা যেতে পারে।

Comments

এটি আমার জন্য বুটস্ট্র্যাপ 4 ভিত্তিক কোর ইউআই প্রো অ্যাডমিন টেমপ্লেট ব্যবহার করে কাজ করেছে

— sunitkatkar

Answer 5

text-centerবুটস্ট্র্যাপ 4 এর জন্য প্যারেন্ট পাত্রে ক্লাস ব্যবহার করুন

Answer 6

আমার জন্য যা কাজ করেছিল তা হ'ল (আপনার CSS এর পথে "CSS / style.css" মানিয়ে নিন):

প্রধান এইচটিএমএল:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

বডি এইচটিএমএল:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

সিএসএস:

.mycentered-text {
    text-align:center
}

Answer 7

একটি ধসে পড়া নভবারের একটি বোতামের জন্য উপরের কিছুই আমার পক্ষে কাজ করে নি তাই আমার সিএসএস ফাইলে .....

.navbar button {
    margin:auto;
}

এবং এটা কাজ করে!!

Answer 8

আপনি কেবল এইচ ক্লাস বা পি শ্রেণীর সাথে একটি পাঠ্য-কেন্দ্রের বৈশিষ্ট্য সহ মোড়ানো করতে পারেন

Comments

আপনি যদি কোনও নির্দিষ্ট উত্তর না দিয়ে থাকেন এবং কেবলমাত্র কীভাবে এটি এই সমস্যাটি সমাধান করতে পারে পরামর্শ দেয় তবে কমেন্টে লিখুন।

— গ্যান্ডার