Problem Centering Image Using Bootstrap Classes

Problem Centering Image Using Bootstrap Classes
0

#1

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


#2

Missing closing brackets in your jumbotron div

<div class="jumbotron"

#3

Thanks. But that didn’t address the issue.


#4

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:


#5

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;
}

#6

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!


#7

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

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

PS:
.text-center is defined in bootstrap


#8

Are there any good books or guides for bootstrap?


#9

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.


#10

^^^ 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.