টুইটার বুটস্ট্র্যাপ 3 এ কীভাবে বোতামগুলি কেন্দ্র করবেন?

Question

আমি টুইটার বুটস্ট্র্যাপে একটি ফর্ম তৈরি করছি তবে ফর্মের ইনপুটটির নীচে বোতামটি কেন্দ্র করে নিয়ে আমার সমস্যা হচ্ছে। আমি ইতিমধ্যে center-blockক্লাসটি বোতামে প্রয়োগ করার চেষ্টা করেছি তবে এটি কার্যকর হয়নি। আমি কীভাবে এটি ঠিক করব?

এখানে আমার কোড।

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Answer 1

"পাঠ্য-কেন্দ্র" শ্রেণীর সাহায্যে বোতামটি ডিভের মধ্যে মুড়ে দিন।

শুধু এটি পরিবর্তন করুন:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

এটি:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

সম্পাদন করা

এর মতো BootstrapV4 , center-blockবাদ পড়ে # 19102 পক্ষেm-*-auto

Comments

এমনকি ফাউন্ডেশনের সাথেও কাজ করে)

— splitByZero 30'17

Answer 2

টুইটার বুটস্ট্র্যাপ ডকুমেন্টেশন অনুসারে: http://getbootstrap.com/css/#helper-class-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

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

উপরের কোডটির উদাহরণ এখানে দেখুন: https://jsfiddle.net/Seany84/2j9pxt1z/

Answer 3

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Comments

এটি আমার জন্য কাজ করেছে। আমি উপরের অন্যদের চেষ্টা করেছিলাম এবং এটি কেন্দ্র করে না।

— mjwrazor

কিভাবে একটি inputউপাদান সঙ্গে একই করতে ?

— ইনফজেরো

Answer 4

আপনার স্টাইল যুক্ত করুন:

প্রদর্শন: টেবিল; মার্জিন: 0 অটো;

Comments

আপনি কীভাবে এই সিদ্ধান্তে এসেছেন তা নিশ্চিত নন।

— ফার্গাস

Answer 5

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করে।

— আজান

Answer 6

আপনি মার্জিন দিয়ে বা একে একে একে একে একে একে ঠিক করতে পারেন।

উদাহরণ স্বরূপ

.button{
  margin:0px auto; //it will center them 
}

0 পিএক্স শীর্ষ এবং নীচ থেকে এবং অটো বাম এবং ডান হতে হবে।

Answer 7

আমি নিম্নলিখিত কোডটি চেষ্টা করেছিলাম এবং এটি আমার পক্ষে কাজ করে।

<button class="btn btn-default center-block" type="submit">Button</button>

বোতাম নিয়ন্ত্রণটি ডিভের মধ্যে রয়েছে এবং বুটস্ট্র্যাপের সেন্টার-ব্লক ক্লাস ব্যবহার করে আমাকে ডিভাইসের কেন্দ্রে বোতামটি সারিবদ্ধ করতে সহায়তা করেছে

লিঙ্কটি পরীক্ষা করুন যেখানে আপনি সেন্টার-ব্লক ক্লাসটি পাবেন

http://getbootstrap.com/css/#helper-classes-center

Answer 8

text-align: centerCSS সম্পত্তি ব্যবহার করুন

Answer 9

বুটস্ট্র্যাপ 4 এর জন্য আপডেট:

ফ্লেক্সবক্সের সুবিধা নিতে 'ডি-ফ্লেক্স' এবং 'ন্যায্যতা-বিষয়বস্তু-কেন্দ্র' ইউটিলিটি ক্লাসের সাথে ডিভ সেট দিয়ে বোতামটি মোড়ানো।

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

