Bootstrap’s Grid System – DIY Twitter Clone #5.2

Today we will be learning about responsive grid, panels and containers. We will implement the aforementioned in our Ruby on Rails Twitter clone, in particular we will build the front end for the “home” and “profile” pages. After this tutorial, your “home” and “profile” pages will look near identical to Twitter’s own!

Download this project’s files at:


“Clean Code” by Robert C. Martin:
“Game Coding Complete” by Mike McShaffry:
“JavaScript and JQuery” by Jon Ducket:


Creating, updating and managing DevFactor’s large collection of tutorials requires many hours of work on a weekly basis. If you have found our tutorials useful, please support us by subscribing and sharing our videos on social media.

If you have any feedback in regards to how we could improve the channel’s content, editing, or organization feel free to get in touch and make a suggestion!

In this video, we will learn about containers, responsive grid, panels and how to integrate all of the aforementioned into a Ruby on Rails web application! We will be using Bootstrap to style the “home” and “profile” pages for our Twitter clone – resulting in a look that is near identical to Twitter’s look and feel!

Subscribe on YouTube:


DevFactor offers high-quality, project based tutorials on web development, game development and software engineering. Simply by subscribing you can gain access to our large library of free programming video tutorials.

DevFactor was started in order to aid anyone regardless of age, race, gender or location to learn how to build, maintain and deploy their own software applications.

#programming #code #devfactor






5 responses to “Bootstrap’s Grid System – DIY Twitter Clone #5.2”

  1. Sandra Hogan Avatar

    These tutorials are great!! Love it! Quick question…when adding the 'trends' section…if I just copy and past the 'about' section and change it to 'trends'…that panel lines up correctly right under 'stats'…but if I add the <div class="row"> to that new section, the 2nd row ends up being slightly out of alignment to the left. Will everything somehow end up being wonky if I leave out that row <div> later on?

  2. cohiba8 Avatar

    this is exactly what i've been looking for ages. amazing! you dont go neither too fast nor too slow. thanks a lot

  3. Richard Boseley Avatar

    These are very informative – looking forward to the next tutorial.

  4. Today Avatar

    Lol this is awesome.

  5. DevFactor Avatar

    This tutorial about concludes the work we will be doing on the front-end for a few episodes. The front-end is primed to be populated with dynamic content now, and it's about time we move on to implementing user authentication! 

    This means episode 6 will be coming out soon, and episode 6 will bring with it everything you need to know to have the right foundations in place for ANY TYPE of social site! 

    From that point on, we will just be adding Twitter-specific features, polishing, bug-fixing, and working on deployment/automation!

    #rubyonrails   #programming

Leave a Reply

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