Why " col-xs-* " should be in a div and not directly in a button instead

i’m not asking to review my code here, i am just asking about the “col …” class. i noticed that when i added it to the button it didn’t change the size, and it should be in the div. so why ??.
Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side

A button is an inline element you would put in a column, it’s not a structural element that you put things into.