ফ্লেক্সবক্স ব্যবহারের সুবিধাটি একই অক্ষটিতে অতিরিক্ত উপাদান / বোতাম যুক্ত করতে সক্ষম হচ্ছে তবে তাদের নিজস্ব পৃথক সারিবদ্ধকরণ রয়েছে। এটি 'প্রান্তিককরণ-আইটেম-স্টার্ট / সেন্টার / শেষ' ক্লাসগুলির সাথেও উল্লম্ব প্রান্তিককরণের সম্ভাবনাটি উন্মুক্ত করে।

একে অপরের সাথে সারিবদ্ধ থাকার জন্য আপনি অন্য ডিভের সাথে লেবেল এবং বোতামটি মোড়ানো করতে পারেন।

যেমন https://codepen.io/anon/pen/BJoeRY?editors=1000

Answer 10

আপনি নিম্নলিখিত করতে পারেন। এটি ওভারল্যাপিং বোতামগুলি এড়িয়ে চলে।

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Answer 11

এটি কাজ করে আমাকে একটি স্বাধীন করার চেষ্টা জন্য <div>তারপর করা buttonযে মধ্যে। ঠিক এই রকম :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

তারপরে আপনার CSSস্টাইল পৃষ্ঠায় যান এবং এটির Text-align:centerমতো করুন:

#contactBtn{text-align: center;}

Answer 12

বুটস্ট্র্যাপ 3 এর জন্য

আমরা কলামগুলির সাথে স্থানটি বিভক্ত করি, আমরা 8 টি ছোট কলাম (কল-এক্সএস -8) ব্যবহার করি, আমরা 4 টি খালি কলাম (কল-এক্সএস-অফসেট -4) রেখে আমরা সম্পত্তি প্রয়োগ করি (কেন্দ্র-ব্লক)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

বুটস্ট্র্যাপ 4 এর জন্য

আমরা স্পেসিং ব্যবহার করি, বুটস্ট্র্যাপে কোনও উপাদানের উপস্থিতি পরিবর্তন করতে সংক্ষিপ্ত এবং প্যাডযুক্ত প্রতিক্রিয়া মার্জিন ইউটিলিটি ক্লাসের বিস্তৃত পরিমাণ অন্তর্ভুক্ত। ক্লাসগুলির নাম s সম্পত্তি} {পক্ষগুলি the - xs এর জন্য {আকার} এবং} সম্পত্তি} {পক্ষগুলি} - {ব্রেকপয়েন্ট sm - {আকার sm এসএম, এমডি, এলজি এবং এক্সএল ব্যবহার করে নামকরণ করা হয়েছে।

আরও তথ্য এখানে: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Comments

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

— স্টিফান ক্রেইন

Answer 13

আমার এই সমস্যা ছিল আমি ব্যবহার করতাম

<div class = "col-xs-8 text-center">

আমার ডিভিতে কয়েকটি এইচ 3 লাইন, একটি দম্পতি এইচ 4 লাইন এবং একটি বুটস্ট্র্যাপ বোতাম রয়েছে। আমি পাঠ্য-কেন্দ্র ব্যবহার করার পরে বোতামের পাশের সমস্ত কিছু কেন্দ্রে ঝাঁপিয়ে পড়েছে তাই আমি আমার সিএসএস শীটে ওভাররাইডিং বুটস্ট্র্যাপে গিয়ে বোতামটি একটি দিয়েছি

margin: auto;

যা সমস্যার সমাধান করেছে বলে মনে হচ্ছে।

Answer 14

বা বুটস্ট্র্যাপ গ্রিড সিস্টেমের সাহায্যে আপনি যেখানে চান সেখানে বোতামের অবস্থান তৈরি করতে নির্দিষ্ট অফসেট দিতে পারেন,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

এইভাবে, আপনি যদি বিটিএন-ব্লক সেট করেন তবে আপনাকে বোতামের আকারও নির্দিষ্ট করতে দিন। নিশ্চিত, এটি কেবল এমডি আকারের পরিসীমা কাজ করবে, আপনি যদি অন্যান্য আকারও সেট করতে চান তবে এক্স, এসএম, এলজি ব্যবহার করুন।