টুইটার বুটস্ট্র্যাপ 3 ব্যবহার করে একটি কলাম কেন্দ্র করুন

1146

টুইটার বুটস্ট্র্যাপ 3-এ আমি কীভাবে ধারক (12 কলাম) এর মধ্যে একটি কলামের আকারের ডিভকে কেন্দ্র করব ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
স্নিপেট প্রসারিত করুন

আমি চাই একটি div, একটি ক্লাসের .centeredসাথে ধারকটির মধ্যে কেন্দ্রীভূত হোক। একাধিক divগুলি থাকলে আমি একটি সারি ব্যবহার করতে পারি , তবে আপাতত আমি কেবল divপাত্রে (12 টি কলাম) কেন্দ্রস্থলে একটি কলামের আকারের একটি চাই ।

আমিও নিশ্চিত নই যে উপরোক্ত পদ্ধতির divঅর্ধেক দ্বারা অফসেট করার অভিপ্রায় না হওয়ায় উদ্দেশ্য যথেষ্ট is অনুপাতে সঙ্কুচিত divসামগ্রীগুলির বাইরে আমার ফাঁকা স্থানের দরকার নেই div। আমি ডিভের বাইরে ফাঁকা স্থান সমানভাবে বিতরণ করতে চাই (ধারক প্রস্থটি একটি কলামের সমান হওয়া পর্যন্ত সঙ্কুচিত)।

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— BSR
সূত্র

উত্তর:

1963

<div>বুটস্ট্র্যাপ 3 এ একটি কলামকে কেন্দ্র করার জন্য দুটি পন্থা রয়েছে :

পন্থা 1 (অফসেট):

প্রথম অ্যাপ্রোচ বুটস্ট্র্যাপের নিজস্ব অফসেট ক্লাস ব্যবহার করে তাই এর জন্য মার্কআপের কোনও পরিবর্তন এবং অতিরিক্ত সিএসএসের প্রয়োজন নেই। কীটি হ'ল সারির অবশিষ্ট আকারের অর্ধের সমান অফসেট সেট করা । সুতরাং উদাহরণস্বরূপ, আকার 2 একটি কলাম একটি 5 অফসেট যোগ যে দ্বারা কেন্দ্রিক হবে (12-2)/2।

মার্কআপে এটির মতো দেখতে পাবেন:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

এখন, এই পদ্ধতির জন্য একটি সুস্পষ্ট ত্রুটি রয়েছে। এটা শুধুমাত্র এমনকি কলাম মাপ জন্য কাজ করে , তাই শুধুমাত্র .col-X-2, .col-X-4, col-X-6, col-X-8, এবং col-X-10সমর্থিত।

পদ্ধতির ২ (পুরানো margin:auto)

আপনি প্রমাণিত কৌশলটি ব্যবহার করে যে কোনও কলামের আকারকে কেন্দ্র করতে পারবেন margin: 0 auto;। আপনাকে কেবল বুটস্ট্র্যাপের গ্রিড সিস্টেম দ্বারা যোগ করা ভাসমানটির যত্ন নেওয়া দরকার। আমি নীচের মত একটি কাস্টম সিএসএস ক্লাস সংজ্ঞায়িত করার পরামর্শ দিচ্ছি:

.col-centered{
    float: none;
    margin: 0 auto;
}

এখন আপনি এটিকে যে কোনও পর্দার আকারে যে কোনও কলাম আকারে যুক্ত করতে পারেন এবং এটি বুটস্ট্র্যাপের প্রতিক্রিয়াশীল বিন্যাসের সাথে নির্বিঘ্নে কাজ করবে:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

দ্রষ্টব্য: উভয় কৌশল দিয়ে আপনি .rowউপাদানটি এড়িয়ে যেতে পারেন এবং কলামটি একটিতে .containerরেখেছিলেন তবে ধারক শ্রেণিতে প্যাডিংয়ের কারণে আপনি আসল কলামের আকারের মধ্যে একটি ন্যূনতম পার্থক্য লক্ষ্য করতে পারেন।

হালনাগাদ:

