By Zell Liew

Bootstrap’s Grid System vs. Susy: A Comparison

By Zell Liew

There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap.

Today, I’ll like to introduce you to a slightly lesser known framework that has caught on for many people – Susy. In this article, I’ll show a comparison between Susy and Bootstrap’s grid system so you can fully understand what Susy is, and whether you’ll want to try it out.

What is Susy?

In order to answer this question, we have to first answer “What is a grid?”

Grids in the web terminology are nothing more than just a set of vertical lines running from the top to the bottom of a page. They originate from print design and are now used every day by web designers to serve as a baseline to organize and present information on pages.

Basic grid example

These vertical lines help to segment the page into two kinds of vertical spaces. We call the wider space a column and the narrower space a gutter. Where we order and position the elements is what we refer to as layout.

Grid columns and gutters

Many kinds of grid frameworks were used in the past, which you might recognize. Some examples are:

  • 960 grid system
  • 1140px grid system
  • Bootstrap
  • Foundation

All these frameworks have one thing in common. They each have a grid already present and you can customize it to a limited extent.

However, interesting web designs that use asymmetric grids have started springing up all over the web and there is no way traditional frameworks like the ones just mentioned can help you create a grid for that.

That is what Susy is for.

Susy is a layout engine. It provides you with the tools to build a custom grid framework that matches the needs of your website. This gives you the flexibility and freedom to play with your design.

What is Bootstrap?

Bootstrap is more than just a grid system. It is a full featured framework and toolkit that provides us with:

  • A grid system
  • Styles for common web elements like navigation, forms, alerts, and icons.
  • jQuery plugins for complex elements like accordions and carousels.

Once you understand what Susy and Bootstrap are, its easy to see that we cannot logically compare between the two. They are fundamentally different things to begin with.

The closest comparison we can draw, therefore, is between Susy and the grid system in Bootstrap. There are a few things we can compare when we look at it this way. Here are some things we will be covering in this article:

  • Preprocessor Language
  • Markup Usage
  • Ability to customize the grid
  • Ability to respond to multiple breakpoints
  • Coupling of HTML and CSS
  • Documentation and Community

Preprocessor Language

Preprocessor languages are important because you need tools to fit into your workflow, not the other way around. Lets first make it clear what works on what.

Although Bootstrap was initially built with Less, it can now be used with both Sass and Less. Thus, language is’t be a barrier to using Bootstrap at all.

The latest version of Susy (Susy 2) only works with Sass version 3.3 and up because it requires the use of Sass maps. There is also an older version if you are only able to use Sass with a version below 3.3. Unfortunately, Susy doesn’t support Less.

Markup Usage

Lets use a simple example to compare Bootstrap’s and Susy’s markup.

Example layout

Bootstrap requires the use of classes like .row and .col-md-4 all over its markup in order for the HTML to be styled properly.

This is also where most of Bootstrap’s criticisms come in. Critics argue that these classes are presentational classes that shouldn’t be in the markup.

Here’s the markup that Bootstrap requires with some of the example grid-based classes in place:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 content"><h2>Content</h2></div>
    <div class="col-md-4 sidebar"><h2>Sidebar</h2></div>

By comparison, here’s what Susy requires.

<div class="wrap">
  <div class="content"><h2>Content</h2></div>
  <div class="sidebar"><h2>Sidebar</h2></div>

Susy’s HTML is much simpler and more semantic compared to Bootstrap. However, its not enough just to write the HTML with Susy. You’ll have to add some styles to both .content and .sidebar so they show up properly.

Lets do a quick configuration to demonstrate how susy works.

First, notice that Bootstrap applies gutters as paddings to both edges of every column.

Bootstrap gutters

By default, Susy applies gutters as margins to the right of every column. To create the same grid as Bootstrap, you will have to change the gutter-position setting in the $susy map.

