Bootstrap - Assistance with layout needed - html

Question

I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very first project ever(!) when it comes to coding.
So here's the design I'm trying to replicate:
montere.it
I'm interested just in the main page, the actual tiles below the main image to be exact. I can't seem to find the best solution to position 2 tiles with background image, side by side(no gaps), with some h1 text and a small <p> above the background image in the tile, positioned centrally. There will be two more tiles below the initial two.
I SPENT A WEEK looking for similar solutions, but I'm exhausted and confused over all information digested. Can some one just point me in the right direction as to which features to use?
It seems even if I get to position both images, there are always gaps (right or left), there's no way to position the text exactly above the image centrally so it stays in one place when the display is resized and I don't want to cry about the rest.
I have a feeling it's a dumb question to ask, since none of the info I've found provide an exact solution to this question, so probably must be really easy to do and I just can't seem to grasp it.
I do apologize for taking up your time, but I just have no one else to ask.
Cheers!

Answer 1

Please check this out:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
<h1>Image 1</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
<h1>Image 2</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
<h1>Image 3</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
<h1>Image 4</h1>
</div>
</div>
And add this to your CSS file:
.col-img h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}

Answer 2

In case any one else runs into this problem, here's the fully working solution. I'm just not sure if it will disappear under gjfonte's link, so I want to be safe here:
Here's what was provided by #gjfonte:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-1">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-2">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-3">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-4">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
</div>
.content {
padding-top: 90px;
color: #fff
}
.content h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.col-img .bg-img {
text-align: center;
margin: 0 -15px;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 250px;
}
.bg-img.img-1 {
background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}
.bg-img.img-2 {
background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}
.bg-img.img-3 {
background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}
.bg-img.img-4 {
background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}