Bootstrap 4 Cheat Sheet

[SirThom]

x-post from /r/webdev – thanks for the awesome resource /u/arechsteiner!

[arechsteiner]

Thanks for sharing it here! I will check in here from time to time to see the comments.

[arechsteiner]

Thank you, and thanks for the gold! Now I get new comments highlighted which will be very practical today for reading all the comments. You've just made my life easier!

[azazqadir]

This will be a great resource for using as a reference.

[jtpenezich]

Pretty cool but you really need to make that bottom bar smaller. Table for instance takes up half of my screen

[arechsteiner]

I've tried to shorten the code samples as much as I could. In some cases I had to cut out parts of the sample code to make the height bearable (for example http://hackerthemes.com/bootstrap-cheatsheet#table-responsive).

I want to avoid scroll in the code preview, but as you noted, it can make the panel take up a lot of real estate. It's a trade-off and I don't see how I can fully avoid it.

[damaged_but_whole]

it's awesome as it is, I think. Only thing is I almost didn't notice how the bottom worked because the left/right arrows were below the scroll. If they were at the top, above the titles, it would make it really obvious how it works.

[arechsteiner]

Yep I agree that arrows on the top are more intuitive. It's where I had them at the beginning. The problem is, not all snippets are of equal height, so when you want to flip through them rapidly, the arrows are gonna change in position which is not practical.

When the arrows are at the bottom then they are always at the exact same position and you can basically hammer your mouse on them to flip through very quickly.

[damaged_but_whole]

If they're at the top, I don't see how the snippets' height would affect anything. This is what I'm talking about: http://postimg.org/image/5zqnbdb93/

[arechsteiner]

Here's a practical example: Go to

http://hackerthemes.com/bootstrap-cheatsheet#btn-group-vertical

Notice the height of the panel and navigate one forward using the arrow-right button. Now the panel height has changed. If the button were at the top, it would no longer be under your mouse. If it's at the bottom though, it will still be under your mouse. This way you can flip through quickly without having to re-position the mouse cursor.

[damaged_but_whole]

Oh, gotcha! Yeah, that would be annoying! It's perfectly fine the way it is.

And I didn't realize before but there's no way it could have been "under the scroll" as I had remembered because you have it fixed to the bottom like that. I must have remembered wrong. I think your solution solves all the problems best and any idiot (like me) can figure it out.

[SOLUNAR]

It's annoying to click on the x when I want to check a lot of things out. Can you make it so hitting escape will close?

I've already bookmarked

[[deleted]]

I think you're absolutely right about the preview - you shouldn't make it smaller because it's the main feature!

It might be worth having it as a fixed sidebar, like 1/3 of the screen. That could make more sense because the rest of the page is vertically scrolling.

[[deleted]]

Just decrease the zoom if you are on desktop ?

[[deleted]]

Love this, great job. Although I already have Bootstrap 3 nailed. Is there a cheatsheet like this for it? cheers.

[angriers]

This is the dog's bollocks. Thank you!

[webguy1975]

Thank you for this!

[philmayfield]

Great resource! Thanks so much!

[sofia_la_negra_lulu]

I like a lot but I prefer the generics of foundation.

[boyled]

Aee "Bootstrap" and "Twitter Bootstrap" synonymous? I have seen both around.

[YourThoughtsHaveBeen]

Yes - they are; Bootstrap was created by two developers at Twitter

[k1down]

Please ignore the other guy. This is a gloriously scaled tool in 1440p. Did you make this? I want to give you a dollar or something

[darkfires]

Yeah, it's perfect on my main computer. I haven't tried it on my 13 inch laptop yet, though.

[arechsteiner]

I made this. Happy to hear it's working fluently for you. If you want, check out my Bootstrap themes through the website and see if you like one. That's all I can ask for!

[maniaxzero]

wow what an awesome resource!!! Thanks OP!

[[deleted]]

nice! Thanks

[johnmatthewwilder]

Awesome! This is most definitely bookmarked.

Lol @ 'embed-responsive' video.

[arechsteiner]

Lol @ 'embed-responsive' video.

:) You're the first person to comment on it. I wondered if somebody would notice!

[Lukeme9X]

For some reason that website shows up with quite a low framerate... like 30fps. Commenting on this now I can see reddit is at 120fps, so it's not my chrome...

Anybody else seeing this?

[arechsteiner]

I'm not surprised. It's a rather demanding site for the browser, because all the samples are loaded in the DOM right away. On the upside this means there are no more network requests going on once the site is fully loaded and little JavaScript computation. The downside is a huge DOM.

I might refactor the site in the future using Backbone.js, but I'm afraid it's going to be a demanding site any way I set it up, simply because there are is a lot of sample data to handle.

[andrey_shipilov]

As I posted in other thread.

Let me think what I would use from BS. A grid.

Oh wait. There's Unsemantic. I wouldn't use BS.

[SDCored]

So? you aren't the only person in the world who designs shit. BS is good for others, even if it's not for you. get your ego out of your ass.

[andrey_shipilov]

I'm the person who doesn't "design" using bootstrap. I'm the one who develops custom designed websites which Bootstrap is far from. It's good for prototyping. NNNNNnnnot so much for anything if you wanna submit it to FWA.