Problem Centering Image Using Bootstrap Classes

I’m using center-block class for the image nested in a container-fluid class. Why won’t the image center?

Missing closing brackets in your jumbotron div

<div class="jumbotron"

Thanks. But that didn’t address the issue.

I am not seeing any definition for the CSS class ‘center-block’ using Chrome dev tools.

You can do something like this instead

  <div class="row">
    <div class="myimage">
        <a href="#"><img src="http://rogerhatfield.net/tribute/or-cardio.jpg" alt="Doctors at the operationg table"></a>
    </div>
  </div><!-- .row -->
.myimage {
  margin:auto;
}

Result:

Or use .mx-auto

    <div class="mx-auto">
         <a href="#"><img src="http://rogerhatfield.net/tribute/or-cardio.jpg" alt="Doctors at the operationg table"></a>
    </div>

Bootstrap v4 does not have center-block anymore.
Use mx-auto instead.

mx-auto is just a class name for doing margin:auto (similar to my above post)

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}
1 Like

Alright! Thanks so much. Both suggestions worked, but I am trying to do it without custom styles so now I know to use mx-auto instead of center-block. I’m new to Bootstrap so I had no clue it was deprecated. Thanks again!

Simply add text-center class on your div.mx-auto

<div class="mx-auto text-center">

PS:
.text-center is defined in bootstrap

Are there any good books or guides for bootstrap?

Official bootstrap site is all you need

For CSS - http://getbootstrap.com/css/
For Components - http://getbootstrap.com/components/
For JS plugins - http://getbootstrap.com/javascript/

These links contain all you need to know about bootstrap.

^^^ That’s for version 3.

The issue is OP is using version 4, so some of these BS3 classes are now gone and replaced with new ones.