বুটস্ট্র্যাপ 4 কেন্দ্র উল্লম্ব এবং অনুভূমিক প্রান্তিককরণ

Question

আমার একটি পৃষ্ঠা রয়েছে যেখানে কেবল ফর্মটি বিদ্যমান এবং আমি ফর্মটি স্ক্রিনের মাঝখানে স্থাপন করতে চাই।

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-centerপ্রান্তিক ফর্ম অনুভূমিকভাবে, কিন্তু আমি চিন্তা করতে পারে না কিভাবে এটা উল্লম্বভাবে সারিবদ্ধ। আমি চেষ্টা করার চেষ্টা করেছি align-items-centerএবং align-self-centerএটি কার্যকর হয় না।

আমি কী মিস করছি?

ডেমো

Answer 1

2019 আপডেট করুন - বুটস্ট্র্যাপ 4.3.1

আছে কোন প্রয়োজন জন্য অতিরিক্ত সিএসএস । বুটস্ট্র্যাপের মধ্যে ইতিমধ্যে যা অন্তর্ভুক্ত রয়েছে তা কাজ করবে। নিশ্চিত করুন ধারক ফর্মের (গুলি) দ্বারা পূর্ণ উচ্চতা । বুটস্ট্র্যাপ 4 এর এখন h-100100% উচ্চতার ক্লাস রয়েছে ...

উল্লম্ব কেন্দ্র:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

কেন্দ্রের আইটেম (গুলি) সহ ধারকটির উচ্চতা 100% হওয়া উচিত (বা পছন্দসই উচ্চতা যা কেন্দ্রিক আইটেমের সাথে তুলনামূলক হোক)

দ্রষ্টব্য: যে কোনও উপাদানে height:100%( শতাংশের উচ্চতা ) ব্যবহার করার সময় , উপাদানটি তার ধারকটির উচ্চতা নেয় । আধুনিক ব্রাউজারগুলিতে vh ইউনিটগুলি পছন্দসই উচ্চতা পাওয়ার height:100vh;পরিবর্তে ব্যবহার করা যেতে পারে %।

