Bootstrap Tutorial

Get the Cheat Sheet Here :
Best Bootstrap Book :

Support Me on Patreon :

00:53 Setup
02:59 Container
03:37 Page Header
04:09 Jumbotron
05:31 Button Styling
09:40 Grid Layouts / Responsive Layouts
17:02 Responsively Hiding Elements
18:54 Offset
20:04 Table Styling
21:17 CSS Styling with Bootstrap
24:34 Carousel / Slide Shows
28:32 Icons
31:33 Well
32:16 Image Styling
33:27 Contextual Colors
34:28 Dropdown Menus
38:07 Input Groups
42:51 Horizontal Menus
44:56 Vertical Menus
47:00 Tabbed Panels
51:05 Responsive Navigation Bar
54:38 Pagination
56:16 Responsive Blog Layout
58:02 Progress Bars
59:30 Responsive Blog Layout 2
1:01:30 List Groups






45 responses to “Bootstrap Tutorial”

  1. Darkbdlz Avatar

    for the carousel how did you get the images?

  2. r4xe Avatar

    This content is a goldmine!!

  3. Sam Smith Avatar

    Why at 13:00 min doesnt column 4 jump up to column 1 then ?

  4. Ξngjell Bislimi Avatar

    Do I need to remember all of theses with my memory? I am new to web developping

  5. Michał Plebański Avatar

    50:26 I think that lines 34 & 35 miss "data-toggle"="tab" in anchor elements

  6. Bohdan Trotsenko Avatar

    I'm 15minutes in the video and it's ridiculously awesome 🙂

  7. Ahmad Qureshi Avatar

    This tutorial is for which version of bootstrap?

  8. Andrew Martin Avatar

    A well worked out and presented introduction!

  9. William Buchanan Avatar

    Finally – a tutorial which just gets straight to the point, AND actually works!

  10. Alex K Avatar

    What is purpose of "container-fluid" div in Responsive Navigation Bar example? Wouldn't nav completely fill "container" without it?

  11. Sudhindra Purohit Avatar

    Hello sir, I want to use 2 nav bar one below the other and both should be fixed. How can I do it… plzz help

  12. Kavya Shree Avatar

    Great professional tutorial .thank u so much sir

  13. Siddharth Velappan Avatar

    Added to favourites!! Thanks a lot @Derek!

  14. Amlan D Avatar

    Thanks Sir, being a learner, just to summarize, Bootstrap is all about importing those two (BS css and JS) to your html, and take advantage of its inbuilt classes to design more Screen-Size re-adjustable web page… all I have to do is to memorize all those classes, which does what and no other concept right?

  15. frank zhu Avatar

    great course! i have a question at 6'19'', what does <a href = '#' class="btn btn-default btn-lg" role="button" mean? thanks!

  16. Juubes Avatar

    The lorem ipsumstuff…

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis turpis lacinia, ultrices nibh sed, rutrum ex. Vestibulum ullamcorper nibh nec quam gravida, sit amet lacinia nibh accumsan. Aenean rhoncus orci leo, quis condimentum ante blandit in. Pellentesque non pharetra augue, ac bibendum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis efficitur lectus id lobortis. Suspendisse consequat arcu eget dapibus tempor. Sed dui erat, mattis non enim quis, dictum consequat leo. Duis condimentum semper pharetra. Quisque sed maximus erat, et dictum tortor. Nunc quis lectus eget nisl pretium volutpat. Etiam imperdiet iaculis suscipit. Etiam eu ultricies velit, non dapibus risus. Nullam ac purus vitae enim fringilla tincidunt. Nullam faucibus, neque faucibus vulputate placerat, elit enim rutrum ipsum, eget venenatis risus sem ut magna.

  17. janos laszlo Avatar

    Is there any programming task that you can't do?! :))

  18. Zoe Andrews Avatar

    Great video. Explains a lot of points.

  19. Logan Kue Avatar

    How'd he get the background for the carousel without referencing it?

  20. Geeki boy Avatar

    Love you Sir DAREK.. finally i found it
    love ya

  21. Ghassen ben taher Avatar

    Why Responsively Hiding Elements in 17.02 dosn't work /w me !?

  22. WayneSadler Avatar

    Hi can you use Bootstrap without Java…
    I want to some how get my current page to stay in the current layout however when a mobile device views the page it forms to the screen format, I limited to CSS and HTML only, any advice welcome.

  23. Viraat Chandra Avatar

    You are my hero….

  24. Professional Websites Avatar

    The only tutorials that doesn't get me asleep…. great job! thank you so much!

  25. Dylan Park Avatar

    Hi. first of all Thanks for this awesome video, although everything you teach there is great and works perfectly, the "dropdown"parts for both regular(?) and input is not working on my computer. I even copied and pasted your code but still it doesn't dropdown when it's clicked. I'm thinking of the version difference and I have been trying to fix this on my own yet still no sign to work. Could you please help me with this?

  26. Yannick Rüttgers Avatar

    Good Video, but the stopping every second drives me insane

  27. Vlusion Avatar

    Derek at 0.75 speed is better for me

  28. Omega Henry Avatar

    When I used the carousel, one side worked fine but the other did not. Instead of fading the area behind the chevron and text, it put a fade on the entire right side. Please help.

  29. muhammad abu lawi Avatar

    a very useful tutorial

  30. KPSHARMA Avatar

    such a mind blowing video, never felt bored, completed 1 hour video without interruption 🙂

  31. Lakhdeep singh Avatar

    Derek another useful video..! Thank you so much

  32. J.T. Schellenberg Avatar

    At 19:30, I'm afraid there are logical errors. You seem to have said that those 3 people are the best baseball players. That can't be right 🙂

  33. Piyush Paliwal Avatar

    sir, huge respect..!! This is what I needed to get started.

  34. 5 facts Avatar

    Great job sir , explained everything . Thank You !

  35. Deepak Pal Avatar

    i wanted to know about bootstrap and trust you made it so easy to learn in an hour , Thanks Derek 🙂

  36. Ratan Kushwaha Avatar


  37. Sonic Lucas Avatar

    Hey guys, I just wanted to add something. First I want to say thanks a ton Derek for making these tutorials. The second thing that I'd like to add is that I used to be one of those people that thought that I could code every single component including the responsive layout by myself in a short amount of time. If you're really determined, its possible but imagine having to do that over and over again for each website you create. This is why Bootstrap exists. I struggled a lot with making my components look and position certain way with CSS as well as trying to manually write all of the functionality I could with Javascript. Guys, it's a lot more difficult and time consuming than I thought. If you're one of those people that felt just like me, I would really consider looking at this framework because it has helped me so much, especially with its' amazing grid system. There are also alternative css/js frameworks that you can use and I highly recommend using one because it saves a lot of development time. Also , if you are already familiar with lots of CSS and Javascript, you can add your additional code along with the framework you're using to suit your needs. Stuff like forms, navbars, drop down menus, the responsive layout etc. take time to build from scratch and these frameworks are really useful. Thanks again, Derek : )

  38. DataX Philippines Avatar

    Best Bootstrap Tutorial! Upload more for beginners!

Leave a Reply

Your email address will not be published. Required fields are marked *