Bootstrap carousel??

I have been struggling from last few days in this problem and also my css knowledge is some what got expired! I want full page bootstrap carousel slider and i want some images over this slider[4 * 4] as shown this my attempt if any one can help ??

JS FIDDLE: https://jsfiddle.net/ysv09o0w/

<style>
.form {
    margin-top: 10%;
}
.search .form-section{
    background:rgba(0,0,0,1.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

div#carousel-example-generic {
    position:relative;
    height:100%;
}

div.search {
    position:absolute;
    z-index:999;
    top:60px; /* change to whatever you want */
    left:10px; /* change to whatever you want */
    right:auto; /* change to whatever you want */
    bottom:auto; /* change to whatever you want */
}


 </style>

//my slider

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">




       <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="<?php echo base_url();?>img/slider/bg_01.jpg" alt="" />
                <div class="container">
                    <div class="carousel-caption">
                        <h1></h1>
                        <p class="lead"></p>
                    </div>
                </div>
            </div>



            <div class="item">
                <img src="<?php echo base_url();?>img/slider/bg_02.jpg" alt="" />
                <div class="container">
                    <div class="carousel-caption">
                        <h1></h1>
                        <p class="lead"></p>
                    </div>
                </div>
            </div>
        </div>

Above code seems to be that i have not made any attempts but there code like search bar etc i have not included them?I have been facing problem for placing search bar on slider when i overcome it this incident took place!!
I want something like this
Click Herecss for carousel

@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
    }
}

javascript

jQuery(document).ready(function() {
    $('.carousel').carousel({
        pause: "false",
        interval: 2000
    });

    $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    $('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
    $('.carousel-inner div.item img').each(function() {
        var imgSrc = $(this).attr('src');
        $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '10%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
        $(this).remove();
    });

    $(window).on('resize', function() {
        $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    });
});