$susy: (
  gutter-position: inside

For every Susy grid, you will have to include a container mixin for the .container class. In the case above, the container would be .wrap and it has a max width of 1140px.

.wrap {
  @include container(1140px); 

Our example with Bootstrap uses 8 columns for content and 4 columns for .sidebar. You will have to use the span mixin in Susy to create the layouts for .content and .sidebar, which will take up 8 columns and 4 columns respectively.

.content {
  @include span(8 of 12); 

.sidebar {
  @include span(4 of 12);

The markup for Susy is cleaner compared to Bootstrap, but there’s more work involved to get the initial grid up and running because Susy requires you to configure them yourself while Bootstrap has already provided you with the necessary styles.

Ability to Customize the Grid

Bootstrap offers you the ability to customize your grids to a certain extent. You can freely change things like:

  • Number of columns
  • Size of a gutter
  • Sizes of 4 available breakpoints (xs, sm, md and lg)

You can customize these grids from two different areas:

  1. Change them through the customize tab or
  2. Change the variables in the _variables partial in whatever preprocessor you’re using (Sass or Less).

For both cases, columns and gutters can be found in the “grid system” section, while media queries can be found in the “media queries breakpoints” section.

Susy on the other hand allows you to change many more things. You can change things like:

  • Number of columns
  • Size of each individual column
  • Size of gutter
  • How gutters are positioned
  • Number of breakpoints
  • Sizes of breakpoints
  • Document flow from left to right or right to left
  • Box model used for the grids

…and many more.

Although other grid systems like Singularity and GridsetApp are more well-known for asymmetric grids, Susy allows you to use such grids as well if you know how to set them up. Some examples of great asymmetric layouts are this, this and this.

I particularly like the final one by Nathan Ford and have successfully recreated the same asymmetric layout with Susy. There is no longer a need to stick to a standard grid anymore. Susy lets you be crazily creative with the grids you or your designers make.

Ability to Respond to Multiple Breakpoints Easily

As as I mentioned above, Bootstrap allows you to use up to 4 different breakpoints for your grid: xs, sm, md and lg. These breakpoints are written right into the Bootstrap classes for the grid.

In our above example, if you resized the browser down to less than 991px, .content will become a full 100% of the container and .sidebar will drop down to the next column.

Assuming you wanted both .content and .sidebar to take up half the the screen when on a smaller viewport (below 991px), it is not uncommon to see HTML that contains multiple breakpoint arguments, like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-8 content"><h2>Content</h2></div>
    <div class="col-xs-6 col-md-4 sidebar"><h2>Sidebar</h2></div>

Whereas when you do this with Susy, you change the CSS instead of the HTML. The HTML for Susy remains as we saw earlier, with nothing added:

<div class="wrap">
  <div class="content"><h2>Content</h2></div>
  <div class="sidebar"><h2>Sidebar</h2></div>

Instead, you will have to add a breakpoint (say 991px) to the Sass file.

While doing so, its possible to go from a mobile-first approach and declare .content and .sidebar each to take up half of the screen first. After 991px, .content will take up 8 columns while .sidebar takes up 4 columns:

.content {
  @include span(6 of 12);
  @media (min-width: 980px) {
    @include span(8 of 12);         

.sidebar {
  @include span(6 of 12);
  @media (min-width: 980px) {
    @include span(4 of 12);

Bootstrap requires you to code carefully with the HTML classes and that sometimes throws things off for me. When I code with Bootstrap, I always have to remember the specific breakpoints and I must include the correct breakpoint acronym into my grids if I wanted them to respond properly.

Susy on the other hand leaves the HTML alone and asks you to code carefully in the Sass file. I have a strong preference to leave my breakpoints in the stylesheet because its much easier cognitively for me to see what’s happening.

Depending on your preference, either Bootstrap or Susy can be suitable. I personally prefer Susy because with Susy, I can now safely decouple my HTML with my CSS. Which brings me to the next point.

Coupling of HTML and CSS

Any nontrivial website today needs to hold a lot of HTML and CSS. The more tightly coupled HTML and CSS are, the tougher it is to maintain the code.

Just imagine if we went back to the time where all CSS was coded right inside the HTML using the style attribute. Using classes in the HTML like .col-xs-6, .col-md-4, and .row is similar to using the style attribute.

When you have multiple HTML elements that require a specific layout with the .col class, the number of times you need to include these classes increases. What if the design has to change and .content needs to go down to 7 columns instead of 8? Do you have to go back and change all the html classes everywhere?

<div class="col-md-7 content">

To me, thats really tough to maintain.

My personal preference is to use Susy and keep these presentational classes in the external CSS where they belong. For example, in Susy, if I had to change .content to 7 columns, I have to change only the span mixin I used, and make it 7 columns instead of 8!

.content {
  @include span(7 of 12); 

I think this is much easier to maintain because the HTML and CSS are now decoupled.

Since you will have free reign on the HTML and CSS while using Susy, you can now apply various CSS architecture practices like SMACSS, OOCSS, and BEM without having to think too much on how they will affect your HTML.

Documentation and Community

Finally, documentation and community plays a large part in every framework. the larger the community and the more robust the documentation, the easier it is for you to find information and ask questions.

Bootstrap’s documentation and community is definitely robust. Whenever you have problems, you can post your questions on StackOverflow or other coding forums and someone will definitely be able to help you.

The community for Susy however, is not as large (yet) and the documentation is not as robust. There is also currently a lack of case studies online on how to build a website with Susy, and that has really stopped many from picking it up. To combat this, I have written a book on learning Susy, so please check that out if you’re interested in learning about it.


Although Susy and Bootstrap are fundamentally different tools, we can see clearly what are the differences if we compare their two grid systems. As I have highlighted above, I strongly believe that Susy has a better underlying system compared to Bootstrap.

If you’re interested to learn more about Susy, head over to the official website, check out the documentation, or grab 4 free chapters from my book.

  • This is great!! I like to have full control of the code I create without having to follow a framework’s markup. Thanks for this article!

    • Having full control is always an awesome thing :)

  • matt

    The only difference between those two is that Boostrap is already a monster, and the other one… What it’s called again?

    • Foundation? :)

      • PKHUnter

        Foundation is hardly a monster. I’ve tried some bare bones responsive frameworks, some of them as small as 80kb, but keep coming back to Foundation. Just pick the stuff you need from their website, and their semantic HTML is MUCH MUCH better than Bootstrap’s geeky drivel.

        • I do agree, I prefer Foundation’s grids compared to Bootstrap’s one. Its much easier to understand imho.

          • lstep

            Also you can use Foundation with Susy without any problem, as Foundation is modular and you can replace (not include :-) its grid system with Susy’s.

  • Oscar Blank

    I guess what I find amazing is how easy it is to set up a layout in CSS or Sass using no grid system, yet people need a framework or grid system? This kind of reminds me of Dreamweaver or Frontpage. Do profressional designers really use grids?

    • yes, build a responsive, cross browser/platform website with a grid system makes the process much faster and easier.

      • Yep, grid systems makes building the prototype fast. If its a small site, go ahead!

        If its a larger one, I might think twice though.

    • I agree, Its amazing how easy it is to make a layout in Sass without a standard grid system :)

      I still believe keeping presentational classes in most grid systems out there back in CSS where they really belong is the way to go, since that makes things much easier to maintain. However, it is also beneficial for people to use grid systems cause its just much much faster to prototype with.

      I’m pretty sure professional designers use grids! They might break some rules here and there when we’re not looking though :)

      • Frederik Krautwald

        No. We don’t use grids; we use creativity.

  • Megh Parikh

    you can also see ‘s grid. By default it doesnot apply padding but I like it that way.

  • Susy could have better Grid but I prefer to make grid and nested grids by adding classes to HTML. It’s easier to build for back-end developer too. As they don’t need to Edit css files to make grid.

    I know that using Sass mixing and placeholder/extend we can keep our clean and semantic but in my opinion having more HTML, more divs and presentational class names doesn’t make our code non-sematic.

    Semantic is mostly about using proper HTML for content. Extra div and spans for styling purpose is fine.

    • Susy can be tough for a backend developer who’s not in the least interested in Sass to pick up, and I full agree with that. Its not something that’s trivial :)

      When used correctly though, Susy has the potential to relieve the backend guys of even coding grid classes like span-8, and instead just use html elements, or a standard class. I might dive more into this at a later stage, know that its coming up :)

    • Jeroen Meeus

      A backend developer shouldn’t have to write HTML. That is the job of a front end developer. A back-end developer writes all the yummy stuff that makes it work. The front-end guy then writes the html (for instance in plain php, or twig, blade, …) with the css.

      • True! But there are always instances where backend guys work alone without the help of dedicated frontend guys. :)

      • Jack Saat

        There are projects the backend and front-end guy are the same person!! Like there is zero budget for the project!

        • Jeroen Meeus

          If the back-end guy is also the front-end guy. He won’t mind editing some css files isntead of having to look into tons of documentation to know what is what. I don’t see how this is an argument :p

  • Pure looks cool. I’ll check it out. Thanks for sharing!

  • Zahir Islam

    it is fantastic learning site.i want to be a skilled code developer.i think this article help me.thank to zell liew.

    • Thanks Zahir, glad you enjoyed it :)

  • Mikhail Osher

    Are you kidding? You can use Bootstrap sass/less in the same way as you shown for Susy. Yet another clon without full features of bootstrap. Dislike.

    • Oh there’s so much more to Susy, these are just basics that will apply to anyone who’s looking to see how Susy might work. You can even make asymmetric grids with her!

    • begs

      You’ve never seen Susy in detail and don’t want to? Stick to bootstrap, it’s fine. But don’t judge anything before you tried it. This is true for everything in life :)

  • JaswantS

    Really helpful article. I have been working on bootstrap but this one on Susy is definitely gonna add up. Thanks for writing down.

  • Yeah personal preferences, do what you think is best :)

  • Guest

    I’m a little conflicted with his article because I do not consider Susy and Bootstrap to be in the same field. There is an important distinction between Susy and Bootstrap:

    Bootstrap is a framework – the rules are already in place and need to be followed. Sure, you can add your own rules but you’re in for a tricky time if you mess around with the core ones. That’s fine – that is what a framework is for.

    Susy however is a tool that is more similar to a library. It offers flexibility and will function how you want it to function – you make the rules from start to finish.

    With that distinction aside, I am not personally a fan of Bootstrap. I do understand why it is popular – it is a well known system for producing a site quickly, however when it comes down to the meat and bones of a website it can be difficult (at least for myself) to put your faith in a framework that you’re not familiar with and have little desire to learn.

    Susy can be implemented into your current project with little hassle, and with only a few calls to functions that will integrate with your existing selectors – such as in the article’s example. No need to add proprietary selectors or anything like that.

    • I do agree with you in saying that Susy and Bootstrap cannot be totally compared because they are so different. In this case, I have only compared Susy’s grid and Bootstrap’s grid instead, because that was the only point of comparison.

      Yup you can definitely use any element or class selectors for Susy, and that’s what I like about it. There’s no need to follow a predefined set of code.:)

    • LouisLazaris

      Just as FYI, here is a quote from the article:

      Once you understand what Susy and Bootstrap are, its easy to see that we cannot logically compare between the two. They are fundamentally different things to begin with.

      The closest comparison we can draw, therefore, is between Susy and the grid system in Bootstrap.

      So you can see that @zellliew:disqus acknowledges in the article that the comparison isn’t really a fair one. Mostly what Zell was doing here was contrasting the two, showing what Susy can do above and beyond Bootstrap, which I think is fine, as long as he acknowledges (like he did) that the comparison isn’t necessarily apples to apples, so to speak.

      In other words, he’s kind of saying “You like them apples? Oranges taste better!” :)

  • Susy looks interesting. I haven’t played with it yet (gotta try it out) but I’ve played with Bootstrap a lot & I think you went off a bit against it, eh! ;) The approach you highlighted for Susy can be used with Bootstrap as well. But yes, they do address different issues. I think it would be apt to call Bootstrap a full stack framework & Susy a micro-framework. A full stack framework has a lot of bells & whistles & provides a good base to build upon but comes with some core rules that need to be followed. A micro framework allows more freedom of choice & flexibility but that comes with a price, not a lot of things available to get you started right away.

    • I admit I might have been a little biased here, there are way more things that can be done with Susy, but I thought I’ll keep the article a little shorter :)

      Yup thats true as well. Bootstrap gives you a lot of styles that can get you rapidly started and you’ll have to work from scratch with Susy. I see the latter as a benefit because all of my projects requires a new set of design. Including Bootstrap wouldn’t make much sense because I’ll be overriding all of them anyway. That’s a personal preference :)

  • Personally I don’t to get in to the discussion of which frame work is better as far as their feature and characteristics are concerned. But while using sass every where make it easy for me to use susy when i need a simple responsive grid system so I don’t have to customize and use bootstrap just for its grid system.

    • Its a can of worms to talk about which framework is better, and its a tough nut to crack because everyone has different preferences:)

      I like working with Susy because I use Sass everywhere, and Susy lets me build my own system whenever I need it to. Its like an assistant to me :)

  • Glad you liked it :)

  • bernard

    If you think Susy is cool because its many options but a bit complicated ….have a look to (as simple as but with more options)

  • Ben

    Interesting article. Some projects are more well suited to one or the other. I should try Susy. It looks a bit similar to Bourbon Neat which I also plan to try soon.

    I’m a big fan of Foundation and Bootstrap grids as they are very powerful but also easy to implement. The syntax is so common that it would be easy to take over someone else’s website and all the classes/logic is familiar.

    A while ago I tried the Semantic Grid System which has the same principle as Susy – keeping the logic in the stylesheet. Personally I found that on a quite complex site the CSS became quite hard to maintain. Two years later I converted it over to Bootstrap 3 and it just feels so much simpler as I could just delete half of the CSS, with the benefit of getting Bootstrap’s responsive menus and great form styling. Susy probably offers more flexibility than does which was partly why things got messy.

    At the moment I’m pretty torn between using a full framework like Bootstrap/Foundation, or just using a sass grid system with my own default styling. With the latter one generally ends up needing various libraries in addition to the grid system (e.g. mobile navigation, carousel) and there’s something to be said for having that covered in a well documented framework that solves 90% of the frontend requirements out of the box.

    Back to the grids which is what the article is about… does Susy have documentation/example on how to replicate the Foundation’s block grid? ( No row classes getting in the way when the number of items per row changes at different screen sizes.

  • vongoh

    I recall seeing an article that did a file size and overall bloat / performance comparison between a Foundation 5site and the same site coded using Susy (sry, did not bookmark and cannot locate atm). At any rate it wasn’t even close:

    The Susy site was markedly smaller, leaner, and quicker by a wide margin. Without even checking that – I have a feeling there a similar case going on vs Bootstrap – for a lot of the same reasons ie. general code bloat

    • That’s to be expected. Susy doesn’t contain any of the bells and whistles like default button styles that come with full frameworks like Bootstrap and Foundation. However, it wouldn’t be fair to compare them this way, because Susy can really only be compared to the grid portion on both frameworks.

      I’m sure if you strip away the extra fat with @import directives, the CSS should all be about the same size.

  • tagmac

    I havent tried it myself (I’m using Bourbon/Neat currently), but why not use something like this in your your sass/less style if you want a cleaner or more semantic HTML with Bootstrap?

    .content {
    @extend .col-xs-6;
    @extend .col-sm-6;

    .sidebar {
    @extend .col-xs-4;
    @extend .col-sm-4;

    With Bootstrap you don’t have to do it as you don’t have to use sass/less if you don’t want to, but you can, I believe.

    Please, correct me if I’m wrong ASAP, before I switch to Bootstrap :)

    • You’re right. Technically you can use the @extend directive to make bootstrap more semantic. There’s no harm in doing that. In fact, I highly recommend you to do so if you’re sticking to bootstrap :)

      That said, I realized I didn’t do a very complete comparison between Susy’s grid and Bootstrap’s grid. There are so many more things that can only be done with a flexible grid like Susy. One such example is asymmetric grids, and you can find many great examples of such grids on

      I would strongly recommend giving Susy a deeper try :)

  • Interestingly, I find jeet to be much more complicated than Susy.

  • You can always use Susy together with a full framework like Bootstrap / Foundation :) That topic is coming up as a next article, I just can’t reveal when it will be ready yet :)

    Nope there’s no documentation / example out there to show you how to replicate the block grids. But you can basically get them up yourself easily with Susy once you know the inner workings. Check out the sample chapters in “Learning Susy” link in the bio, I think it’ll help :)

  • Sully

    Thanks for the info on Susy. I plan to look at it in more detail soon.

    You’re a bit off on your Bootstrap info though. Bootstrap also has Sass and Less mixins that let you use your own semantic class names in the HTML and handle all of the grid work in the CSS. Your article seems to imply that this functionality does not exist in Bootstrap, which seems a bit biased. I’m sure that wasn’t your intent though.

    I’d have preferred a comparison of that same functionality in both frameworks along with an explanation of why you think Susy handles it better. I would have also liked to read more about Susy’s superior customization of the grid, including the ability to work with asymmetric grids, since that appears to be it’s primary advantage over Bootstrap’s grid system from my perspective.

    But thanks again for the info on Sussy. And good luck with your book.

    • You’re right, I definitely could have done better with explaining how Susy could be more superior in customising the grid. Thanks for notifying me on that, It’s something I need to work on :)

      I do have one tutorial on how to work on Asymmetric grids, its found here:

      Hope you like it :)

  • Eric Njanga

    Great explanation. I’m a longtime bootstrap user and I recently tired Susy. I also agree on the fact that Susy is a better grid system.

  • salvatore fusto

    I like your approach to responsiveness, imho responsive design does not depend only on target dimensions but on content too: i.e. you can have columns shown, on the same device, in different way based on their content;, so i agree with your breackpoints managment.

  • thedigitalmonk

    This is excellent! I work with _s WordPress starter theme a lot for WordPress projects. Susy will fit nicely with it and I wouldn’t have to go and add those col-md-* classes to elements everywhere. Superb. Thank you for writing this @zellliew:disqus ! :)

  • Micah Godbolt

    I interviewed Eric Suzanne (The author of Suzy) a few months ago on Sass Bites. I’ve got a few other videos there about how to setup/use the grid system. (Sorry about the audio on the last video).

  • Thank you for the very well written article and the very simple and clear explanation of what a grid system is. I was curios about the following – if one switches from Bootstrap to Susy, one only gets and alternative grid system. The other two points (Styles for common web elements like navigation, forms, alerts, and icons, jQuery plugins for complex elements like accordions and carousels), which you mentioned don’t get a direct replacement. Is there some standalone tool for this, so that you could say: alternative 1: Bootstrap, alternative 2: susy + tool(s) A(, B, C)?

    • A post on this is coming up very soon :)

  • One more question – where does Compass fit in the whole picture? I know that Susy is intended to play nice with Compass, but as I cannot clearly explain what Compass does, I don’t understand its role in relation to Susy.

  • Is it Susy or Suzy?

    • It is pronounced Suzy (or I guess you could spell it Susie)

    • Felipe Paes

      It is Susy, the pronounce is soo-zee.

  • In this article you have compared features of Bootstrap and Susy grid here

    Number of columns

    Size of each individual column

    Size of gutter

    How gutters are positioned

    Number of breakpoints

    Sizes of breakpoints

    Document flow from left to right or right to left

    Box model used for the grids

    Can you please give some more info on underlines points

  • octavioamu

    This not right, maybe you are based in an older Bootstrap version but you don’t need to use non semantic css class in you html (and you shoudn’t) You can use mixins like suzy in your less files

  • Nazar Jumangy

    Custom Flexbox Grid using Bootstrap mixins (SASS)

    Custom grid new layout module flexbox in css3. Flexbox grid uses the
    same classes as bootstrap grid

  • Luca Ban

    Hey @zellliew:disqus

    Do you still use Susy now? With all these advancements on Grid.

    • Nope, I’m moving away from Susy, into gird now. I still use Susy as fallbacks whenever required though.

Get the latest in Front-end, once a week, for free.