Bootstrap with overlapped images

I've got an image as a background and I'm trying to use col- from Bootstrap to put more images that overlap with the background but I can't because for the overlap effect I set the position of the images to absolute and I think that is causing the problem and 'col-' doesn't work. Here is the code:

HTML:

<img src="imag/bgimage.png" class="bg">

<div class="text-center">
<div class="col-md-3 inline-block overlap">
    <article>
        <img src="imag/image1.png">
    </article>  
</div>
<div class="col-md-3 inline-block overlap">
    <article>
        <img src="imag/image2.png">
    </article>  
</div>

CSS:
.bg {
width: 100%;
height: 100;
opacity: 0.5;
}

.overlap {
position: absolute;
z-index: 1;
}

.inline-block {
float: none;
display: inline-block;
}