CODEWITHSUNDEEP
imagetwitter-bootstrappositioning
user2281547
user2281547

Reputation: 11

Twitter Bootstrap: Image positioning

I am customizing my website using Twitter Bootstrap. I am trying to insert an image positioned as the top layer, is located slightly "outside of the container", and can responsively resize while staying proportionate / in relation to the other elements. I would like to use position: relative, but the image seems forced into a box within the container. When I use position: absolute, the image displays correctly at first on my web browser, but it does not behave as intended when the screen is resized.

Can anyone help me figure out a good solution to this issue?

HTML: I do not have the image contained within it's own , but is still located within the overall . Here's the code:

<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">

CSS: Here's my custom css. 

img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}

I'd appreciate any help finding a solution and/or help with my code / syntax. Thanks in advance.

Upvotes: 1

Views: 7290

Answers (1)

Dipak Telangre
Dipak Telangre

Reputation: 1993

To design responsive website using bootstrap you can use bootstrap layout. Fluid layout has class "row-fluid" and you can specify width in using class as span. this structure will be responsive. to test it just resize your browser window.

<div class="row-fluid">
  <div class="span2">
      <img>....</img>
        ......
   </div>
  <div class="span2">
  </div>
   ......

</div>

Bootstrap devide screen size in 12 part. we can use that part by giving 

class="span*"

* is no of part.

Upvotes: 1

Related Questions