It helps to remember that:
1. #RRGGBB
2. B + G = Cyan
3. R + B = Magenta
4. R + G = Yellow
5. Equal amounts of all three channels = Gray
6. #000000 = Black
7. #FFFFFF = White
Think of the rgb color space as a cube, with each of Black, White, Red, Green, Blue, Cyan, Magenta, Yellow on the vertices. Then you define any hex color as point somewhere in this cube and it's pretty easy to imagine what it'll look like.
I'm not defending layervault's overuse of the concept, but one of the (many) ways to achieve typographic hierarchy is to map the contrast of an element to the relative importance of that element. Look at it this way: Without even reading it, you know that the gray text is supplemental or auxiliary information, because it has this visual cue.
Of course, sacrificing readability to achieve this definitely isn't the best MO.
In this situation, it's probably best to differentiate between the two with color—but you're right, it's silly to lose the already-established visual cues.
The difference between bootstrap and a CMS is that bootstrap doesn't mess with any wysiwyg interface bullshit. It's just a pre-fabricated way to architect your html, css, and javascript, and the default styling makes things look very professional.
Something to think about: web browsers natively display content in a responsive fashion. Any page that doesn't display responsively is that way due to constraints put on it by the developer. It's great that people are finally embracing the fluid nature of the web rather than trying to pidgeonhole it into the realm of print design.
