Styling Headings And Body Copy

Now Bootstrap uses Helvetica Neue if it's available and then tries to look for Helvetica, Arial, and if nothing else is available, it uses the default CSS sans-serif font. Whatever might be there for your machine. Now, of course, you have the standard styles for headlines level one through level six, but what you might not be aware of is that you can also use the classes h1 through h6 and that will actually emulate a headline of that level. You can very easily say something like div, with a class of "h1" and I'll do a Headline 1 and it looks pretty much like the Headline Level 1. Actually, it uses the same style. You can use that to emulate that same style somewhere else or if you want to, for example, have a certain word look like the same font as your headline, you can do that by adding "span" class.

Analyzing Inline Text Styles

Bootstrap comes with a few built-in styles for traditional inline elements. A lot of these are going to be implementations of existing HTML tags that you're already using, so you just write them how you would normally, but you just have to notice that Bootstrap is actually modifying some of those styles. That means that, if you're going to be updating those styles with CSS, you have to address what Bootstrap has already done to them. Using some of these are also going to bring up some important semantic differences between the different tags.

Modifying Alignment Transformation And Addreviations

some of the other utility classes that you get with Bootstrap. Now first, Bootstrap comes with a series of alignment classes for text elements. This is the type of thing that you may commonly add to your stylesheets, but Bootstrap gives you a class that you can add to your HTML elements, and they have quite a bit of specificity.

Using Blockquotes

Bootstrap does a nice job of styling blockquotes for you, and it provides a class to reverse the alignment of it.t indents it nicely, makes it a little bigger, and it adds this nice, great border to it. Now those are all things that if you are overwriting your styles with CSS, you'll need to remember to take out.

Working With List Styles

HTML has three different types of lists: unordered lists for items in no particular order, ordered lists where the order of the items has relevance, and definition lists for dictionary-type definitions. If, for some reason, you want to turn off styling in a list, you can add the list unstyle class to a list element. But notice that it only affects one of the levels. So if you had any sublevels you would have to add that list-unstyled class in this other section as well. You can also make lists appear in-line as opposed to their default block style, and Bootstrap will add a little bit of padding to it. Just add a class of list-inline it gets rid of the bullets, puts them side by side, and adds a little bit of padding in between each item. For definition lists, there's a really nice option for making them appear in a horizontal layout. All you have to do is add a dl-horizontal class.

Styling Code

Bootstrap comes with a few styles that can help you format code. Now most of these are going to be style implementations of existing html tags. Now just remember that if you do want to use html code you're going to have to escape the angled brackets. So you would have to do "&"lt; and then "&"gt;.

Styling Headings And Body Example Code

            <h1>Headline 1 <small>Secondary Text</small></h1>
            <p>Example <span class="small">Example</span>Example <span class="h1">Example</span> Example
            </p>
        

Inline Text Styles Example Code

            <h1>Headline 1 <small>Secondary Text</small></h1>
            <p>Example<mark>Example</mark>, <strong>Example</strong> <small>Example</small>. <b>Example</b>Example<s>Example</s> Example <del>Example</del> <ins>Example</ins>Example<u>Example</u>Example</p>
        

Alignment Example Code

            <blockquote class="blockquote-reverse">
            <p>Example</p>
            <footer>Example</footer>
            </blockquote>
        

Blockquotes Example Code

            <h1 class="text-capitalize">Headline one</h1>
            <p class="text-left"><abbr title="Example" class="Initialism">Example.</abbr>Example</p>
        

List Styles Example Code

                <ol class="list-unstyled">
                <li>Example</li>
                <li>Example
                <ul>
                <li>Example</li>
                <li>Example</li>
                </ul>
                </li>
                <li>Example</li>
                </ol>

                <h2>Example</h2>
                <ul class="list-inline">
                <li>Example</li>
                <li>Example</li>
                <li>Example</li>
                </ul>

                <h2>Example</h2>
                <dl class="dl-horizontal">
                <dt>Example</dt>
                <dd>Example</dd>
                <dt>Example</dt>
                <dd>Example</dd>
                <dt>Example</dt>
                <dd>Example</dd>
                </dl>