যেহেতু v3.0.1 বুটস্ট্র্যাপের একটি বিল্ট-ইন ক্লাস রয়েছে center-blockযা ব্যবহার করে margin: 0 autoতবে অনুপস্থিত float:none, আপনি গ্রিড সিস্টেমের সাথে এটি কাজ করতে আপনার সিএসএসে এটি যুক্ত করতে পারেন।

— koala_dev
সূত্র
1
আমি মনে করি যে কোনও ফ্লোট নেই: সেন্টার-ব্লকের নিয়মে কোনওটি নেই কারণ এমন একটি ক্লিয়ারফিক্স স্বাধীন নিয়ম রয়েছে যা আপনি ফ্লোট সাফ করার জন্য উপাদানগুলিতে যুক্ত করতে পারেন।
— দিয়েগো ফার্নান্দো মুরিলো ভ্যালেনসি
7
@ ডিগো ফার্নান্দো মরিলোভ্যালেনি .clearfixএই ক্ষেত্রে কাজ করবে না কারণ এটি উপাদানগুলির উপরের ভাসমান সম্পত্তি সরিয়ে দেয় না (যা ব্যবহারের কেন্দ্রস্থলে প্রয়োজন margin: 0 auto) এটি কেবল একটি পাত্রে অভ্যন্তরের কোনও ভাসমান উপাদানকে আবৃত করে তোলে
— কোয়ালা_দেব
4
এটি কোনও কলামে ব্যবহার করতে পারবেন না, কারণfloat:none;
— এয়ারটোনিক্স
2
আপনি যদি একক লাইনে আরও একটি কলামটি কেন্দ্রিয় করতে চান তবে এই উত্তরটি দেখুন stackoverflow.com/questions/28683329/…
— কনর স্বেসনসন
3
অফসেটের সিনট্যাক্সটি বুটস্ট্র্যাপ 4-এ পরিবর্তিত হয়েছে (সর্বশেষ সংস্করণ হিসাবে)। উদাহরণস্বরূপ এই প্রতিক্রিয়াটি ব্যবহার করে: বর্গ-কল-এমডি-অফসেট -5 এখন অফসেট-এমডি -5 হওয়া উচিত।
— lgants
296

কলামগুলি কেন্দ্র করার পছন্দের পদ্ধতিটি হ'ল "অফসেট" (যেমন col-md-offset-3:) ব্যবহার করা

বুটস্ট্র্যাপ 3.x কেন্দ্রিক উদাহরণ

জন্য উপাদান কেঁদ্রীকরণ , একটি হল center-block সাহায্যকারী বর্গ ।

আপনি কেন্দ্রে পাঠ্য (এবং ইনলাইন উপাদানগুলি) ব্যবহার text-centerকরতে পারেন ।

ডেমো : http://bootply.com/91632

সম্পাদনা - মন্তব্যে উল্লিখিত হিসাবে,center-blockকলামের বিষয়বস্তু এবংdisplay:blockউপাদানগুলিতে কাজ করে তবে কলামে নিজেই কাজ করবে না (col-*ডিভ) কারণ বুটস্ট্র্যাপ ব্যবহার করেfloat।

আপডেট 2018

এখন সঙ্গে বুটস্ট্র্যাপ 4 , কেঁদ্রীকরণ পদ্ধতি পরিবর্তিত হয়েছে ..

  • text-centerএখনও display:inlineউপাদান জন্য ব্যবহৃত হয়
  • mx-autocenter-blockকেন্দ্রের display:blockউপাদানগুলিতে প্রতিস্থাপন করে
  • offset-* বা mx-auto গ্রিড কলামগুলি কেন্দ্র করতে ব্যবহার করা যেতে পারে

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

ডেমো বুটস্ট্র্যাপ 4 অনুভূমিক কেন্দ্রিকরণ

বিএস 4 তে উল্লম্ব কেন্দ্রীকরণের জন্য https://stackoverflow.com/a/41464397/171456 দেখুন

