Bootstrap 3 Code Blocks & Typography Tutorial by Bootstrap CSS Girl


Hello Everyone! Welcome to my Bootstrap typography tutorial! All HTML heading tags h1 through h6 are available on Bootstrap. Use the small tag to create a lighter secondary text within the heading tag. In this example, you can see all of the display outputs for h1 through h6 along with the smaller text. H1 is 36 pixels. H2 is 30 pixels. H3 is 24 pixels. H4 is 18 pixels. H5 is 14 pixels, and H6 is 12 pixels. The default font size within the body tags is 14 pixels. Use the lead class within your paragraph tag to make some text stand out. This would be the output rendered by that code. Use the mark tag to highlight some text. This would be the output rendered by that code. Here are 5 tags for stylizing your text. The s tag draws a line through text that no longer applies. This would be useful if you were updating your website and wanted users to take note that some text that they may have previously read is no longer relevant. The u tag underlines text that you want to draw attention to. This could be used to underline key terms or important facts. The small tag is used for creating fine print. This could be used for copyright statements. The strong tag creates bold print. This is useful for making the most important text stand out against the rest of the paragraph. The em tag creates italicized print. This could be used for quotes or client testimonials. Here are some examples of the alignment classes within Bootstrap. For left aligned text, use the class text-left. For center aligned text, use the class text-center. For right aligned text, use the class text-right. For justified text, text that you would like to display as flush with both the left and right margins. Use the text-justify class. For no wrap text, text that you do not want to wrap to the next line. Use the text-nowrap class. Here are some examples of the transformation classes within Bootstrap For text that you would like to display in entirely lowercase letters, use the text-lowercase class. For text that you like to display in entirely uppercase letters use the text-uppercase class. For text that you want to display with the first letter of each word capitalized use the text-capitalized class. To create an abbreviation that the user can hover over to display the full word or title use an abbr title tag. To make an abbreviation appear smaller than the rest of your text, add the class of initialism to your abbreviation tag. To create a block quote, which is a way to make a quote stand out, use the blockquote tag. Now, you will learn about some of my favorite bootstrap elements. You have seen me use some of these in my previous examples. The code tag is for wrapping sections of code that you would like to display inline. Inline means on the same line. Within your code tag, be sure that you escape your code by usingin place of the greater than symbol>The kbd tag is for user input. Wrap that text that you want to appear as user input with the KBD tag. In my example, I have wrapped the password reset in KBD to show users to press that button. If you need to display blocks of code, use the pre tag. Just like the code tag you must escape your code within the pre tag. If you want the block of code to be scrollable, you can simply add the pre-scrollable class to pre. Wrap variables with the var tag. Thank you for watching this tutorial on bootstrap typography. Please subscribe to my channel Bootstrap CSS Girl for more Bootstrap tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *