CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MK-DK
MK-DK

Reputation: 1085

Correct way to add text over an image in Bootstrap 3

Once for all I need to learn how to place a text and button over an image using Bootstrap 3. I am trying to hit this result:

Template image The website is: Example of the image

I am thinking the structure is something like this:

<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>

Am I on the correct path regarding the structure of the HTML?

Best regards.

Upvotes: 5

Views: 4803

Answers (1)

Kevin
Kevin

Reputation: 1357

You could try this structure. I use for it my personal use.

.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>

Upvotes: 3

Related Questions