in Design

Designing with Bootstrap

Many of you might have already used Bootstrap to design some of your application layouts. If so, you likely did so based on a recommendation from a peer — indeed, the community is strong with Bootstrap. If you’re new to Bootstrap, or if you’re looking to better understand Bootstrap and why it’s so popular, then read on.

What is Bootstrap?

Bootstrap is a an HTML and CSS framework, built with the primary purpose of simplifying the creation of HTML layouts using a standard set of global CSS styles. Its core intention is to help you structure your base HTML & CSS so that it is efficient, effective, and HTML5 compliant. It was first built by the development team at Twitter, to help improve and abstract the design frameworks used on their products. Later, it was released as an open source project (twitter-bootstrap), and soon after it was rebranded as the independent project we know and love today: Bootstrap.

Should I use Bootstrap?

There are many different motivations for why you should (and shouldn’t) use Bootstrap. Here are some considerations:

PROS
  • It’s easy to install: Bootstrap can be installed either as a stand-alone CSS file, or if you use a web framework such as Ruby on Rails, as a gem
  • It supports complex layouts: Bootstrap makes it pretty simple to setup navigation bars, sidebars, grids, and much more
  • It includes standard styles: Just by importing Bootstrap, your entire site will immediately be styled up for you
  • It includes Javascript packages: Bootstrap also ships with some optional Javascript packages, which allow you to do some simple user interactions on the Bootstrap layouts (e.g. alert windows, modal dialogs, click interactions, etc.)
CONS
  • It’s fat: Bootstrap ships with a ton of CSS by default. It is a huge package, and it is likely a lot more than what you need for a simple layout
  • It includes standard styles: This is a con because if you don’t add your own styles on top of Bootstrap, your site looks like a no-effort template (a.k.a. the ‘Scaffold’ look)
  • It can be confusing to use: Understanding bootstrap and its layout system is no trivial task. It definitely takes some getting used to, and often things don’t work as expected at first, requiring debugging and potentially being a significant time sink.
  • Its documentation isn’t great: While the docs are definitely thorough, I often find it difficult to navigate them simply because there are so many different sections. Bootstrap is huge, and so understanding it requires investment.

Alternatives

The major alternative to Bootstrap: Zurb’s Foundation. The intent behind Foundation is to be simpler than Bootstrap; its goal is to give you the absolute essentials that you need to get your layouts done, and none of the cruft. As such, it’s a much smaller set of documentation to peruse, the styles are much more conservative (and thus are less likely to be identified as a “Foundation” look n feel; they are too simple).

Foundation also targets responsive design (which means building for other platforms such as mobile first) by default, whereas with Bootstrap you have to go out of your way to enable it.

Lastly, Foundation does not include any Javascript tools, as they are laser-focused on just helping you with your HTML and CSS. The main download page also lets you pick and choose which components you want, so you can get the minimum necessary.

Felippe Nardi has put together a simple comparison of Foundation vs Bootstrap that may help clarify the differences further, and help you choose between the two.

Update: Brandon suggested another simple alternative, PureCSS, which is a simple set of modules you can import if you just want some nice CSS without the hassle of a framework. Good stuff!

More Resources

  • Bootstrap Themes: For a quick way to get up and running with some snazzy unique Bootstrap layouts, there are a great set of themes and templates over at Start Bootstrap and PrepBootstrap, which are all built off of Bootstrap. I’m sure there are many more if you do some Googling.
  • Shoelace Visual Builder: If you feel a little overwhelmed starting a new layout from scratch, you should definitely check out a tool called Shoelace. It helps you visually construct (just by clicking in the preview diagram) a layout and gives you the resulting HTML. The tool is designed for Bootstrap, so it will generate HTML for you that is compatible with Bootstrap’s layout structures.
  • Bootstrap Grids Explained: If you’re looking to better understand how Bootstraps layout structures (e.g. the Grid system) works, check out this article which breaks down the subtle magic behind Bootstrap’s grid system. It’s a bit advanced reading, but it is interesting to learn how it’s actually done, in case you ever wanted to build a similar layout yourself by hand (or if you just want to appreciate the work that Bootstrap is saving you!).

Summary

I hope you found this breakdown useful, and that you now have a slightly better understanding of Bootstrap, and its place in the world of web development. Bootstrap is a great tool that helps simplify the task of building your HTML layouts, and it provides some great starter CSS. However, it should be seen as a base, and built on top of to customize your apps. In other words, you should use it as a tool to help enhance your site, but don’t let it become your site.

I leave you with this riveting performance by the man who calls himself The Unipiper. Enjoy:

Write a Comment

Comment

  1. Great article, and lots of awesome resources!

    At my internship, one of the projects we are working on uses Compass, which seems to be another CSS framework. Are you familiar with that one, and if so, what are your thoughts on it?

    • I’ve never actually used it, but I’ve heard a bunch about it. Some gems I’ve used in the past have had dependencies on it. It looks good, but note that it requires SASS. This dependency means that it’s probably not ideal for brand-new developers, but rather for more advanced ones that can take advantage of SASS.

      If you check out its homepage, you’ll find that its goals align with a more ‘advanced designer’ goals:
      – Experience cleaner markup without presentational classes.
      – It’s chock full of the web’s best reusable patterns.
      – It makes creating sprites a breeze.
      – Compass mixins make CSS3 easy.
      – Create beautiful typographic rhythms.
      – Download and create extensions with ease.

      Let me know how you like it if/when you end up using it!

  2. So I guess comments are not published to the site itself, eh? Why is that? (or maybe they are, and for some reason it’s just not showing up for me/ I’m not noticing them)

    • Oh hai! Yes, first-time setup issues — I’ve made it so comments appear automatically, and I now get notified properly of new ones. Thanks!

  3. I am a big fan of Bootstrap, it makes it very simple and easy to create fully responsive websites. if you don’t know anything about CSS3 Media Queries or Responsive Web Design, it’s not an issue you can learn basics of HTML and CSS and how to use Bootstrap to build fully responsive mobile first websites.

    Yes i agree Bootstrap offers a lot if features but you can use customizer to choose features you want.

    I use Bootstrap to create responsive themes, for my personal blog i have created child theme with Bootstrap and Twenty twelve theme and it was simple and easy for me.

    I have published a video course on udemy about Bootstrap and now i think i should publish some beginner and advance articles on my blog as

    • Thanks for the comment! Yes, I agree the customization and ease-of-use are a great reason why it’s so approachable. I think publishing guides on how to get really advanced with it is a great idea! I’d be happy to add your course as an additional resource to this post once you do so 🙂

  4. My partner and I absolutely love your blog and find nearly all of your
    post’s to be just what I’m looking for. Would you offer guest writers to write content for yourself?
    I wouldn’t mind publishing a post or elaborating on a few of the
    subjects you write related to here. Again, awesome blog!