Having issues aligning text - Random Quote Machine

So I’m working on aligning my text in bootstrap for my random quote machine project. However, I seem to not be able to align text for the “author” row.

Link to my codepen:

Also I’m mixing flex box and bootstrap styles. Maybe that is it. Any tips for making this a bit more clear?

I would recommend ditching Bootstrap altogether. It has its uses but often times (especially for beginners) it makes CSS which is already extremely difficult to debug and work with, even more difficult to debug and work with.

One way you can fix it is by adding justify-content: center; to #author-box.

Flex-box and CSS grid can accomplish a lot of what people use Bootstrap for. If you need a drop in UI and you like Bootstrap, then sure, but if you’re using it for the grid system, it is significantly more complicated, and more brittle than just using flexbox or css grid.

Thanks! I thought that bootstrap is supposed to be what we should be working towards using? Do you prefer standard CSS instead?

I think Bootstrap is still widely used so it is important to learn, but I think knowing how to work with plain old CSS, just like plain old JavaScript, is actually more important. Once you have a really good grasp on CSS, then picking up bootstrap is easy.

There will be jobs out there that knowing Boostrap is a plus, but you still need to have working knowledge of CSS, and there are many more that will look for knowledge of just plain CSS.

1 Like