CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Abie Giordano
Abie Giordano

Reputation: 371

Nesting image on top another in twitter bootstrap

I'm trying to nest an image on top of another (using twitter bootstrap) the problem is when I re-size my browser, the arrow image isn't consistently located (see the image)

It was supposed to be:

enter image description here

but when the browser re-sized:

enter image description here

and the code is:

<div class="container">
<div class="row">
    <div class="col-lg-4">
        <div>
            <img alt="" src="../images/fulltime.png" class="img-responsive" />
            <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />
            <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS;
                color: White;">
                Professional
            </label>
            <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;">
                random text
                <br />
                random text
                <br />
                random text
            </p>
        </div>
    </div>
  </div>
</div>

What did I do wrong here? Or is it not possible?

Note: I just changing my recent web with bootstrap, so I'm new to this stuff and I use bootstrap v3 if it helps.

Thank you.

Upvotes: 2

Views: 3736

Answers (2)

Abie Giordano
Abie Giordano

Reputation: 371

found the solution, just add img-responsive class, inside the <div class="col-lg-4"> tag

making it <div class="col-lg-4 img-responsive">

the image stays 'intact' now no matter how the browser screen are re-sized, cheers!

Upvotes: 4

ridecar2
ridecar2

Reputation: 1957

At the moment you are using top: 170px; left: 341px or saying go 341px in from the left and 170px down from the top. If you position it using bottom and right instead of top and left, then it will anchor to the bottom right corner and you will be saying "So many px from the bottom and so many from the right"

So instead of:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />

Have something like:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; bottom: 50px; right: 19px" />

Change the numbers to suit but note the top is now bottom and left is now right

Upvotes: 1

Related Questions