• Sunday , 5 July 2020

Bootstrap Grid – CSS Grids Series (part 13 – Footer)

Code Canyon

DevTips is a YouTube show about web design and development.

“HTML5 Basics” Playlist:

“CSS Basics” Playlist:

“How to build a professional website from start to finish” Playlist:


Follow the DevTips GitHub Page to get all the codez:

DevTips now has a twitter account:

Travis also tweets:

Original source

3d Ocean

Related Posts


  1. Zim O.E
    April 12, 2019 at 15:17

    Just watched the whole series again for a quick refresher, Mahn I miss Travis 🙁

  2. Adam White
    April 12, 2019 at 15:17

    This was great — thanks so much!

    April 12, 2019 at 15:17

    For the copyright area… for me, if I use your code, it exceeds the col-sm-12 width. And this is because of that inline padding you've put: padding:20px 0 40px;, which overrides the bootstrap's 15px padding for the sides. So it should be 20px 15px 40px.

  4. AleaRx
    April 12, 2019 at 15:17

    Can you give your opinion about a css framework called semantic ui?

  5. bharathitman
    April 12, 2019 at 15:17

    I had fun!!!! Thank you Travis

  6. Erik Gomez
    April 12, 2019 at 15:17

    Great vid Travis! I'm trying to learn how to use Bootstrap and followed along with you the whole way

  7. Igor V
    April 12, 2019 at 15:17

    Great JOB! #Webzine 😀

  8. Joel Swensen
    April 12, 2019 at 15:17

    Thanks once more, this was just the playlist I was looking for!!!

  9. Anoiar Ait brahim
    April 12, 2019 at 15:17

    thank you man you are the best of the best …i am really thankfull you…you help me so much to improve my skills in webdevelopment…greaaaaaaaaaaaaaat job

  10. Charles Brown
    April 12, 2019 at 15:17

    Hey Travis would it possible if u could show how to use the hamburger for the navigation bar when u make the width smaller. Thanks in advance!

  11. Muhammad Ali
    April 12, 2019 at 15:17

    gud guy dev tipz…

  12. Anonymous Gamer
    April 12, 2019 at 15:17

    +DevTips You could have made the columns: 3, 3, 2, 2, 2; To get 5 columns too.

  13. AndreAgonia
    April 12, 2019 at 15:17

    Another thing +DevTips: for some reason the website doesn't scale well on mobile devices. If I open it on my phone after uploading it to my space to test on the different devices it still shows the whole page trying to fit the three columns and everything on my mobile.

    On the tablet in landscape it kinda works, but on the other devices it doesn't.
    Why is that? I thought Bootstrap was mobile-ready right off the bat.

  14. AndreAgonia
    April 12, 2019 at 15:17

    1:20 what would you do in a real work scenario where you can't choose to divide add or remove an item when working with a 12 columns grid and need to align, let's say like in this case, 5 items?

    Finished this course too anyway and it's awesome as the others, you're a blessing to developers Trevis!

  15. Zach Harris
    April 12, 2019 at 15:17

    Thank you for this amazing series. This was a new experience working with Jade, SASS and bootstrap. Glad I followed along and picked up some new languages to explore along the way. Will definitely be using all three languages more in the future.

  16. Muhammad Ilham
    April 12, 2019 at 15:17

    you can use .list-unstyled class from bootstrap to remove the left blank space on list item

  17. TheMaximumLikelihood
    April 12, 2019 at 15:17

    Hi Travis, i've come across your channel because I wanted to refresh my CSS knowledge in general. (Have been like 8 years since my last Webdesign involvement) I'm glad you've put up this series for bootstrap. My motivation to watch through it in one piece was the following:
    A friend of mine is using the plentymarket ERP-system for auction listings and webshops. The ERP-company has recently created a template by the name Callisto Light which is based on bootstrap. Thanks to your series I will now have a much easier task to individually adapt it to my friend's needs. And your videos are entertaining! 
    Is there a way to donate for DevTips?


  18. back number
    April 12, 2019 at 15:17

    You're so good at front end. My role model now haha thanks for the vid. (y)

  19. Audrey Li
    April 12, 2019 at 15:17

    Awesome course! Thanks!

  20. Clinton Baker
    April 12, 2019 at 15:17

    Great series! I used it to test my branch of your DevTips-Starter-Kit and it worked very well. If you're interested in checking it out, you can find it here: https://github.com/ClintonBaker/DevTips-Starter-Kit/tree/Gulp-Starter-Kit
    Keep in mind, I'm still a newb, so it's not perfect, and there are some things I still probably need to add (like image compression), but I'm enjoying it so far ha ha. Let me know what you think if you do check it out!

  21. Anton Kastritskiy
    April 12, 2019 at 15:17

    These are such an awesome tutorial series. Watched all of them in one go and just finished my attempt of recreating a template. Thanks a lot!

  22. Michael Colynuck
    April 12, 2019 at 15:17

    Wow, you had me locked to this series and I watched it all in practically one go!  Can't wait to start using Jade later today.  Hope you'll try this with Bourbon but can't say I'd want to watch the same template from start to finish again…  I expect it's even tougher on you to do it than for me to watch it again though!

  23. Anatoly Khalizev
    April 12, 2019 at 15:17

    I am also finished this course. And gain more experience in bootstrap, jade, stylus, codekit.
    But for real newspaper site we need some database system?

  24. Arne Tietz
    April 12, 2019 at 15:17

    And voila the damn site is responsive without anything to do. Wow!
    Great series.
    Now I have a "feeling" of bootstrap. It's kind of a page describing language with its class names.
    I knew susy before – never thought that it would be a less used gridsystem, cause it is quite often used in CMS-World, y'know the reaaal CMS like drupal 😉 – but it has a really different approach than bootstrap. Although I haven't dived in Susy not so long. (Kind of feeling weird writing about what I've done with Susy, it's just a grid system isn't she? )
    Looking forward for your next vids about other things as grids and of course for the sparing with foundation.

  25. Mike Valencia
    April 12, 2019 at 15:17

    Thaks for the series,  I really enjoyed it and it was very helpful. 

  26. Thiago Davoodifar
    April 12, 2019 at 15:17

    Hey Travis, what's the image editor you use to view the wireframe? It looks really lightweight, I could use that when coding on my laptop!

  27. David Doig
    April 12, 2019 at 15:17

    Thanks Travis for a great series and introducing Jade to me. Nice learning new stuff. I've officially been  #hangingoutwithDevTips  

  28. Toby Hodkinson
    April 12, 2019 at 15:17

    The face in the circle reminded me of beavis tho!

  29. Toby Hodkinson
    April 12, 2019 at 15:17

    awesome stuff, great series!

  30. TheMightMen101
    April 12, 2019 at 15:17

    lovin the series thxs keep it up 😀

  31. Daniel M
    April 12, 2019 at 15:17

    My webdev skills are over a decade old & I'm trying to catch up, and this channel has been a godsend to learning the basic principles of a modern webdev environment (coming from using Dreamweaver exclusively up to now). Just got to the end of this series. It was very good!
    What I learned:
    – How to use Jade (omg so good!)
    – Saw some practical implementation of Bootstrap.
    – Learned how to do columns without using <table>, something I need for when I re-build my hobby site in the near-future.
    – Your use of, and explanation of mixins has finally enabled me to grasp what they are! Seriously, I've been trying to wrap my head around them for weeks.

    Some constructive criticism regarding this series:
    – Feels like too many videos, some of which were too short. 5-6 videos would have been better.

  32. Supervan
    April 12, 2019 at 15:17

    Hi Travis.
    I started investigating grid systems specially the Bourbon / neat. I have mixed feeling about bootstrap. The layout you designed, will it be possible using neat? please make my day and do the next grid series using  Bourbon / Neat

  33. Joseph Dyer
    April 12, 2019 at 15:17

    Come on David Cross, why don't you do a series on how to make our own responsive grid using Sass?! Bollocks to it, why don't you do one making a full blown framework with some nice styles etc? (just a lightweight one) 😛

  34. Marco Ss
    April 12, 2019 at 15:17

    Dios Mio! excelente tutorial amigo!

  35. Ezeikel Pemberton
    April 12, 2019 at 15:17

    Been wanting you to do this for a while! Bootstrap's grid system seemed a bit confusing up until watching these vids. Thanks!

  36. Yudi Muchanis
    April 12, 2019 at 15:17

    jade is just… wow

  37. George Flood
    April 12, 2019 at 15:17

    Great playlist, even the keyboard shortcuts. You are the gift that keeps on giving, I've thumbed up for Foundation.

  38. Mauro Gestoso
    April 12, 2019 at 15:17

    Great series. I loved how easy it is to figure Bootstrap out as you go and how everything is automatically responsive. Great documentation. 

    I'm NEVER letting Prepros go, it really simplified my workflow.

    And the classy finish "Copyright Your Mom" made me chuckle.

    Thanks Travis!

  39. Grant Burke
    April 12, 2019 at 15:17

    Just ran through this playlist in about 4 hours. I have a test tomorrow that I haven't studied for yet. Late night hacks > late night snacks > late night studies #ahhwell  

    Great vids, bro! Keep 'em comin'!

  40. Visual Intelligence
    April 12, 2019 at 15:17

    finally finished omg i couldnt sleep without finishing the whole series, thanks and good night

  41. k4133m
    April 12, 2019 at 15:17

    Just seen the whole series!! Once again sir, you da man!! 😀

  42. Eric Ellenbrook
    April 12, 2019 at 15:17

    Since you're using jade could you have used a loop to print the footer mixin?

  43. Eric
    April 12, 2019 at 15:17

    +DevTips  What's that mystery video about? It says it's private and can't be seen.

  44. James Ward
    April 12, 2019 at 15:17

    Great set of videos Travis. Here's a question perhaps you can address. Jade or Jekyll ?? which one would be a way to go for a large scale project. I am really liking the look and feel of Jade especially how it has the feel of sass but with HTML. So the reason I ask this question I am fixing to undertake a large project that is a basic redesign of a website so as of right now I am really thinking about going Jade with it. The reason for the redesign is one the website is a static site but is powered by WordPress and while WordPress is a good CMS for blogs it has to be hacked around on to be a good CMS for a static site, and the company that originally created this site for the guy fixed in it such a way if anything needs to be upgraded they would have to be the ones to do it and charge a big price for it. So I am going to go and build it from the ground up as plain HTML and then once it's finished and the new site is live I'm planning to take a phase and build it using another type of CMS. I'm looking at Concrete5 right now as a possibility has anyone else here tried it out or know much about it? Anyway back to the question JADE or JEKYLL?????

Leave A Comment

You must be logged in to post a comment.