I cannot recommend Semantic UI enough, and in particular the React port of Semantic. Its a very complete, themable and quality piece of toolkit. After using it I could not understand why I've been using bootstrap before.
I'd recommend neither. CSS has caught up, and the two large problems that these frameworks solved no longer exists: grids, and differences between browser implementations.
Additionally, semantic UI deserves the scorn of a thousand linguists for the most misleading (unsemantic? or even antisemtitic?) product name ever: there is nothing semantic about class="col-xs-12 col-m-3 col-x-1"
semantics aside (hehe), you described the grid class of bootstrap, not semantic ui. In semantic its something like "ten wide column" or "four wide column" etc.
I rarely use semantic for its grid though. Those are now easy problems to solve. I use it because it gets me a clean and pretty UI I can theme later to adjust the specifics (or get someone who is better at design than me to do it).
I used Semantic-UI and was really impressed but its size was a show-stopper for me. Another thing is although it looks good on desktops, mobile often seems like an afterthought and they do not even have a responsive menu, which means you have to write two menus or resort to some hack if you need a mobile-friendly menu. This issue has been open for forever and the authors have yet to come up with a favorable response. I've since switched to Bootstrap 4 alpha and I'm looking to jump to Bulma now due to some limitations.
You can compile it to include only the components you actually use. I don't use stock semantic myself. I use the react port which is a separate project which uses just the CSS of the semantic library (and again can be compiled to include the css/theme you want).
I've never heard of bulma until this post so I will give it a look.
http://semantic-ui.com http://react.semantic-ui.com