Bootstrap 4 Cheat Sheet

An interactive Bootstrap 4 cheat sheet

get it
#4 Product of the WeekApril 24, 2016


Josh Powell
Dmitry Chekalin
 +10 reviews
  • Steve McLeod
    Steve McLeodFounder, Feature Upvote

    A great complement to Bootstrap's own docs


    I see no obvious room for improvement

    Hopefully one day Bootstrap will have something like this on their own website.

    Steve McLeod has used this product for one year.


You need to become a Contributor to join the discussion - Find out how.
Marek Hrabe
Marek Hrabe@marek · Founder at Mockuuups. Previously Avocode
This is really great! I'm going to use that right now :) Personally, I would rather prefer a layout where the code and preview panel is on the right instead of being fixed on a bottom, because in most cases, it overlays the whole page. Other than that, I love it 👍
Alexander Rechsteiner
Alexander RechsteinerMaker@arechsteiner
Thanks for your feedback @marek. Placing the snippets and samples on the right side would also cover part of the cheat sheet I think. I decided to put it on the bottom because this way all links are reachable through scrolling at all times. May I ask what screen resolution you're viewing this with?
Joshua Pinter
Joshua Pinter@joshuapinter · Product at CNTRAL. Maker of ntwrk.
Wait, you can't edit the snippet and get a real-time preview? Without being able to do that I'm not seeing how this is much better than the official docs, which they've done a great job on.
Alexander Rechsteiner
Alexander RechsteinerMaker@arechsteiner
Thanks for your feedback @joshuapinter. I've considered integrating CodePen links for quickly playing around with the samples, but for now I'd like to keep it simple and avoid overloading it with features. As I've said in the comment above, it's rather meant as a quick lookup table for people working with Bootstrap on a regular basis. The assumption is that when you're using this cheat sheet, you would probably already have a dev environment running where you can fiddle with the component you're using.
Jerome Dahdah
Jerome Dahdah@parasight · Digital nomad, minimalist, designer.
@joshuapinter I don't think that's the point of it. I don't know any cheat sheets that let you edit code, nor would I need them. This tool makes it super easy to see all the available components that Bootstrap has to offer without having to trawl through the documentation, and copy the code for your production environment. I can see myself using this on a daily basis (at least until I can memorize all the Emmet shortcuts in Sublime Text).
Joshua Pinter
Joshua Pinter@joshuapinter · Product at CNTRAL. Maker of ntwrk.
@parasight Fair enough. I personally prefer to scroll through a section of the official docs and see what might work best for a particular task - they've done such a great job with them. But each to their own. I still think fiddling with it in real-time would be a nice feature, though.
Alexander Rechsteiner
Alexander RechsteinerMaker@arechsteiner
The responses here are very encouraging. Thank you all for your kind comments!
Jason Ephraim
Jason Ephraim@growwithjason · Campus Director DigitalCrafts Houston
Awesome reference for web designers from @arechsteiner
Guillaume Darbonne
Guillaume Darbonne@guidouil · Co-founder of
This is what's going to be mostly use ^_^