I have a column with a 230x320 placeholder class='img-responsive' image inside it. the image is 230x320, but the column width is col-md-3.
The issue is that the image width is smaller then the column width, so space is left over to the right. Also, when the column is changed to col-md-2, the image turns responsive, thus displays the image smaller than the 230x320 size.
Is there a way to keep this column responsive, but decrease the width of the column, but keep the default bootstrap padding on the right?
Here is the image like so: http://i.stack.imgur.com/PBtjP.jpg
I have added the snippet code, but bootstrap is not working, maybe I have my links where they are not suppose to be?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<label for="profilephoto" class="col-sm-2 control-label custom-label">Profile Photo</label>
<div class="col-md-3 profile-img"><img src="http://placehold.it/230x320" alt="profile-img" class="img-rounded img-responsive"></div>
<img src="http://placehold.it/130x130" alt="avatar" class="img-circle">
<button type="button" class="btn btn-primary btn-md outline btn-block upload-btn">
<span class="glyphicon glyphicon-plus"></span>Upload photo
Bootstrap's behavior is appropriate based on your markup. From the Bootstrap documentation on the
img-responsive class [link]:
display: block;to the image so that it scales nicely to the parent element.
The behavior you need is not
max-width: 100%; but rather
width: 100%;, which will scale the image to the full width of the parent element.
This codepen demonstrates the override, however in the final product I recommend adding a custom CSS class to the