• Monday , 25 May 2020

Let’s learn Bootstrap 4

Code Canyon
https://i.ytimg.com/vi/T-Pq7WK6m9w/hqdefault.jpg



I’ve used Bootstrap 3 a fair amount, but I’ve just started scratching the surface with Bootstrap 4. They’ve changed a lot of things. I want to know what I’m doing before I actually do a full tutorial on it, so I’m going live while I play around with it and try to figure it out!

This will be a real behind the scenes look, as I’ll be reading their documentation as I build a layout from PSD that I’ve found.

You can find the PSD that I was using here: https://freebiesbug.com/psd-freebies/mogo-free-one-page-psd-template/
Thanks to Alexandr Karsakov for the awesome layout, you can find more of his work on Behance – https://www.behance.net/laaqiq

New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass

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-powell/

Original source

3d Ocean

Related Posts

27 Comments

  1. Kevin Powell
    June 21, 2019 at 16:56

    Thanks for all of those who turned out live for this (and those watching the replay of course!), and sorry for the technical difficulties that I had at the start, I'm new to this whole live streaming thing!

    Please let me know if you'd like to see me do more of these, and what type of things you'd like to see me cover when I go live again!

  2. A W
    June 21, 2019 at 16:56

    SHUT UP REY and go learn Java

  3. Md. Jane Alam
    June 21, 2019 at 16:56

    I again say… I love you from my core of heart…..

  4. Banjo De Koya
    June 21, 2019 at 16:56

    great tut but next, try remove ur image and make the screen a bit bigger. I had to enlarge my screen and still couldn't see the tree / semantic structure of files and folders i mean.

  5. Роман Голендухин
    June 21, 2019 at 16:56

    Hey Kevin ✌🏻 when’s the sequel?

  6. nota youtuber
    June 21, 2019 at 16:56

    No-gutters class would have fixed the gutter problem in the end right?

  7. Роман Голендухин
    June 21, 2019 at 16:56

    Hey Kevin, Where is the video for Jekyll????😕

  8. Роман Голендухин
    June 21, 2019 at 16:56

    Hey Kevin, Where is the video for Jekyll?

  9. Nadim Hasnat
    June 21, 2019 at 16:56

    great work dear….love it.

  10. Md Shahid
    June 21, 2019 at 16:56

    Awesome Kevin..
    I really like your video..😆😄

  11. Zahid Karim
    June 21, 2019 at 16:56

    Greetings, I really enjoyed the whole work flow. But can you please tell me about the use of https://gruntjs.com/ settings for the sass pre-processor as well as if I need to use PUG for the HTML? Can you help me out with it?

  12. Zahid Karim
    June 21, 2019 at 16:56

    Greetings, I really enjoyed the whole work flow. But can you please tell me about the use of https://gruntjs.com/ settings for the sass pre-processor as well as if I need to use PUG for the HTML? Can you help me out with it?

  13. Nhlalala Masebenza
    June 21, 2019 at 16:56

    Sweet video man! A quick one… what code editor are you using here?

  14. Mikael Arguelo
    June 21, 2019 at 16:56

    How did you make the jellyfish pic overlap on the grid. It took 2 rows from top to bottom how to do that 1:25:36

  15. Ahadul Islam
    June 21, 2019 at 16:56

    Hey bro. Great video. Do you know how to active mobile menu in bs4 at a specific width

  16. Imran Shaikh
    June 21, 2019 at 16:56

    Can you send me the whole project to razaviimran@gmail.com

  17. Imran Shaikh
    June 21, 2019 at 16:56

    I really can't understand which file we have to include & which not

  18. JimxxZE
    June 21, 2019 at 16:56

    Just a tip, cuz i watched you several times switching to bootstrap documentation to find the desirable classes & writting the whole class name each time you want to add a specific class to an html element, in brackets and VSCode that i use, there are extensions that scan css linked files and provide you in html all the available classes each time you start writting their names.This way it gets mutch easier to find the desirable class for your elements! I googled it and i found css-spy, an extension for atom for this job. check it out if you want. https://atom.io/packages/css-spy

  19. JimxxZE
    June 21, 2019 at 16:56

    What if i don't want to dive into SCSS and do all this stuff with extra SCSS files & compiling, and just make a new css file, place it right under bootstraps link in html head, and change bootstrap's compiled css styles right in there? It seems easier to me, though i guess you miss the extra functionality of scss, but in some cases it might be easier for begginers.
    P.S. great videos, thank you!!

  20. Tarantoshka S
    June 21, 2019 at 16:56

    This is awesome , thank you very much .. Next time I will definately visit your stream

  21. lancsFrogger
    June 21, 2019 at 16:56

    excellent. kind of like watching a decent bootstrap developer knock up a bootstrap based page (except u learn quite a bit about how bootstrap works in the process)

  22. Roman Filenko
    June 21, 2019 at 16:56

    Thanks for live coding session, you're doing a good thing, please keep on going:)

  23. Richard Craig
    June 21, 2019 at 16:56

    sadly, didn't catch this live, but triple thumbs up bro ! great tutorial..keep it going…love it !!!!!!!!!!

  24. Pag Gap
    June 21, 2019 at 16:56

    No image file to follow? Thankk 😀

  25. Brian Dennis
    June 21, 2019 at 16:56

    I really enjoy your videos! I am uncertain on your knowledge of backend dev and some frameworks like nodeJS, Angular, or task runners like gulp/grunt although gulp is far better!! 🙂 but I am wondering if you'd want to try and make a project utilizing these technologies nothing hardcore or to intensive but just something I'd love to see!

    WebTorrent : https://webtorrent.io/intro
    WebRTC : https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
    WebRTC : https://webrtc.org/native-code/native-apis/

  26. Dean H
    June 21, 2019 at 16:56

    Video starts at @11.10

  27. Habeebi Mohamed
    June 21, 2019 at 16:56

    Boostrap 4 is stable now?

Leave A Comment

You must be logged in to post a comment.