Containers Not Aligned Bootstrap

I am working on a website that has a left and right container, which you can see if you run the following HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
    
        <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">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    
    <style>
    
    .card
    {
        background-color: #EFF3FC!important;
    }
    
    html, body
    {
        height: 100%;
    }
    
    .toggleBlue
    {
        color: blue;
    }
    
    .regular
    {
        color: gray;
    }
    
    #radioDiv 
    {
        text-align: left;
        display: inline-block;
        margin-left: 25px;
    }
    .required:before
    {
        content: "*";
        color: red;
    }
     .btnBlue
    {
        background: #1467ba;
        height: 25px;
        width: 70px;
        font-size: 14px; 
        color: white;   
        margin-right: 30px;
    }
    .btnSave
    {
        background: #1467ba;
        height: 25px;
        width: 70px;
        font-size: 14px; 
        color: white;   
        margin-right: 10px;
    }

       
    </style>
    
    <body>
        
        <div class="container-fluid h-100">
        
            <div class="row no-gutters h-100">
            
            
                <div class="col-md-2 my-auto p-1">
                
                
                    <div class="card card-block pl-2 ">
                         
                         <br>
                    
                        <img class="mx-auto" src="CoreCLM_Logo.JPG" alt="CoreCLM Logo" width="80px" height="50px"> </img>

                    
                        <hr class="mx-auto" style="height:1px;border:none;color:#333;background-color:#333;width:80%;" />
                    
                        <p class="toggleBlue"> 1. Procurement Requests & Funding </p>
                        
                        <p class="regular"> 2. Suppiles or Services </p>
                        
                        <p class="regular"> 3. Contract Type </p>
                        
                        <br> <br> <br> <br> <br> <br>  <br> <br> <br> <br> <br> <br>  <br> <br> <br> <br> <br>
                        
                        
 
                    </div>
                
                </div>
                
                <div class="col-md-10 my-auto">
                
                    <div class="card card-block">
                    
                        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #E6E6E6;">
                        
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button> 
                            
                                
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="navbar-nav mr-auto">
                                  <li class="nav-item">
                                    <a class="nav-link" href="#"> Home </a>
                                  </li> 
                                  <li class="nav-item">
                                    <a class="nav-link" href="#"> Edit Profile </a>
                                  </li> 
                                  <li class="nav-item">
                                    <a class="nav-link" href="#"> Logout </a>
                                  </li> 
                                </ul>
                                <form>
                                
                                <button class="btnSave"  type="submit"> SAVE </button>
                                <button class="btnBlue"  type="submit"> CANCEL </button>
                                
                                </form>
                                <form class="form-inline my-2 my-lg-0 text-center">
                                  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                                  <input type="image" src="searchicon.jpg" width="38px" height="38px"/>
                                </form>
                              </div>
                        </nav>
                        
                        <div class="p-3">
                        
                        <form>
                        
                            <p style="font-size: 18px; text-align: center;"> Ensure the accuracy and completeness of procurement request packages and availability of funds to fulfill the procurement request </p>
                            
                            <br>
                            <p style="font-size: 16px; color: gray;"> Have you advised customers on the completeness and accuracy of the procurement request? </p>
                            <div class="form-group">
                                <div id="radioDiv">
                                    <input type="radio" id="yes1" name="option">
                                    <label for="yes">  Yes  </label> 
                                    <br>
                                    <input type="radio" id="no1" name="option">
                                    <label for="no"> No </label>           
                                </div>
                                <br>
                            </div>
                            <p class="required" style="font-size: 16px; color: gray;">Has the funding type been identified? </p>
                            <div class="form-group">
                                <div id="radioDiv">
                                    <input type="radio" id="yes2" name="option">
                                    <label for="yes">  Yes  </label> 
                                    <br>
                                    <input type="radio" id="no2" name="option">
                                    <label for="no"> No  </label>           
                                </div>
                                <br>
                            </div>
                        
                        </form>
                        
                             <form class="form-inline">
                              <div class="form-group">
                                <label style="color: gray; font-size: 16px;" class="required" for="fundingAmount">If yes, then what is the funding amount? </label>
                                <input type="number" id="fundingAmount" class="form-control mx-sm-3">
                              </div>
                        </form>
                            

                        <br> <br> <br> <br> <br> <br> <br> <br> 
                        
                    
                     </div>
                     
                 <nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
                        
                          <div class="col-md-10">
                              <div style="color: gray; font-size: 14px;" class="required">Required Question </div>
                          </div>
                          
                          <div class="col-md-2">
                              
                              <button class="btnBlue" type="submit"> > </button>
                          </div>
                    </nav>
                
                </div>
                               

            </div>
        
        </div>

    </body>
</html>

I am confused why the right and left container are not perfectly the same in terms of their height. I have tried adding br tags to adjust the height, but it always overshoots or undershoots it. How should I fix this?



Read more here: https://stackoverflow.com/questions/68460965/containers-not-aligned-bootstrap

Content Attribution

This content was originally published by Lethalbacon at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: