Why does card overflow from parent col

Question

My Form elements are not fitting in correctly and the alignment is distorted.

• .h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
• I would prefer to accept an answer which can explain why my snippet does not work.

Plunker here

HTML

  <div class="container-fluid h-100">
          <div class="row h-100">
            <div class="col-2  blue">
            </div>
            <div class="col-10">
             <div class="card h-100">
                <div class="card-body">
                  <form>
                    <div class="form-group">
                      <label for="Random">Random 1</label>
                      <input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">        
                    </div>
                    <div class="form-group">
                        <label for="Random">Random 2</label>
                        <input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">        
                      </div>
                      <div class="form-group">
                          <label for="Random">Random 3</label>
                          <input type="text" class="form-control" id="random3" placeholder="Enter Random">        
                        </div>
                      <div class="form-group">
                          <label for="Random">Random 4</label>
                          <input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">        
                        </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="isActive">
                      <label class="form-check-label" for="isActive">Is Active</label>
                    </div>
                    <div class="form-group">
                        <label for="Random">Random 5</label>
                        <input type="text" class="form-control" id="random5" placeholder="Enter Random Random">        
                      </div>
                      <div class="form-group">
                          <label for="phoneNumber">Random 6</label>
                          <input type="number" class="form-control" id="random6" placeholder="Enter phone number">        
                        </div>
                        <div class="form-group">
                            <label for="emailId">Email</label>
                            <input type="number" class="form-control" id="emailId" placeholder="Enter email">        
                          </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
                </div>
          </div>
            </div>
          </div>
        </div>

CSS

.blue {
    background-color:blue;
}

html,body {
    height: 100%;
  }

Screen shot

Answer 1

remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right? if you want to give blue shape than here is the code :

<div class="row">
        <div class="col-2  blue">
        </div>
        <div class="col-10">
         <div class="card h-100">
            <div class="card-body">
              <form>
                <div class="form-group">
                  <label for="Random">Random 1</label>
                  <input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">        
                </div>
                <div class="form-group">
                    <label for="Random">Random 2</label>
                    <input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">        
                  </div>
                  <div class="form-group">
                      <label for="Random">Random 3</label>
                      <input type="text" class="form-control" id="random3" placeholder="Enter Random">        
                    </div>
                  <div class="form-group">
                      <label for="Random">Random 4</label>
                      <input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">        
                    </div>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="isActive">
                  <label class="form-check-label" for="isActive">Is Active</label>
                </div>
                <div class="form-group">
                    <label for="Random">Random 5</label>
                    <input type="text" class="form-control" id="random5" placeholder="Enter Random Random">        
                  </div>
                  <div class="form-group">
                      <label for="phoneNumber">Random 6</label>
                      <input type="number" class="form-control" id="random6" placeholder="Enter phone number">        
                    </div>
                    <div class="form-group">
                        <label for="emailId">Email</label>
                        <input type="number" class="form-control" id="emailId" placeholder="Enter email">        
                      </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
            </div>
      </div>
        </div>
      </div>

.blue{ min-height: 100px //the height you want to give }