In Bootstrap 3, adding a new grid tier (breakpoint) was not a simple process. It required various LESS or CSS customizations. Thanks to Bootstrap 4 SASS, and the new $grid-breakpoints variable it's very easy to add a new grid tier. Consider for example you want to add a new "extra extra small" breakpoint named xxs ›
A Visual Comparison of Bootstrap 3 and 4 Recently, there has been a lot of talk about what's new in Bootstrap 4, but I was curious to examine the visual appearance & style differences. Here is a visual guide that will show you what's new in Bootstrap 4 as compared with Bootstrap 3. Panels are ›
Sidebar navigation has become a standard for responsive design, and many frontend developers are looking for the best approach. Here is a collection of responsive side navs to demonstrate various sidebar implementations including off-canvas, left, right, floating, push (where the main content is pushed to the side), sliding and collapsing. Left sidebar that collapses to ›
Bootstrap Grid Explained Over the last few years I've answered a lot (over 800!) of Bootstrap questions on Stack Overflow. Frequently these questions relate to the Bootstrap grid __ that powerful blend of containers, rows and columns that make responsive layouts possible and flexible with Bootstrap. More often than not, questions about the Bootstrap grid can ›
Playing with Boostrap 4 and SASS The upcoming Bootstrap 4 is built with SASS, and you can customize many options in the _variables.scss. There are several options to quickly change the default Bootstrap look. Set the SASS variables to easily change the grid breakpoints, container widths, borders, colors, fonts and more. There is also ›
Bootstrap templates for responsive layouts If you use Bootstrap, you'll find several basic examples are included with the Bootstrap docs. I wanted to take them a step further with some advanced examples that demonstrate common design trends and patterns. Here's a collection of Bootstrap snippets that will show you how to implement features like responsive ›
Choose Bootstrap, Foundation, Skeleton or another grid system? Responsive Frameworks Make Frontend Development Easier There is some debate on why a frontend designer would use a responsive framework instead of just using custom CSS. As you may know, the term "Responsive web design", was originally defined by Ethan Marcotte on A List Apart. A responsive ›
A closer look at: "Can I have more than 12 columns in a single Bootstrap row?" Numerous times on Stackoverflow I've seen questions like this.. Can I have columns add up to more than 12? What will happen if I put more than 12 in a row? Do I need a new row every 12 ›
Zurb's popular Foundation 5 framework is a very useful tool for quick, consistent responsive design. Here are some useful code snippets, including navs, forms and cards for your next Foundation based project. Justified Navbar Here's a snippet showing a top-nav with centered links that expand the full width of the navbar. It includes a simple ›
Top Responsive Frameworks & Grid Systems As a responsive designer, you may want to consider viable alternatives to Bootstrap, but also avoid the "flavor-of-the-day" grid systems that come and go. These top frontend frameworks will allow you to build sites faster, and reap the benefits of responsive layouts, pre-defined styles and reusable components. So, which framework ›