Why does this part of my pomodoro project go haywire when I try to change the column size for different breakpoints using Bootstrap 4?

This is the beginning of my porodoro timer project here https://codepen.io/BLBaylis/pen/Oxpdye?editors=1100.

I’m trying to make the project responsive and so want to change the two divs containing the buttons and their associated times from .col-3 to .col-xs-4 and col-sm-3. This should mean they are 4 columns when on an xs screen and 3 on all others if my understanding is correct. However, they instead take up a full row when I add the .col-sm-3.

The ids of the two divs I’m trying to change are #time-length and #break-length. I will presumably change the sizes of the any sub-columns too, but I have not yet made it that far.

If anyone can show me the cause of this it would be greatly appreciated as this is giving me a headache.


Hey. There’s no “xs” breakpoint in Bootstrap 4. They removed it in favor of a more generic “col-(n)”. So your classes should be “col-4 col-sm-3”

1 Like

Damn I noticed that that added xl too, but I must have breezed over the removal of xs in the documentation. Thanks, that was giving me a lot of grief!

1 Like