— জিম্বাবুয়ে
সূত্র
31
দুর্ভাগ্যক্রমে এই সহায়ক শ্রেণীটি কলাম সিস্টেমের সাথে কাজ করে না কারণ এটি ভাসমান সম্পত্তির যত্ন নেয় না। উদাহরণস্বরূপ এই ডেমো দেখুন ।
— কোয়ালা_দেব
13
এর জন্য কেবলমাত্র একটি কেন্দ্র-ব্লক {ভাসা প্রয়োজন: কিছুই নয়; }, এবং এটি কাজ করে। bootply.com/122268
— ভাদ
5
ওপি সম্পর্কে নিশ্চিত নন, তবে আমি এখানে বিশদটি সন্ধান করতে পেয়েছি text-center- যা অন্য উত্তরগুলির কোনওটিই সরবরাহ করে না। এই আমার ভোট পায়।
— ডোমারিগ্যাটো
1
এটি কোনও কলামে ব্যবহার করতে পারবেন না, কারণfloat:none;
— এয়ারটোনিক্স
98

এখন বুটস্ট্র্যাপ ৩.১.১ কাজ করছে .center-blockএবং এই সহায়ক শ্রেণিটি কলাম সিস্টেমের সাথে কাজ করে।

বুটস্ট্র্যাপ 3 হেল্পার ক্লাস সেন্টার ।

দয়া করে এই জিসফিল্ড ডেমোটি পরীক্ষা করুন :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

সহায়ক ক্লাস কেন্দ্র

col-center-blockসহায়ক ক্লাস ব্যবহার করে সারি কলাম কেন্দ্র ।

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— প্রেরকের
সূত্র
float:noneডিভি সেন্টার-ব্লকের style="width : ?px"স্টাইলটি প্রয়োগ হয়েছে কিনা তা নিশ্চিত করে আমি এটি যোগ না করেই এই কাজটি পেয়েছি । উদাহরণস্বরূপ একটি চিত্র প্রস্থ। ৩.২.২ নিয়ে কাজ করে
— পাইওটার কুলা
মার্জিন: 0 অটো; - যথেষ্ট পরিবর্তে মার্জিন-বাম + মার্জিন-ডান
— মিমিকে
57

কেবল আপনার কাস্টম সিএসএস ফাইলে নিম্নলিখিতটি যুক্ত করুন। বুটস্ট্র্যাপ সিএসএস ফাইলগুলি সরাসরি সম্পাদনা করার প্রস্তাব দেওয়া হয় না এবং সিডিএন ব্যবহারের আপনার ক্ষমতা বাতিল করে ।

.center-block {
    float: none !important
}

কেন?

বুটস্ট্র্যাপ সিএসএস (সংস্করণ 3.7 এবং নিম্ন) মার্জিন ব্যবহার করে : 0 অটো; , তবে এটি আকার ধারকটির ভাসমান সম্পত্তি দ্বারা ওভাররাইড হয়ে যায়।

পিএস :

আপনি এই ক্লাসটি যুক্ত করার পরে, সঠিক ক্রমে ক্লাস সেট করতে ভুলবেন না।

<div class="col-md-6 center-block">Example</div>
— Sagive SEO
সূত্র
1
আমি বুটস্ট্র্যাপ ব্যবহার করছি 3.3.7এবং এটি আমার জন্য কাজ করা একমাত্র পদ্ধতি!
— ইলগ্রেনান
1
এইটা কাজ করে. তবে !importantপ্রয়োজনীয় মনে করবেন না
— জিয়ানফ্র্যাঙ্কো পি
1
@GianfrancoP। পি। আপনার অধিকার, কিন্তু ... এটি লোড ক্রমের উপর নির্ভর করে এবং আমি একটি নির্বোধ পদ্ধতি সরবরাহ করতে চেয়েছিলাম।
— সেগিভ এসইও
39

বুটস্ট্র্যাপ 3 এর এখন একটি বিল্ট-ইন ক্লাস রয়েছে.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

আপনি যদি এখনও 2.X ব্যবহার করে থাকেন তবে এটি কেবল আপনার সিএসএসে যুক্ত করুন।

