Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4

Let's create a navbar and learn how bootstrap navbars work in the process. A navbar is the center of the sight. It means "navigation bar". By creating a navbar, we have completed one of the essential functions of a modern website. By using Bootstrap 4, we can create a fully functioning and customizable navbar in minutes.

Now that our navbar is finished, let's fill it up with social media links! We will be taking simple HTML links and applying a little bit of HTML into them to show links to Twitter, Youtube and Github, all perfectly centered and styled with pictures.

We will start with the hardest part of the course, creating a slideshow with bootstrap carousel. The bootstrap carousel is going to give life to our website, showing a comfortable and professional display of information to our site. 

There is still one thing we have to do to make the carousel work. After fixing the carousel, we will add a little more styling to it, giving it that final vibrant touch.

Just add some last minute details to finish our beautiful carousel. The carousel now makes the website look professional, and leaves a great impression on the user.

You may not know what cards are, but they are extremely useful. Cards are a creative bootstrap feature that allow us to display small content in the best way possible. You've probably seen bootstrap cards before!

Now that we know what cards are, let's create some for our site! These cards will be put in place of the links that we have on our site.

Bootstrap columns will prove to be very useful in making our site look amazing. The bootstrap grid system (what we use columns with) is basically bootstrap's claim to fame, and it is even more useful in Bootstrap 4. By putting things into columns, we can better organize our site.

Now that we know about columns, it's time to apply them to our site. These columns will give the user space (one of the 3 s's of design) and make the site look less cluttered and more professional overall.

We will now take the cards and finish them up. Our cards will finally be done and put into appropriate columns. We have taken two bootstrap features and used them together to show content in the best way possible.

The last element we have to style in our site is the form. Bootstrap 4 makes styling forms quite simple. This lecture will focus on styling text forms, as they are by far the most used.

The bootstrap grid system can be tricky, if you get stuck at any point, please refer to this lecture or the bootstrap docs.

Did you know that bootstrap gives us several different button styles? We can use these styles to communicate to the user what each button is for. Cool huh?

Make text look super legit by giving it a tag. A tag is simply a string of text assigned to a bootstrap element. You can add a take to a user's name who is an admin, stuff like that.

Just like at a sports game, the jumbotron is a big place for us to put in the main content of our site. A jumbotron is like a big card. Originally, the jumbotron was going to be in place of the carousel, but I decided to add both to the course instead.

Bootstrap may seem kind of boring. To give our websites personality, we will add themes to our bootstrap site from bootswatch. There are many websites where you can get bootstrap themes. Bootswatch just happens to be my favourite. If you want a more professional theme, there are many themes that you can purchase online as well.

This is just a quick reference (if you need it) of everything we learned about bootstrap in this section.