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



https://i.ytimg.com/vi/m2nhG_RMOk8/hqdefault.jpg



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:
https://github.com/DevTips

DevTips now has a twitter account:

Travis also tweets:


Original source


15 responses to “Bootstrap Grid – CSS Grids Series (part 3- Navigation and Tabs)”

  1. 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. 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..!!

  3. 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? 
    Thanks

  4. 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 😀

  5. 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…

  6. 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! 

Leave a Reply