Krystyna Krystyna - 7 months ago 19
HTML Question

Bootsrap column width wider then image

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>

<div class="container">
<div class="row">
<div class-="col-md-12">
<form>
<div class="form-group">
<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>
<div class="col-md-3">
<img src="http://placehold.it/130x130" alt="avatar" class="img-circle">
<div class="caption">Avatar</div>
<button type="button" class="btn btn-primary btn-md outline btn-block upload-btn">
<span class="glyphicon glyphicon-plus"></span>Upload photo
</button>
</div>
</div>
</form>
</div>
</div>
</div>




Answer

Bootstrap's behavior is appropriate based on your markup. From the Bootstrap documentation on the img-responsive class [link]:

This applies max-width: 100%;, height: auto; and 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 img tag.