অতএব, আপনি এইচটিএমএল, বডি {উচ্চতা: 100% set সেট করতে পারেন বা min-vh-100পরিবর্তে ধারকটিতে নতুন ক্লাস ব্যবহার করতে পারেন h-100।

---

অনুভূমিক কেন্দ্র:

• text-centerকেন্দ্র এবং display:inlineউপাদান কলাম বিষয়বস্তু
• mx-auto ফ্লেক্স উপাদান ভিতরে কেন্দ্রিক জন্য
• offset-*বা কলামগুলি কেন্দ্রmx-auto করতে ব্যবহার করা যেতে পারে ( ).col-
• justify-content-centerথেকে কেন্দ্র কলাম ( col-*) ভিতরেrow

---

বুটস্ট্র্যাপে উল্লম্ব সারিবদ্ধ কেন্দ্র 4
বুটস্ট্র্যাপ 4 পূর্ণ-স্ক্রিন কেন্দ্রিক ফর্ম
বুটস্ট্র্যাপ 4 কেন্দ্রের ইনপুট গ্রুপ
বুটস্ট্র্যাপ 4 অনুভূমিক + উল্লম্ব কেন্দ্র পূর্ণ স্ক্রিন

Comments

<section>ট্যাগটি ব্যবহার করা ঠিক কি , অথবা <div>ভিউপোর্টে অনুভূমিকভাবে এবং উল্লম্বভাবে বিষয়বস্তু কেন্দ্রীভূত করার জন্য কারও কাছে থাকা উচিত ? আমি একটি বিদ্যমান সাইট পেয়েছি যা বিভাগ এবং পৃষ্ঠাগুলির চিত্র পরিবর্তন করে এমন বিভাগগুলির সাথে পৃষ্ঠাগুলি পেয়েছে।

— অ্যাড্রিয়ান

সারির কোনও সরাসরি শিশু কি .col হওয়া উচিত নয়?

— মিগুয়েল স্টিভেনস

এই উত্তরটি কিছুটা ভাঙা। আপনি স্পষ্টতই বলেছেন যে "অতিরিক্ত সিএসএসের দরকার নেই" তবে এটি ভুল। আপনার কোডের নমুনায় এটি দেখায় যে আপনাকে বুটস্ট্র্যাপের বাইরে সিএসএসে বডি এবং এইচটিএমএলকে 100% হতে হবে this এই অতিরিক্ত সিএসএস ছাড়া আপনার সমাধান কাজ করে না।

— মেজর মেজর

না, বডি এবং এইচটিএমএল "বাইরের" নয় .. বুটস্ট্র্যাপ সিএসএসের ক্লাসগুলিও তাদের সাথে যুক্ত করা যায়! codeply.com/go/5ifNMHKUEy @ ডন .. বিশেষত কোনটি কার্যকর হয়নি? আপনার মন্তব্য সহায়ক নয়।

— জিম

ধারকটির 100% প্রয়োজন ছিল না তবে h-100 justify-content-center align-items-centerকাজ করেছেন

— JMP

Answer 2

এই কাজটি আমার জন্য:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

Comments

সিএসএস শৈলী যুক্ত করতে ভুলবেন না:<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>

— পাইওউনার

Answer 3

ফ্লেক্সবক্স আপনাকে সাহায্য করতে পারে। তথ্য এখানে

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Answer 4

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

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

Comments

এছাড়াও, বুটস্ট্র্যাপ 4h-100height:100%

— জিম

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

— ব্রাম ভ্যানরোয়

@ ব্র্যামভানরোয় যেমন আপনি বলেছিলেন আমি জিম সিস্টেমের সমাধান ব্যবহার করেছি তবে এটি আমার পক্ষে কার্যকর হয়নি। আপনার সমাধান উভয় সংস্করণ 4.0.0 এবং 4.1.0

— আপডেটেও

Answer 5

বুটস্ট্র্যাপে একটি পাঠ্যকে কেন্দ্র করে পাঠ্য-কেন্দ্র রয়েছে। উদাহরণ স্বরূপ

<div class="container text-center">

আপনি নিম্নলিখিত পরিবর্তন করুন

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

পরবর্তী

<div class="row text-center">

Answer 6

কেউই আমার পক্ষে কাজ করেনি। কিন্তু তার এক করেছে।

যেহেতু বুটস্ট্র্যাপ 4 .রো ক্লাসটি এখন প্রদর্শিত হচ্ছে: নমনীয়ভাবে আপনি যে কোনও কলামে উল্লম্বভাবে কেন্দ্রের জন্য নতুন অ্যালাইন-সেলফ-সেন্টার ফ্লেক্সবক্স ইউটিলিটিটি ব্যবহার করতে পারেন:

<div class=”row”>
   <div class=”col-6 align-self-center”>
      <div class=”card card-block”>
      Center
      </div>
   </div>
   <div class=”col-6">
      <div class=”card card-inverse card-danger”>
      Taller
      </div>
   </div>
</div>

আমি এটি সম্পর্কে https://medium.com/wdstack/bootstrap-4-versical-center-1211448a2eff থেকে শিখেছি

Answer 7

এটি বুটস্ট্র্যাপ 4.3 সহ আইই 11 এ কাজ করছে । অন্য উত্তরগুলি আমার ক্ষেত্রে আই 11 এ কাজ করছে না।

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

Answer 8

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Answer 9

সিএসএসে এই কোডটি ব্যবহার করুন:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

Answer 10

আমি এখানেই শেষ করেছি কারণ আমার বুটস্ট্র্যাপ 4 গ্রিড সিস্টেম এবং একটি কৌণিক * এনজিফোর্ড লুপ নিয়ে একটি সমস্যা ছিল। আমি এনজিএফ বাস্তবায়নের জন্য ডিভের জন্য একটি কল-জায়েজ-কনটেন্ট-সেন্টার ক্লাস প্রয়োগ করে এটি ঠিক করেছি:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

যা ফলাফল দেয়:

Answer 11

ডক থেকে (বুটস্রেপ 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around