Bootstrap comes with some excellent typography and helper classes and you’re always better off just using their existing class definitions where they do what you need. But when they don’t, you can always write your own CSS. You just need to remember that your style definitions belong …

• in the page header,
• after the last external stylesheet is called,
• and inside of <style> tags.

Basic workflow: what works for me, for small changes, is to use the Web Developer Toolbar’s CSS editor to fine tune my custom CSS definitions and make sure they’re working, and then copy those definitions into my HTML as I get them worked out.

We didn’t talk much about the difference between “block level” elements and “inline” elements, but if I’d spent more time prepping for our HTML adventure today I would have been ready to. I figured out after I stopped lecturing that the problem was that <cite> is an inline element. Which means we can tweak the font and color and background, but not the alignment or the line height. To control alignment, we need a block level element, like a <div> or a <p>. So <div class="text-right">...</div> works just fine to implement Bootstrap’s alignment class. Or we can control the alignment ourselves by by referencing a class, say <div class="citation">...</div> and then defining that class in your page header:

<style>
   .citation {
       text-align: right;
    }
</style>

You should also take a look at the Bootstrap post.

We didn’t talk much about the Bootstrap Grid, but that, too, is both handy and powerful. If you want to narrow your center column a bit, you can use the grid to say that you’d like an empty column that is 2/12ths wide, a column of content 8/12ths wide and another emtpy column 2/12ths wide. As long as the columns add up to 12, you can arrange them however you’d like. You just define a row, first, and then your three columns. So this:

<div class="row">
   <div class="col-lg-2">&nbsp;</div>
   <div class="col-lg-8">This is my content column</div>
   <div class="col-lg-2">&nbsp;</div>
</div><!-- /row -->

Will get you something like this:

Except that I added some background coloring so you could see what you’re looking at. If you want blue backgrounds, too, you’d actually need class="col-lg-2 bg-info". But I bet you don’t.

So take a look at your page. Consider sketching out how you think you actually want it to look. And then take a few stabs at getting the layout closer to what you’ve been picturing. Everyone has a different challenge, layout wise. But if you are frustrated with something about the way your page is looking, let me know what’s going on and I can point you in the right direction.