How to add text over the image in bootstrap

Question

I am noob in bootstrap and making one simple responsive web design. I had given the bootstrap container the image now i want to add text over the images, so i can add more text and images on that container. I tried on google but didn't find the exact answer. Please help

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                <img src="background.png" class="img-responsive">
            </div>
        </div>
    </div>
</div>

and here is the image, what i want - http://i.imgur.com/FAPXpFL.jpg

Answer 1

I'd be inclined to put the image in place as a background:

.maintxt {
    background-image: url(images/background.png);
    background-size: cover;
}

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                My great text.
            </div>
        </div>
    </div>
</div>

If that doesn't work, you'll need to use relative and absolute positioning:

.maintxt {position: relative;}
.maintxt > img, .overlay-text {position: absolute;}

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                <img src="background.png" class="img-responsive">
                <span class="overlay-text">My super text.</span>
            </div>
        </div>
    </div>
</div>

Demo