To illustrate use of Bootstrap, which is included on this site, here are a few buttons that are styled with various bootstrap classes. (Note: the buttons do nothing!)
Hour 3: Build Your First Bootstrap Website with the Basic Template
Doing this one backwards - another training course I'm taking had me using Bootstrap, so I'll present a page that I created using Bootstrap, and then the same page without Bootstrap. It is only slightly more than the basic bootstrap template page, but
the original is using the Bootstrap grid. Obviously without it, the page looks vastly different!
This is a tribute page for Digital Equipment Corporation founder Kenneth Olsen,
Listing 5.5 - HTML for Columns That Don't Float Correctly. This page might display poorly on a small device.
Listing 5.6 - HTML for Columns That Don't Float Correctly. This page has clearfix to resolve small screen display.
The clearfix examples are above, Listing 5.5 & Listing 5.6
Test nesting a grid inside another column. Create a simple three-column layout, and then divide the first column into three more columns using a nested row.
See example here.
Open your website in your HTML editor, and add a grid layout to the content. If you haven’t already planned your layout, then plan for at least two device sizes—extra small and either small or medium. Then set the columns using the small or medium classes.
Don’t forget to offset or move columns that aren’t positioned exactly as you’d like them.
See example in my Tribute page project. Notice how there are empty columns when the page is viewed on a wide screen, and as the screen is narrowed, the empty columns are hidden
and the text fills the screen width.
Hour 6: Labels, Badges, Panels, Wells, and the Jumbotron
In This Hour:
How to add extra information to elements with labels and badges