• Saturday , 20 October 2018

Build a website with Bootstrap 4 – Part 4: Styling the Navbar and Hero

Code Canyon

I wanted to start this one off by tackling the navbar and hero, but realized I never set up my typography, so I start with that first, meaning we get to dive back into the Bootstrap variables and custom files a bit in this video.

Once the typography is looking good, it’s time to tackle the navbar, which is SOOO much easier with Bootstrap 4 compared to 3! Then there is some playing around while setting up the hero, and that’s it!

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powellom/KevinJPowell

Original source

3d Ocean

Related Posts


  1. Reereenz
    November 7, 2017 at 12:14

    You are amazing and finally somebody who shows the whole process with up to date information. Do you have anything on using API's ie. Linking to behance or Instagram? Thank you so much!

  2. James Pike
    November 7, 2017 at 12:14

    Hi Kevin, thanks for the vid, with a mobile first approach how would you put a fallback in for ios with background-size: cover;?

  3. Asa W Reviews
    November 7, 2017 at 12:14

    I find your videos illuminating, I've been coding from scratch for a long time and find that you present some of the latest design ideas. You did however show a typography method that totally baffled me for many hours. Your use of Adobe Typekit seemed straight forward enough, but no matter how I tried I could not get the Banshee font to show; and since I knew nothing about Typekit beyond what you presented in your video, I was extremely frustrated. Long story-short: I found that Typekit is limited to the domains you list when you create the kits; and since on my local server AMPPS, I usually type the address as: – your Typekit would not work. In the end, typing in the address: localhost – resolved my issue; it was a learning experience I did not anticipate, but thanks anyway. So, could I recommend that in your presentations you might want to include that bit of information about Typekit in future videos using your kits?

  4. Jeffrey Librebowski
    November 7, 2017 at 12:14

    love the videos, are you Canadian by chance?

  5. Rhavila Medeiros
    November 7, 2017 at 12:14

    Awesome as always!

  6. Ryan Tunstall
    November 7, 2017 at 12:14

    Your tutorials are very helpful and I really appreciate your teaching. Would you consider doing a series on creating a WordPress website from scratch using CSS Grid and Flexbox and SASS, highlighting best practices with using MAMP Pro (localhost) and Codekit or Prepros. Starting with setup/installation all the way though site migration to a live server. I am sure this would be time consuming and I am very willing to help support your efforts. Thanks for all that you do!!

  7. Ludovic Guénet
    November 7, 2017 at 12:14

    I was waiting for it 🙂 super pro tut buddy! keep up the good work! Thank you !!

  8. Saman de Silva
    November 7, 2017 at 12:14

    Thanks Kevin. I was waiting for this episode!!!

  9. Mad Saip
    November 7, 2017 at 12:14

    Nice video! How do you make it so that when changes are made, the preview ease the animation for the change to take place?

Leave A Comment

You must be logged in to post a comment.