img-circle going outside margin

Question

I've created an img-circle to be placed on the same row as a paragraph of text using two .col-xs-6, but my image is spilling over the margin of the container .

I have tried changing the padding to 0, but that didn't work.

I don't have any CSS styling for the img-circle currently.

<div class="container about">
     <div class="row">
          <div class="col-xs-6">
                 <p class="hello">Hello,</p>
          </div>
      </div>
      <div class="row">
            <div class="col-xs-6">
                 <p class="intro">text from paragraph here</p>
            </div>
            <div class="col-xs-6">
                 <img class="profile-pic img-circle" src="#"/> 
            </div>
      </div>

Answer 1

you need to use class .img-responsive in img , see Bootstrap Docs

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; , height: auto; and display: block; to the image so that it scales nicely to the parent element.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container about"> <div class="row"> <div class="col-xs-6"> <p class="hello">Hello,</p> </div> </div> <div class="row"> <div class="col-xs-6"> <p class="intro">text from paragraph here</p> </div> <div class="col-xs-6"> <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" /> </div> </div> </div>