Having trouble with the grid: rows and columns don't work

I thought I might use 4 wells across my portfolio page and put one navigation button in each. I don’t want to show my code because I guess we aren’t supposed to. So here is what is going on. I’m just using a little “snippet” in an un-copyable form.

The div above my wells is centered but it ends with end-center
At first the buttons were all lined up in the center, as if the center were still in effect (which it was). I added a div at the beginning of the first section and an end-div at the end and now everything below that is left-justified.

But… I have used this code to try to make 4 little wells across the page:
div class="container-fluid"
div class="row"
div class="col-xs-3"
button class=“btn btw-default” end button
end-div
……………….
…………………
………………… the above 3 lines repeat 4 times to try to get 4 buttons each in its own well
.
end-div
end-div

Obviously something is wrong since, instead of being spread out across the page, my buttons are all lined up one under the other on the left side of my page.

What am I missing here?

Thanks!

You are surely allowed to show your code! (:

Have a look at this might help
second option is probably closer to what you require
col-xs-3 is really for when the pages is small like on a mobile if you are doing full screen for laptop and sizing down to a mobile you need the others too like col-lg-3 col-md-3 col-sm-3 col-xs-3
Anyway have a look at this and copy it and mess around with it
in reality when screen gets small you need to remove the 4 buttons add just one and have a dropdown menu
From my messing around in this i could not get 4 wells in a row only 3 thats why i didnt put top row into separate wells