Bootstrap styles

Shannon's Allen

Bootstrap does a lot of things for us. One is that it gives basic HTML tags a standard, professional look.

What tags look like in BS

BS makes every HTML tag look good, without your adding any classes. Here's some code:

Basic stuff, no CSS classes added. Here's what it looks like:

The page looks pretty good, without doing anything special. You can check it out.

This is how you'll use Bootstrap most of the time. Just type your stuff as normal, and let Bootstrap style it.

Basic styles

Bootstrap has a bunch of complex pieces, but it also has some basic CSS classes that do Nice Things. Let's check out a few. The deets are in the official docs.

Typography

Typography has to do with fonts. BS has a bunch o' typography classes.

Make a paragraph stand out by adding .lead.

It looks like:

Renata is a mellow doggo.

Here's a cool one for abbreviations.

Here's what it looks like. Hover your mouse over "HTML".

Learn HTML for a better life.

Another one:

Moze has a great big bear.

Colors

BS gives you classes that let you use colors consistently across your site. For example:

You won!

Danger! Sloths approaching! Slowly.

Check the docs for more.

Right. It's a bad idea to use blue for text that isn't clickable.

Borders

You can add borders to just about anything.

Doggos are the best animals.

It needs some padding, but we'll fix that later. Remember that padding is the space between the border and the text.

You can put borders around divs. That's good for grouping content:

You can add rounding to the border corners.

Rounded border.

Spacing

You can add margins and padding easily. Check out a border example again:

Doggos are the best animals.

That's OK, but I'd like to add some padding. I could do this:

Doggos are the best animals.

For more padding, increase the number after the p-:

Doggos are the best animals.

Cool, no?

Margins, the same thing. Remember that margins are outside the borders.

Doggos are the best animals.

Change the number after the m- to change the border size.

You can set spacing for individual sides, too. For example, mr-2 sets the right margin. mt-4 sets the top margin to be twice as large.

Check out the docs on spacing for the awesome deets.

Rounded borders work better with spacing. Here's a rounded border that looks pretty good.

Rounded border.

For really rounded:

Really rounded border.

Mess with the rounded-pill class. You'll be glad you did.

Tables

Just add the table class to the table tag, and get Nice Things.

Dog	Weight (kg)	Happiness (1-10)
Oscar	40	10
Renata	14	9
Rosie	3	10

Add more classes to change the heading, and add zebra-striping:

Dog	Weight (kg)	Happiness (1-10)
Oscar	40	10
Renata	14	9
Rosie	3	10

Check the docs for more awesome table stuff.

Images

You can do all sorts of things with images. Like this:

The p-1 added padding, so you could see the border.

Sometimes text gets too close to floated images. Check this out:

The text seems a little too close to the image. This is better:

How to do that? Here's the code.

In the classes, ml means margin left. mb means margin bottom. Why 4? Just because. Play around until you get something you like. There's a formula for what the 4 means, but I find it easier just to mess around.

You remember we talked about clearing floats? That's when you want content to start below something that's floated. BS has a clearfix class for that, that I used in the last paragraph, like this:

The class is on the last element that respects the float. You might never need it, but clearfix is there if you do.

Here's a cool one:

Nope. Check out the image URL. It's the same in the last two examples, but the image is round in the second one. The rounded-circle class did the rounding.

Yes. Yes it is.