Lessons 77 and 78 – Complete 2020 Web Development Bootcamp

Lesson 77 – Containers

Containers are a basic building block for a lot of Bootstrap elements.

Containers are required when using the Bootstrap default grid system.

This is the Bootstrap documentation page on containers.

This is my codeply demonstrating a container and a fluid container.

Lesson 78 – Bootstrap Buttons & Font Awsome

Bootstrap has a number of custom button styles that you can incorporate into the html of your web site.

For example:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

The full list of various button types can be found here.

You can incorporate Font Awesome icons into your site by first getting the free Font Awesome CDN script from here and pasting it into the <head> of your html.index page as a script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>

You then go to fontawesome.com and searching for the icon you want to use. Click on that icon and copy the html code.

Then paste that html code where you want to have the icon appear. This example will make a Font Awesome apple icon appear in the “Download” button element.

<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>