12 column grids is a convention and it is just that, it's not a standard.

The reason it exists is cause 12 can be divided by 1, 2, 3, 4, 6 and 12. So it is very flexible.

There are 10 and 16 column grid systems as well which have their own advantages. The initial versions of Bootstrap used to have a 16 column grid. You can create your grid logic in any way you want. It all depends on what you're trying to achieve.

But needless to say the 12 column system is easy to understand and works well for most layouts, and thus, is more popular. It only makes sense for a designer to know the quirks about it.

'Aligning items' as a general principle can help designs and layouts look the same, but even in a design that fits into a 4, 12, 16, or 24-column grid there may only be one or two edges where the alignment matters anyway.

The reason a 12-column grid is more popular than an 8 or 10 columns grid is because of the variety of ways it can be divided: into columns of 1, 2, 3, 4, 6, or 12. A 24-column grid would be even more flexible, but more things to count.

My suggestion is to toss out the 'grid CSS' and design with a grid in mind, but just make the divisions look good. Sometimes in a web layout some things are fixed width (like a sidebar) while other parts of the layout are fluid and can expand - so especially when making responsive design look good, only loosely follow the idea of a grid :)

Bootstrap - the downloadable zip file on their site, is great when you need to quickly get a site up and running for a demo or presentation or whatever.

Past that, for pixel perfect sites or something a bit more custom, Bootstrap can be / must be customized. You can do some of this via their config util on their site, but more so via their scss files (whatever their using now) such as adjust column widths, breakpoints, padding, color, etc...

Further to point 2 - if something has specific needs such a multiple part images or layered images - don't use bootstrap. You can use custom HTML / CSS for certain aspects of your site and then use bootstrap for the parts that are more standard.

This of course comes down to how good the developer is. You need to recognize when to use a framework and when not to. Just because a few pieces of a site aren't a good fit for a grid system or a framework, doesn't mean that system can't be used; it just means it can't be used for those parts.

The reason Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier. Bootstrap's grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.

I wrote an in-depth article on how the Bootstrap grid works, and Bootstrap 4 is a whole different animal because flexbox, and the new auto-layout columns which enables any number of columns across the viewport.

In my own opinion, I found it easier to nest elements using 12-column grid.