• Sunday , 5 July 2020

Bootstrap Grid – CSS Grids Series (part 3- Navigation and Tabs)

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. Marcus
    September 18, 2017 at 10:30

    Hey, it might sound strange giving the fact this video is one year old, but do you still have the template for what you were building? Or do you know a site for others? Because I would like to practice building UIs and these might be useful.

  2. What Is What?
    September 18, 2017 at 10:30

    You are awesome man.

  3. David Baird
    September 18, 2017 at 10:30

    Thanks so much!

  4. David Baird
    September 18, 2017 at 10:30

    Hi all,,hey Travis…back on Devtips after a long break..Just wondering how to preview all the various elements of Bootstrap (e.g, when you searched for the Tab/Nav items). You displayed a screen on the right of  your video at 38 secs that shows a list of the features..where is that?…on the Bootstrap site?) thanks..!!

  5. Aakash Tyagi
    September 18, 2017 at 10:30

    Very nice video, loved every bit of it. Finally understood the Bootstrap Navigation!
    +DevTips need one tip though, I want to design a navigation bar like twitter's profile nav bar, when we scroll down user's profile picture jumps into the profile navigation bar(when viewing profile). Can you please help? 

  6. Dr. Zoidberg
    September 18, 2017 at 10:30

    How he made that trick on 2:11 ?

  7. Сергей Цибульченко
    September 18, 2017 at 10:30

    this video lacks of example how to center and stretch nav when number of <li> generated dynamically. When number of items is to big for one row it looks ugly. Front-end developers as well as designers don't think about it at all and it's a pain in the ass for back-end developer each time.

  8. Budza Budzic
    September 18, 2017 at 10:30

    Hi there ive been watching a lot of your tutorials and they ar really awsome :D.
    As for bootstrap im familiar with html css even jquery im not new to all of that i know how it works and i understand all you do while your typing i folow and understand.My problem is next:
    I see you writing in text editor in file .jade  and i found your video about jade also downloaded prepros for windows and now im using it to compile jade to html and sass to css but:
    Very often when i save jade it compiles it to html nicely but as i get like 20 lines of code and i work on my indentation i ussualy get an error saying ome message and at the end indentation error "you can use space and tab but not both" and i end up with completly bad code i cant compile it now no matter what and gota start all over what is the deal?

    Thanks in advance on the reply once again your videos are really amazing and helpful i actualy figured out lot of problems i had so i edited this question 😀

  9. Jakub Gmur
    September 18, 2017 at 10:30

    And I'm sitting here, watching this video, thinking "Who the hell thought Bootstrap was a good idea?! Why has it become so popular?!". The developer has to learn Bootstrap's own class names, think how to best implement them, many don't make sense (Why use .nav class? We have nav element in HTML5, can't they use it?), the CSS file, even minified, weighs extra and there is a lot of unused class names in every project, I am sure. The only advantage I can think of is making the development time shorter…

  10. Villads Valur Korsholm Nielsen
    September 18, 2017 at 10:30

    +DevTips Great videos! Awesome videos! Get another keyboard, you mistype A LOT and the sound it makes is horrible. You would probably find that you don't mistype as much with a none chiclet keyboard.

  11. David Baxter
    September 18, 2017 at 10:30

    Cool thing about Jade I found after looking at the documentation. You can add conditional classes in there which means for the active menu item you could do something like: 

    – var currentUrl = '/magzines'

    li: a(class={active: currentUrl === '/books'} href="books.html") Books 
    li: a(class={active: currentUrl === '/magazines'} href="magazine.html") Magazines 

    Which would obviously be a little unnecessary but still a cool for this site but still really cool! 

  12. Juan Bonnett
    September 18, 2017 at 10:30

    THANK YOU! And multiply this Thanks for the number of videos you have in these CSS series haha

  13. fergentius rosales
    September 18, 2017 at 10:30

    Hey dev tip i am a web developer.. do you recommend i start using bootstrap for development? 

  14. pta2002
    September 18, 2017 at 10:30

    idk y this has so few comments. But anyway, I always had problems positioning stuff in CSS, you helped me alot! 😉

  15. Brian Walborn
    September 18, 2017 at 10:30

    Great tuts, Trav.

Leave A Comment

You must be logged in to post a comment.