Question

I'm trying to center a styled responsive image, but it doesn't seem to work. After removing classes one-by-one, I'm finding that my class "portimage" seems to be breaking the responsiveness.

I don't want the images to be larger than 700px and I'd like them to have a light border around them.

Here's the code:

<div class="row mtmini">
        <div class="col-lg-12">
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg">
            <br>
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg">
            <br>
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg">
        </div>
</div>

Here's the CSS for the class "portimage":

.portimage {
max-width: 700px;
border:1px solid lightgray;
}

Sorry if this is a dumb question--just starting out. I tried searching for this but I'm not finding a solution that addresses styling the image beyond centering and responsiveness. Thanks in advance!

Answer 1

It should be working fine, please double check if you have your CSS link to bootstrap properly inserted. Also, if you're using build tools like gulp/grunt try restarting the watch task.

Also, is 'mtmini' class adding any styles to the 'row' div?

Bootstrap 3: centered responsive image with styling

1 个答案: