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="" alt="Doctors at the operationg table"></a>
  </div><!-- .row -->
.myimage {


Or use .mx-auto

    <div class="mx-auto">
         <a href="#"><img src="" alt="Doctors at the operationg table"></a>

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 class="mx-auto text-center">

.text-center is defined in bootstrap

Are there any good books or guides for bootstrap?

Official bootstrap site is all you need

For CSS -
For Components -
For JS plugins -

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.