Bootstrap 3 Tutorials – #5 – Responsive Grid System


In this Bootstrap 3 tutorial, we will be using the in-built responsive grid system. This allows us to divide our page into 12 columns.





  1. I'm doing the coding like how you show in the tutorial, but when i preview it my text is all in one line. Any idea why does it happen? Is there a minium character what i have to use to cut at least two lines?

  2. If the text in <p> differ in size, the read more button doesnt appear on the same row. What to do to make the Read More button appear on the same line… irrespective of the content in <p>

  3. I really like the content – up to a point where you say that a text editor is no good for {asp,php…}. I don't want to offend you but that's IDE junkie talk.

  4. Hi, Who can provide a link to download Brackets themes? Because I can't find right place for monokai dark sods – Extension Manager?  Thanks

  5. I tried adding the OmniMarkupPreviewer to Sublime, but the menu options are greyed out while editing the index.html file. Any suggestions?

  6. I ended up also adding a class to the row tag as the scroll didn't have enough margin when minimized to scroll the content all the way down. In case anyone needs this, just thought I would add that note.


    Excellent Videos! I barely knew anything about bootstrap and these are extremely helpful!

  7. hey guys, i have different tittles on all of those news, and i have an image under it. Since the tittles are different, some are bigger than the others, so they are messed up, not all in the same line. How can i do that?

  8. Hi, I have been following for series on Bootstrap. I have a question – What is the difference between btn and navbar-btn. In this video you used btn for creating a button, In Video 3 (sticky footer) , you used navbar-btn with btn to align it to the center. Thanks!

  9. Hi Guys, I'm having a problem. My 'read more' buttons are at different heights, now that I've changed the texts. Is there a way to keep them at the same height?

  10. Hi, I have a problem where the page won't scroll. If anyone knows what's wrong, I'd appreciate it. Here's the pastebin. Thanks

  11. if i wanted two of the columns to go under each other when i go lower than 1200px(lg) ? (two pairs of two stacked ontop of each other) ?

  12. Holy crap. Why have I been coding from the button? Thank you so much for your tutorials! This will make my school assignments so much easier….. and prettier 😀

  13. These videos are great. However, I have two problems so far: 1. My top navbar items are stacking up and now nicely aligned horizontally like in the video and 2. How do we use the "Read More" buttons in the columns to se more text with it's clicked? Thanks.

  14. For some reason I'm getting an "Error Saving File" popup. "An error occured when trying to save the file C:/users/JohnDoe/Desktop/Example/index.htm.(error Unknown)

  15. I have hit a problem, when I added the btn after the lorem ipsum I can semi see the button, it is cut in half by the bottom of the browser window. My problem is that the web page seems to be at a fixed height…I can not scroll down past "the fold" to see more content. Any idea what I did wrong?

  16. Hey mate just wanted to pass on my appreciation to you and your work. My web designer fell through on me last week and I've had to learn HTML, CSS & JS over the course of the weekend and basically start building a functional website from scratch. These free resources are of tremendous value .. really appreciate the help.

  17. You didn't even demonstrate col-xs/sm/… which is a new core feature of BS3, therefor it's not a good tutorial about Bootstrap 3 Grid System.


Please enter your comment!
Please enter your name here