— Schmalzy
সূত্র
এটি সম্ভবত আপনাকে পছন্দসই প্রভাবটি সবচেয়ে সহজ দেবে। এছাড়াও সেন্টার্ট ক্লাসে প্রস্থ নিক্ষেপ করুন বা আপনি যদি আরও বেশি মডুলার পদ্ধতির দিকে যাচ্ছেন তবে দ্বিতীয় শ্রেণি যুক্ত করুন
— ম্যাট ল্যামবার্ট
2
ভাসা যোগ করা: কিছুই নয়; সেন্টার্টে আপনাকে ক্লাসটি পাত্রে পরিণত করতে দেয়। কোড ক্লিনার রাখে
— অ্যাডাম প্যাটারসন
7
এটি কোনও কলামে ব্যবহার করতে পারবেন না, কারণfloat:none;
— এয়ারটোনিক্স
37

কেন্দ্রের কলামগুলিতে আমার দৃষ্টিভঙ্গি হ'ল display: inline-blockকলামগুলির text-align: centerজন্য এবং ধারক পিতামাতার জন্য।

আপনাকে কেবল সিএসএস শ্রেণিতে 'কেন্দ্রিক' যুক্ত করতে হবে row।

এইচটিএমএল:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

সিএসএস:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

জেএসফিডাল: http://jsfiddle.net/steyffi/ug4fzcjd/

— Steffi
সূত্র
2
এটিই একমাত্র উত্তর যা সময়ের 100% সময় কাজ করেছিল - অন্যরা কাজ করেছিল, তবে বুটস্ট্র্যাপের মোবাইল ভিউতে স্যুইচ করার সময় নয় (আইটেমগুলি বাম দিকে সরানো হয়েছিল)।
— লেভি ফুলার
এটি কেবলমাত্র আমার জন্য কাজ করেছিল,। সেন্টার-ব্লকটি কেবল একটি কলামের জন্য কাজ করে এবং সমস্ত কলাম এটি কতটা স্বাধীন তা কেন্দ্র করে আমার দরকার।
— cjohansson
শুধুমাত্র সমাধান যা আমার পক্ষেও কাজ করেছিল। অন্যগুলি তখনই কাজ করেছিল যখন ব্রাউজারটি উইন্ডো ছিল, (ফুলস্ক্রিন নয়)।
— কিউইকম্ব 123
26

বুটস্ট্র্যাপ ভার্সন 3 এ একটি টেক্সট-সেন্টার ক্লাস রয়েছে।

এই ক্লাসটি কেবল যুক্ত করুন:

text-center

এটি কেবল এই স্টাইলটি লোড করবে:

.text-center {
    text-align: center;
}

উদাহরণ:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
— RustyIngles
সূত্র
এই শ্রেণিটি কোথায় যুক্ত হবে তা পরিষ্কার করুন?
— aksu
হাই @ksu, আপনাকে কোনও .css যুক্ত করতে হবে না। প্রদত্ত উদাহরণটি দেখুন।
— JoshYates1980
15

এইটা কাজ করে. সম্ভবত একটি হ্যাকিশ উপায়, তবে এটি দুর্দান্তভাবে কাজ করে। এটি প্রতিক্রিয়াশীল (ওয়াই) জন্য পরীক্ষা করা হয়েছিল।

.centered {
    background-color: teal;
    text-align: center;
}

ডেস্কটপ

প্রতিক্রিয়াশীল

— আলী গাজানী
সূত্র
উপাদানটির ডিপ্লে ইনলাইন রয়েছে বলেই কাজ করে। একটি imgএকটি ব্লক হিসাবে সেট করা যেতে পারে।
— ProfileTwist
সম্ভবত আপনার বিচ্ছিন্ন পরীক্ষার ক্ষেত্রে। আমি .centered img { display: inline; }আপনার উত্তরে যুক্ত করব এবং তারপরে এটি পরিবর্তে একটি আপ ভোটের যোগ্য হবে।
— ProfileTwist
সমস্যা নেই. আমি নিশ্চিত যে ওপি তার উত্তর খুঁজে পাবে :)
— আলী গাজানী
বুটস্ট্র্যাপ 3-এ,। পাঠ্য-কেন্দ্র শ্রেণিটি একইভাবে স্থানীয়ভাবে কাজ করে, যেমন আমি উপরে শিখেছি।
— ডোমারিগ্যাটো
6

