How to expand rows in Bootstrap when you resize the browser

I’m trying to create a Checkerboard. I made this: https://codepen.io/El_Escandalo/pen/mdJGBMM
What is frustrating me is that I can’t figure out how to make the “board squares” remain square- when you resize the browser the columns expand but not the rows. How can I make it so that the squares remain square?
(I realize that CSS Grid would probably be the better way to make a checkerboard but I was challenged to do it in Bootstrap so I’d like to figure out how, given it’s got to be pretty easy)
Thanks

You can do that by make it responcive
https://www.w3schools.com/w3css/w3css_mobile.asp

1 Like

Is this what makes it responsive?
<meta name="viewport" content="width=device-width, initial-scale=1>

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.

If you are still confused with how to use CodePen, please read the official documentation.

Also, in HTML, there may only be 1 element with any given id. It has to be unique across your page.

Hope this helps

1 Like