Why bootstrap is not taking whole row? please help RSS

• • Reply
  jameslovemic...

  Member

  11 Points

  24 Posts

  Why bootstrap is not taking whole row? please help

  May 31, 2020 05:24 PM|jameslovemicrosoft|LINK

  I have write following code:

  <div class="panel panel-primary">
      <div class="panel-heading">Approval Request</div>
      <div class="panel-body">
          <div class="well col-lg-6 mr-2">
              <h3>Budget Details</h3>
              <div class="form-row">
                  <div class="form-group col-md-6">
                      <label for="date4">Date</label>
                      <input type="text" class="form-control" id="date4" placeholder="Email">
                  </div>
                  <div class="form-group col-md-6">
                      <label for="inputType">Type</label>
                      <select class="form-control form-control-lg" id="inputType">
                          <option>Please Select</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                      </select>
                  </div>
              </div>
              <div class="form-group">
                  <label for="inputType">Months</label>
                  <select class="form-control form-control-lg" id="inputType">
                      <option>Please Select</option>
                      <option value="1">Jan</option>
                      <option value="2">Feb</option>
  
                  </select>
              </div>
          </div>
          <div class="well col-lg-5 ml-2">
  
          </div>
      </div>
  </div>
  

  My output is 

  https://drive.google.com/file/d/1yVtkUeqsuft5yPoaA33Gn2ilz5AAURb9/view?usp=sharing

  why second row month select option is not taking entire row ie. 12    

• • Reply
  bruce (sqlwo...

  All-Star

  58444 Points

  15768 Posts

  Re: Why bootstrap is not taking whole row? please help

  May 31, 2020 10:35 PM|bruce (sqlwork.com)|LINK

  We cannot see all your css. Just use the browsers css debugger to which css rule is causing your issue.

  bruce (sqlwork.com)
• • Reply
  yogyogi

  Participant

  1253 Points

  943 Posts

  Re: Why bootstrap is not taking whole row? please help

  Jun 01, 2020 06:08 AM|yogyogi|LINK

  jameslovemicrosoft

  why second row month select option is not taking entire row ie. 12 

  Try this:

  <div class="form-group col-md-12">
      <label for="inputType">Months</label>
      <select class="form-control form-control-lg" id="inputType">
          <option>Please Select</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
      </select>
  </div>

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  bruce (sqlwo...

  All-Star

  58444 Points

  15768 Posts

  Re: Why bootstrap is not taking whole row? please help

  Jun 01, 2020 04:09 PM|bruce (sqlwork.com)|LINK

  more valid markup would be:

  1) but 3rd control in its own row;

         <div class="well col-lg-6 mr-2">
              <h3>Budget Details</h3>
              <div class="form-row">
                  <div class="form-group col-md-6">
                      <label for="date4">Date</label>
                      <input type="text" class="form-control" id="date4" placeholder="Email">
                  </div>
                  <div class="form-group col-md-6">
                      <label for="inputType">Type</label>
                      <select class="form-control form-control-lg" id="inputType">
                          <option>Please Select</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                      </select>
                  </div>
              </div>
              <div class="form-row">
                  <div class="form-group">
                     <label for="inputType">Months</label>
                     <select class="form-control form-control-lg" id="inputType">
                         <option>Please Select</option>
                         <option value="1">Jan</option>
                         <option value="2">Feb</option>
                     </select>
                  </div>
              </div>
          </div>

  or add to the row:

          <div class="well col-lg-6 mr-2">
              <h3>Budget Details</h3>
              <div class="form-row">
                  <div class="form-group col-md-6">
                      <label for="date4">Date</label>
                      <input type="text" class="form-control" id="date4" placeholder="Email">
                  </div>
                  <div class="form-group col-md-6">
                      <label for="inputType">Type</label>
                      <select class="form-control form-control-lg" id="inputType">
                          <option>Please Select</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                      </select>
                  </div>
                  <div class="form-group">
                     <label for="inputType">Months</label>
                     <select class="form-control form-control-lg" id="inputType">
                         <option>Please Select</option>
                         <option value="1">Jan</option>
                         <option value="2">Feb</option>
                     </select>
                  </div>
              </div>
          </div>

  bruce (sqlwork.com)
• • Reply
  shaili shah

  Member

  115 Points

  99 Posts

  Re: Why bootstrap is not taking whole row? please help

  Jun 02, 2020 04:13 AM|shaili shah|LINK

  <div class="row">
  <div class="col-md-12">
  <div class="form-group">

  <label for="inputType">Months</label>
  <select class="form-control form-control-lg" id="inputType">
  <option>Please Select</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>

  </select>

  </div>
  </div>
  </div>

  The dropdown from the first two classes will be aligned in the whole row.

  I hope it will help you.

  Thanks!

  ASP.NET consulting companies india
  https://www.ifourtechnolab.com/asp-dot-net-enterprise-content-management