কর্নেলটি কেন্দ্র করতে আমাদের নীচের কোডটি ব্যবহার করতে হবে। কলস হ'ল মার্জিন অটো ছাড়াও মূল উপাদান। আমরা এটিকে কোনোটাকে ভাসিয়ে দেওয়ার জন্যও স্থাপন করব না,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

উপরের কল-এলজি -১ কেন্দ্রিক শ্রেণীর সাথে কেন্দ্র করতে, আমরা লিখব:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

ডিভের ভিতরে থাকা সামগ্রীকে কেন্দ্র করতে, ব্যবহার করুন text-align:center,

.centered {
    text-align: center;
}

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

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

এবং ডিভটি কেবলমাত্র মোবাইল সংস্করণে কেন্দ্র করতে, নীচের কোডটি ব্যবহার করুন।

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— আমির শাহজাদ
সূত্র
6

কেবল আপনার একটি কলাম সেট করুন যা কল-এক্সএস -১২ (মোবাইল-ফার্স্ট ;-)- এ সামগ্রী প্রদর্শন করে এবং কেবলমাত্র আপনার কেন্দ্রিক সামগ্রীটি কত বিস্তৃত হতে চান তা নিয়ন্ত্রণ করতে কেবল ধারকটি কনফিগার করুন, তাই:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
স্নিপেট প্রসারিত করুন

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
স্নিপেট প্রসারিত করুন

একটি ডেমো জন্য, দেখুন http://codepen.io/ebten/pen/gpRNMe :-)

— কাইরান রায়ান
সূত্র
6

অফসেট করার আরেকটি পদ্ধতির মধ্যে দুটি খালি সারি থাকা, উদাহরণস্বরূপ:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— Leroy
সূত্র
1
2 টি অকেজো ডিভ, কল-এমডি-অফসেট- * ভাল
— ইয়ামাকাক্স
1
আমি রাজী. আমি সেই পদ্ধতিটি ব্যবহার করেছি কারণ এটি আসলে ভাল এবং পরীক্ষিত।
— LeRoy
6

আপনি text-centerসারিটির জন্য ব্যবহার করতে পারেন এবং নিশ্চিত করতে পারেন যে অভ্যন্তরীণ ডিভগুলি রয়েছে display:inline-block(না সহ)float )।

হিসাবে:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

এবং সিএসএস:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

দ্য ফিডাল: http://jsfiddle.net/DTcHh/3177/

— আলিরেজা ফাত্তাহী
সূত্র
6

বুটস্ট্র্যাপ 4 আপনি কেবল চেষ্টা করে দেখতে পারেন justify-content-md-centerযেমন উল্লেখ করা হয় এখানে

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

এখানে চিত্র বর্ণনা লিখুন

— হোসেইন নারিমণি র‌্যাড
সূত্র
1
@ অ্যাডামিক্রসন প্রশ্নটি বিশেষত একটি বুটস্ট্র্যাপ 3 সমাধানের জন্য জিজ্ঞাসা করেছিল। যেহেতু এই উত্তর সম্ভবত BS4 মধ্যে যেতে উপায়, 2019 মধ্যে কিছু সফ্টওয়্যার এখনও বুটস্ট্র্যাপ 3. ব্যবহার করছে
— A1rPun
5

এটি সম্ভবত সেরা উত্তর নয়, তবে এর আরও একটি সৃজনশীল সমাধান রয়েছে। কোয়ালা_দেব দ্বারা চিহ্নিত হিসাবে কলামটি অফসেটিং কেবলমাত্র কলামের আকারের জন্যই কাজ করে। তবে সারিগুলিতে বাসা বেঁধে আপনি অসম কলামগুলিকে কেন্দ্র করেও অর্জন করতে পারেন।

