বুটস্ট্র্যাপ সিএসএস ব্যবহার করে পৃষ্ঠায় পাশাপাশি দুটি ডিভাইড আনুভূমিকভাবে সারিবদ্ধ করুন

Question 1

আমি চেষ্টা করেছিলাম কোড নীচে উল্লেখ করুন

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

আউটপুট:

First Div
SecondDiv

প্রত্যাশিত আউটপুট:

                      First Div        Second Div

আমি বুটস্ট্র্যাপ CSS ব্যবহার করে পৃষ্ঠায় আনুভূমিকভাবে দুটি ডিভগুলি সারিবদ্ধ করতে চাই। কিভাবে আমি এটি করতে পারব ? আমি এটি করতে সহজ সিএসএস এবং ভাসমান ধারণাটি ব্যবহার করতে চাই না। কারণ আমার মিডিয়া ক্যোয়ারী ব্যবহার না করে সব ধরণের লেআউটে (যেমন সমস্ত উইন্ডোর আকার এবং রেজোলিউশন) কাজ করতে বুটস্ট্র্যাপ সিএসএস ব্যবহার করা দরকার।

Question 2

এই কৌতুক করতে হবে:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

বুটস্ট্র্যাপের গ্রিডগুলি কীভাবে কাজ করে তার সাথে নিজেকে পরিচিত করতে বুটস্ট্র্যাপ ডক্সের গ্রিড সিস্টেম বিভাগটি পড়ুন:

http://getbootstrap.com/css/#grid

Question 3

বুটস্ট্র্যাপ ক্লাস col-xx-#এবং ব্যবহার করুনcol-xx-offset-#

সুতরাং এখানে যা ঘটছে তা হচ্ছে আপনার পর্দাটি 12 টি কলামগুলিতে বিভক্ত হচ্ছে। ইন col-xx-#, #আপনি কলামের কভার সংখ্যা এবং অফসেটটি হ'ল আপনি যে কলামগুলি ছেড়ে চলেছেন তা।

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

আমি আপনার প্রয়োজনীয়তা যা করতে পারি তা দিয়ে,

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

কৌতুক করা উচিত।

Question 4

বিকল্প বুটস্ট্র্যাপ 4 সমাধান (আপনি কল -6 এর চেয়ে ছোট ডিভগুলি ব্যবহার করতে পারেন ):

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

আরও

Question 5

<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

এই কৌশলটি করে।

Question 6

দুটি ডিভ আনুভূমিকভাবে সারিবদ্ধ করতে আপনাকে কেবল দুটি ক্লাসের বুটস্ট্র্যাপ একত্রিত করতে হবে: এখানে কীভাবে:

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

Question 7

রণভীরের প্রদত্ত প্রতিক্রিয়া (উপরে দ্বিতীয় উত্তর) পুরোপুরি কার্যকর হয় না।

তিনি ব্যবহার করতে বলেছেন col-xx-offset-#, তবে অফসেটগুলি এভাবে ব্যবহার হয় না।

আপনি যদি নিজের সময়টি ব্যবহার করার চেষ্টা করে নষ্ট করেন col-xx-offset-#, যেমন আমি তার উত্তরের ভিত্তিতে করেছি, সমাধানটি ব্যবহার করা offset-xx-#।

Question 8

বিকল্পটি যা আমি কৌণিক প্রোগ্রামিং করেছি:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Question 9

আমি বুটস্ট্র্যাপের উপরে সিএসএস গ্রিডের প্রস্তাব দিচ্ছি যদি আপনি যা চান তা আরও কাঠামোগত ডেটা থাকতে হবে, উদাহরণস্বরূপ একাধিক সারি সহ পাশাপাশি টেবিল পাশাপাশি, কারণ আপনাকে প্রতিটি সন্তানের জন্য শ্রেণির নাম যুক্ত করতে হবে না:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

সিএসএস-গ্রিড

Question 10

Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>