Div not centering at certain width (bootstrap)

Div not centering at certain width (bootstrap)
0

#1

Hi,

I’m having a problem with a div that won’t center at a certain range of window width. It actually even goes outside the container. I’ve checked and it’s specifically from 768px - 991px. All other ranges, it’s fine, but in this range it goes crazy. I’m sure this is a pretty easy fix, but I’ve tried searching for the answer to this problem with no results. I’m guessing I just can’t word it right.

Maybe some of my styling is interfering with bootstrap?

Here is the link to the project - https://codepen.io/sk1995/pen/qXMpoQ


#2

try using bootstrap v3 at your css setting


#3

It worked. Thank you.

Could you please explain why it worked and what was the problem?


#4

to use bootstrap, you need you put certain keyword as your class name.

It seems that the keyword you put belong to bootstrap v3 and will give different result if applied to bootstrap v4

bootstrap v4 is newer version, but still in alpha phase. I’d recommend you to stick with v3 for now


#5

Okay. Thanks for the info. I shall stick to v3 for now.


#6

The grid is working fine but your images’ width are overflowing (because they are not fluid). If you want to use Bootstrap 4, use just one row and “col-auto”, instead of “col-md-4”, to have the columns adjust to the content inside of it. Then, to center the content, you can use justify-content-center and text-center.

      <div class="row justify-content-center text-center">
        <div class="col-auto">
          <img src="https://image.ibb.co/mqi28a/codecademyportfolio_thumbnail_Cut.jpg" />
        </div>
        <div class="col-auto">
          <img src="https://image.ibb.co/jGMB1v/KP_THUMBNAILcut.jpg" />
        </div>
        <div class="col-auto">
          <img src="http://via.placeholder.com/250x141" />
        </div>
        <div class="col-auto">
          <img src="http://via.placeholder.com/250x141" />
        </div>
        <div class="col-auto">
          <img src="http://via.placeholder.com/250x141" />
        </div>
        <div class="col-auto">
          <img src="http://via.placeholder.com/250x141" />
        </div>
      </div>

It works with Bootstrap 3 'cause it uses display:table for its .row class, while Bootstrap 4 uses flexbox and they act differently with non-responsive content (like your images).