Правильный способ добавить текст поверх изображения в Bootstrap 3

Question

Раз и навсегда мне нужно научиться размещать текст и кнопку поверх изображения, используя Bootstrap 3. Я пытаюсь получить следующий результат:

веб-сайт: Пример изображения

Я думаю, что структура выглядит примерно так:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="container">
                <div class="row">
                    <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
                    <div class="col">
                        <div class="home_slider_content"  data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
                            <div class="home_slider_title">A new Online Shop experience.</div>
                            <div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra velit venenatis fermentum luctus.</div>
                            <div class="button button_light home_button"><a href="#">Shop Now</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Я на правильном пути относительно структуры HTML?

С уважением.

Answer 1

Вы можете попробовать эту структуру. Я использую для этого мое личное использование.

.banner{position:relative}
.banner img{width:100%}
.banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner"> <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
	<div class="container">
		<div class="home_slider_content"  data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
			<div class="home_slider_title">A new Online Shop experience.</div>
			<div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
				adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
				velit venenatis fermentum luctus.</div>
			<div class="button button_light home_button"><a href="#">Shop Now</a></div>
		</div>
	</div>
</div>