Vertically align divs in the middle when using Bootstrap

By default bootstrap aligns everything to the top so when you have an html like below the container div will be top aligned leaving white space at the bottom.

            <div id="main">
                <div class="container">
                    <div class="row">
                       ........
                    </div>
               </div>
            </div>

 The container can be easily aligned vertically middle using java script. First we need to put entire div inside another div and then set the top-margin of the outer div using code below

        $(window).on('load resize', function () {
            var windowheight = $(window).height();
            var mainheight = $('#main').height();

            var diffheight = windowheight - mainheight - 100;
            if (diffheight > 0) {
                $('#main').css('margin-top', diffheight / 2);
            } else {
                $('#main').css('margin-top', 0);
            }
        });