আপনি যেখানে 12 এর গ্রিডের মধ্যে 1 কলামটি কেন্দ্র করতে চান সেখানে মূল প্রশ্নটি ধরে রাখতে।

  1. 2 টি কলামটি অফসেট করে কেন্দ্র করুন Center
  2. নেস্টেড সারি তৈরি করুন, যাতে আপনি আপনার 2 টি কলামের মধ্যে একটি নতুন 12 কলাম পান।
  3. যেহেতু আপনি 1 এর কলামটি কেন্দ্র করতে চান এবং 1 টি 2 এর "অর্ধেক" (যা আমরা 1 ম পদক্ষেপে কেন্দ্র করেছিলাম), এখন আপনার নিজের নেস্টেড সারিতে 6 টি কলামটি কেন্দ্র করা দরকার যা এটি সহজেই 3 টি অফসেট করে সম্পন্ন হয়।

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

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

এই ঝাঁকুনিটি দেখুন , দয়া করে নোট করুন যে আপনাকে ফলাফলটি দেখতেও আউটপুট উইন্ডোর আকার বাড়াতে হবে, অন্যথায় কলামগুলি মোড়ানো হবে।

— reinder
সূত্র
5

এটি আমার কোড নয়, তবে এটি পুরোপুরি কাজ করে (বুটস্ট্র্যাপ 3 এ পরীক্ষিত) এবং কল-অফসেট নিয়ে আমার কোনও গোলমাল করতে হবে না।

ডেমো:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

— বিনার ওয়েব
সূত্র
4

আমরা টেবিল বিন্যাস প্রক্রিয়াটি ব্যবহার করে এটি অর্জন করতে পারি:

প্রক্রিয়াটি হ'ল:

  1. সমস্ত কলামকে একটি ডিভেকে মুড়ে দিন।
  2. একটি ডিফল্ট একটি নির্দিষ্ট বিন্যাস সহ একটি টেবিল হিসাবে তৈরি করুন।
  3. প্রতিটি কলাম একটি টেবিল ঘর হিসাবে তৈরি করুন।
  4. সামগ্রীর অবস্থান নিয়ন্ত্রণ করতে উল্লম্ব-সারিবদ্ধ সম্পত্তি ব্যবহার করুন।

নমুনা ডেমো এখানে

এখানে চিত্র বিবরণ লিখুন

— মোহন দেরে
সূত্র
4

আপনার .row বা আপনার .col এর মধ্যে নিম্নলিখিত স্নিপেট যুক্ত করুন। এটি বুটস্ট্র্যাপ 4 * এর জন্য।

d-flex justify-content-center
— টমাস চিরওয়া
সূত্র
3

যেহেতু কোয়ালা_দেব তাঁর পন্থায় 1 ব্যবহার করেছেন, আমি কেন্দ্র-ব্লক বা মার্জিনের পরিবর্তে অফসেট পদ্ধতিটি পছন্দ করবো যার সীমিত ব্যবহার রয়েছে তবে তিনি উল্লেখ করেছেন:

এখন, এই পদ্ধতির জন্য একটি স্পষ্ট ত্রুটি রয়েছে, এটি কেবলমাত্র কলামের আকারের জন্যই কাজ করে, কেবলমাত্র .col-X-2, .col-X-4, কর্ন-এক্স -6, কর্ন-এক্স -8 এবং কর্ন-এক্স- 10 সমর্থন করা হয়।

বিজোড় কলামগুলির জন্য নিম্নলিখিত পদ্ধতির ব্যবহার করে এটি সমাধান করা যেতে পারে।

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— অভিনব সিং
সূত্র
3

আপনি আপনার বুটস্ট্র্যাপে খুব নমনীয় সমাধান ফ্লেক্সবক্স ব্যবহার করতে পারেন।

justify-content: center;

আপনার কলামটি কেন্দ্র করতে পারে।

নমনীয়তা পরীক্ষা করে দেখুন ।

— কঠোর
সূত্র
2

যেহেতু আমার কখনই একটির .col-মধ্যে কেবলমাত্র একটি একক কেন্দ্র করার প্রয়োজন হয় না, তাই আমি আমার টার্গেট কলামগুলি .rowমোড়ানোর .rowজন্য নিম্নলিখিত ক্লাসটি সেট করি ।

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

