Bootstrap nested grid layout

I am pretty new to Bootstrap and read this tutorial which explains about bootstrap grid system. I am trying to make a layout that looks like this

Each colored block represents a web component whose height is not specified, the web components are supposed to occupy the height of its parent. The problem is that the parent divs are not taking 100% height to occupy the entire viewport
height.

I have added 50px height for all the divs so that I could show the output correctly. The original code does not have it.