HackerThemes
p/hackerthemes
UI/UX based on Bootstrap. Made for web developers
Espen Kulia

Bootstrap 4 Cheat Sheet — An interactive Bootstrap 4 cheat sheet

35

Replies
Best
Joshua Pinter
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
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
@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
@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.
Marek Hrabe
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
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?
Guillaume Ðarbonne
This is what's going to be mostly use http://hackerthemes.com/bootstra... ^_^
Jesse Williams
This is a great resource - thanks for putting it together, I don't think that I've even seen some of these bootstrap elements. Good stuff!!!
GeoNomad
I like the cheatsheet. Should we be using Bootstrap 4 or 3 right now? How about a cheatsheet for 3 and/or indicating any differences on the sheet?
Jerome Dahdah
@geonomad I'd definitely refrain from using alpha products in a production environment. There are bound to be changes by the time they're through beta, some of which might break things. Stick with 3, it does a good job and it's been tested to hell and back.
GeoNomad
@parasight Thanks. I have only just started using Bootstrap 3, so will just continue to wait for 4's official release. Meanwhile a cheatsheet like that for 3 would come in handy for us dilettantes.
Joshua Pinter
@peedutuisk Except it's not, is it? Plus, you miss out on all the footnotes in the official docs.
Peedu Tuisk
@joshuapinter Yea I'm not sure I understand the hype on this one to be honest… Guess I'm just not the target market.
Alexander Rechsteiner
@peedutuisk @joshuapinter I never meant for it to replace the official Bootstrap docs to be honest. The goal was to provide a reminder for people who know Bootstrap already and need to lookup class names quickly - providing a code sample and preview if needed. Ideally it would cover most cases and when it does not, people can drill down into the official documentation for more detailed info.
Steve McLeod

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

Pros:

A great complement to Bootstrap's own docs

Cons:

I see no obvious room for improvement

Chema
when a BS3 to BS4 converter? because the migration looks hell to me :S
Rahul Singh
This is great. A friend shared this link with me. I wonder if such a reference guide exists for react bootstrap as well
Fraser Smith
This could end up being the go-to resource for Bootstrap syntax.
Jason Ephraim
Awesome reference for web designers from @arechsteiner
Alexander Rechsteiner
The responses here are very encouraging. Thank you all for your kind comments!
Tony Xiao
Can't believe Bootstrap 4 is still in Alpha! But this cheatsheet is neat :)
Giacomo Lawrance
Super helpful, thanks so much! Really easy to find what I'm looking for. Thanks!
Scott Miller
Thanks for this! I am excited for BS4. You are making it easier on early adopters!
Enes Emini
Awesome! Added to my bookmarks! I have yet to use version 4 of bootstrap on a new project.
Josef Novak
This is super helpful also for those moving from version 3 to 4 like me :)
Timea Kissiova
I was waiting for something like this. Very good help material.
Giacometti Noel

to integrate in the pages

Pros:

simple

Cons:

more samples

Walter Reid
A great resource!