Having trouble with grid system in boostrap - col-xs-12 doens't work in small screen devices

Having trouble with grid system in boostrap - col-xs-12 doens't work in small screen devices
0

#1

Hey, I need some help with bootstrap. My nav-menu and the first section are set to 2 columns in a row each. I need them to stack when screen device gets smaller. But it’s not working. Here’s the project. Thanks!


#2

I’m no expert in Bootstrap, but it looks like display: flex in CSS is interfering with Bootstrap classes. Try to remove it (and maybe replace col-md-6 with col-sm-6)


#3

If @jenovs is correct about Flex being the culprit, you may want to look into the alpha release of Bootstrap 4 (or just nuke flex and rely on BS only for layout). BS4 adds Flexbox support. BS3 and below has not been compatible with flex.


#4

Yes, flexbox was the culprit. I was using it because I was having trouble aligning items vertically. Now the grid is working but I still struggling to align my text in the middle of the box automatically.