How add multipe elements in grid system and make it responsive

user_10378809 0
Viewed 93

I am new to web development trying to design the following screen in bootstrap-4,But unable to design it as responsive can someone describe how can I design this screen using bootstrap-4 grid system.

Here is my image what I am trying to design it using grid system by using row and column concept it should be responsive.

here is my grid picture

here is my code:

<div className="row">
<div className="col-md-10">
    <div className="row">
        <div className="col-md-4">    
            <div className="fontStyle">
                <span className="">1</span>
                <!-- <div className="displayBlk"> -->
                <label type="text">Select Technology</label>

                    <select value=""  className="selectpicker btn btn-labeled btn-start">
                        <option value="">None Selected</option>
                        <option value="">Hello </option>
                        <option value="">World </option>
                    </select>
                <!-- </div> -->
            </div>
        </div>
        <div className="col-md-4 rowOne">
            <div className="fontStyle">
                Select Question Type                    
                <button type="button" class="btn btn-primary btn-sm">Code Type</button>
                <button type="button" class="btn btn-default btn-sm">Non Code Type</button>
            </div>
        </div>
        <div className="col-md-4">
            <div className="fontStyle">
                Number Of Questions
                <select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
                    <option value="">Select</option>
                    <option value="">01</option>
                    <option value="">02</option>
                </select>
            </div>
        </div>
    </div>
    <!-- end of 10 col row -->
</div>
<div className="col-md-2">
    <span className="">
        <button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
    </span>
    <span>
        <button type="button" class="btn btn-primary btn-sm">+</button>
    </span>
</div>

and here is my picture after design it how they looking. enter image description here

Thanks for any help!

bootstrap-4 responsive css html
2 Answers

This link will help you : link

Grid system uses a maximum of 12 columns, keep that in mind and divide your columns accordingly.

However, because your elements are all on the same line you should add =>

class="row"

before you start with your grid system. You will understand the grid system with practice, just play around with the values of your columns and you will get there for sure.

UPDATE :

Have a look--> 

<div class="container">
<div class="row">
    <div class="col-md-4">
        <span class="">1</span>
        <label type="text">Select Technology</label>
        <select value=""  class="selectpicker btn btn-labeled btn-start">
            <option value="">None Selected</option>
            <option value="">Hello </option>
            <option value="">World </option>
        </select>
    </div>

    <div class="col-md-4">
        <div class="row">
            Select Question Type                    
            <button type="button" class="btn btn-primary btn-sm">Code Type</button><button type="button" class="btn btn-default btn-sm">Non Code Type</button>
        </div>

    </div> 
    <div class="col-md-4">
        <div className="fontStyle">
            Number Of Questions
            <select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
                <option value="">Select</option>
                <option value="">01</option>
                <option value="">02</option>
            </select>

            <span className="">
                <button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
            </span>
            <span>
                <button type="button" class="btn btn-primary btn-sm">+</button>
            </span>

        </div>
    </div>

</div>

user_103789100 

@media (max-width:767px) {
     .bg-light {
   padding-bottom: 0 !important;
     }
     .bg-white {
   background-color: #f8f9fa !important;
   padding-bottom: 1rem !important;
     }
     .border-right:nth-child(n+2) {
      border: none !important;
     }
    } 
    @media (max-width:991px) {
     .d-flex.border-right {
      border: none !important;
     }
    } 
<div class="container">
     <div class="row my-5">
      <div class="col-md-10 col-lg-10 bg-light py-4">
       <div class="row px-2">
        <div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-4">
         <div class="border-right pr-2 mr-1"><p class="font-weight-bold mb-0 text-right w-100">1</p></div>
         <div class="w-100"><p class="font-weight-bold mb-0 mr-1">Select Type</p></div>
         <div class="w-100">
          <select class="form-control">
         <option>None Selected</option>
       </select>
      </div>
        </div>
        <div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-5">
         <p class="w-100 font-weight-bold mb-0 mr-1">Select Type</p>
         <p class="w-100 mb-0 mr-1"><a href="#" class="btn btn-block btn-primary">Code Type</a></p>
         <p class="w-100 mb-0"><a href="#" class="btn btn-block btn-outline-primary">Non Code Type</a></p>
        </div>
        <div class="d-flex justify-content-between align-items-center px-2 col-12 col-lg-3">
      <div class="w-100"><p class="font-weight-bold mb-0 mr-2">Number of Type</p></div>
         <div class="w-100"><select class="form-control">
        <option>01</option>
      </select></div>
        </div>
       </div>       
      </div>
      <div class="col-md-2 col-lg-2 bg-white py-2 d-md-flex align-items-center">
       <div class="d-md-block d-flex d-lg-flex justify-content-between">
        <div class="w-100 mr-1 mb-2"><button type="button" class="btn btn-block btn-lg btn-outline-primary">Reset</button></div>
        <div class="w-100"><button type="button" class="btn btn-block btn-lg btn-primary">+</button></div>
       </div>
      </div>
     </div>
    </div>

user_101936260
Related