উদাহরণ

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— ওয়াল্টার রোমান
সূত্র
2

আপনার গ্রিডটি পূরণ করার জন্য যখন সঠিক সংখ্যাটি নেই তখন স্ক্রিনে কলামের উপাদানগুলি সন্ধান করার জন্য, আমি শ্রেণীর নামগুলি ফিরিয়ে দেওয়ার জন্য আমি জাভাস্ক্রিপ্টের একটি সামান্য অংশ লিখেছি:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

যদি আপনার 5 টি উপাদান থাকে এবং আপনি কোনও mdস্ক্রিনে সারিতে 3 টি রাখতে চান , আপনি এটি করুন:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

মনে রাখবেন, দ্বিতীয় যুক্তিটি 12 দ্বারা বিভাজ্য হতে হবে।

— jsgoupil
সূত্র
2

বুটস্ট্র্যাপ সারিতে একাধিক কলামকে কেন্দ্র করতে - এবং কলগুলির সংখ্যা বিজোড়, কেবল এই cssসারির সমস্ত কলামে এই শ্রেণিটি যুক্ত করুন :

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

সুতরাং আপনার এইচটিএমএলে আপনার মতো কিছু রয়েছে:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— রুটো কলিন্স
সূত্র
2

এটা চেষ্টা কর

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

আপনি অন্যান্য colযেমন ব্যবহার করতে পারেন col-md-2, ইত্যাদি।

— ছ উমরজামিল
সূত্র
2

আমি ক্লাসটি ব্যবহার করার জন্য সহজ পরামর্শ দিই text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— দধিচ সৌরভ
সূত্র
2

এই কোড ব্যবহার করে দেখুন।

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

এখানে আমি কল-এলজি -1 ব্যবহার করেছি এবং বড় ডিভাইসে ডিভকে কেন্দ্র করে সঠিকভাবে অফসেটটি 10 ​​হওয়া উচিত। আপনার যদি মাঝারি থেকে বড় ডিভাইসগুলিতে কেন্দ্রে এটি প্রয়োজন হয় তবে কেবল lg কে এমডিতে পরিবর্তন করুন।

— Bangash
সূত্র
2

বুটস্ট্র্যাপ 4 সমাধান:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
সূত্র
1

আপনি যদি এটি আপনার সারিতে রেখে দেন তবে ভিতরে থাকা সমস্ত কলামই কেন্দ্রিক হবে:

.row-centered {
    display: flex;
    justify-content: space-between;
}
— ইরান শবি
সূত্র
উপাদানটি প্রতিক্রিয়াশীল করে তুলেছে।
— gfivehost
1

আরও সুনির্দিষ্ট হওয়ার জন্য বুটস্ট্র্যাপের গ্রিড সিস্টেমে 12 টি কলাম রয়েছে এবং যে কোনও সামগ্রী কেন্দ্রীভূত করা যাক, উদাহরণস্বরূপ, সামগ্রীটি একটি কলাম নেয় takes একজনকে বুটস্ট্র্যাপের গ্রিডের দুটি কলাম দখল করতে হবে এবং দুটি দখলকৃত কলামের অর্ধেক অংশে বিষয়বস্তু স্থাপন করতে হবে।

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'কল-এক্সএস-অফসেট -৫' গ্রিড সিস্টেমকে জানিয়েছে যে সামগ্রীটি স্থাপন করা কোথায় শুরু করা যায়।

'কল-এক্সএস -২' গ্রিড সিস্টেমটিকে জানিয়েছে যে কতগুলি বাম ওভার কলামগুলিতে বিষয়বস্তু দখল করা উচিত।

'কেন্দ্রিক' একটি সংজ্ঞায়িত শ্রেণি হবে যা বিষয়বস্তুকে কেন্দ্র করবে।

বুটস্ট্র্যাপের গ্রিড সিস্টেমে এই উদাহরণটি কেমন দেখাচ্ছে তা এখানে।

কলাম:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... অফসেট ........ ডেটা। .......ব্যবহার করা হয় না........

— প্রযুক্তি
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.