6 ms·

I have a hard time qualifying most of these as "tricks," which would imply some hidden or barely-utilized feature. Most of these are quite explicitly described

by nkozyra 13y ago

I have a hard time qualifying most of these as "tricks," which would imply some hidden or barely-utilized feature. Most of these are quite explicitly described in the documentation (img-responsive, nested columns, responsive grids, container-fluid are all very upfront in the documentation). And on a UX note, I cannot see any advantage to the animated, slightly expanding prettyprint code boxes. I don't think this is a valuable piece of UI.

aram 13y ago
Completely agree; with the exception of first item (dropdown on hover), all other items are pretty regular, documented things that are easy to understand if you are already using Bootstrap.
Touche 13y ago
It's easy to miss things in documentation because there is so much of it. The bootstrap documentation is really a reference utility. This article is great even for stuff that is in the documentation because you might not think to look for it.
- nkozyra 13y ago
  Surprised to see this - given the amount of technical detail inherent in common Web libraries (Angular, jQuery, even jQueryUI), Bootstrap is downright lean. You could read about every grid detail, form & UI element and JS element in less than 20 minutes.
  - claar 13y ago
    As you know, the problem is the sheer number of libraries we use. Even if they were all as lean as Bootstrap, I will never know every tip and trick in all of them. Thus, articles like this one have their place, and I for one thought it picked out some nice under-utilized pieces.
- DatBear 13y ago
  Really? When I first heard about Bootstrap I found it pretty easy to look at almost all of the documentation in under an hour, and it covered all of these things, except the hover dropdown, which is simple css, and the media queries. From the first bullet point in the "Grid System": >Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Different stacking in mobile and desktop: http://getbootstrap.com/css/#grid-example-mixed http://getbootstrap.com/css/#grid-example-mixed Nesting Columns: http://getbootstrap.com/css/#grid-nesting http://getbootstrap.com/css/#grid-nesting Column Ordering: http://getbootstrap.com/css/#grid-column-ordering http://getbootstrap.com/css/#grid-column-ordering Lead class: http://getbootstrap.com/css/#type-body-copy http://getbootstrap.com/css/#type-body-copy Block Quotes: http://getbootstrap.com/css/#type-blockquotes http://getbootstrap.com/css/#type-blockquotes Inline Lists: http://getbootstrap.com/css/#type-lists http://getbootstrap.com/css/#type-lists Inline Forms (helping screen readers): http://getbootstrap.com/css/#forms-inline http://getbootstrap.com/css/#forms-inline Images: http://getbootstrap.com/css/#images http://getbootstrap.com/css/#images I guess you might not think to look for it in the documentation, but if you don't think to look for it, that means you probably aren't using it, and don't need it... I still wouldn't really call any of these things tips or tricks, it's just actually reading the documentation of what framework you're using, which apparently people don't do?
- natural219 13y ago
  I agree up until "Different Grid Columns at Different Device Sizes". That section does not qualify as a "tip" or "trick" -- it's perhaps the most fundamental part of using Bootstrap's "grid system" layout.
kawliga 13y ago
100% agree. Someone is pushing this site.
- davidw 13y ago
  On HN, we aren't ashamed to "push" things we've done or written up, as long as it's not all we do here. It takes hard work to create something, and if you don't believe in it enough to push it, who will?
  - codecondo 13y ago
    who is we?
    - lgas 13y ago
      The HN community.
claar 13y ago
This is a case of "the 10000" http://xkcd.com/1053/ http://xkcd.com/1053/ to me. I've only been using bootstrap for 9 months, and I learned 4+ extremely useful tips from this article.
- nkozyra 13y ago
  Not to be pedantic, but as mentioned elsewhere every tip here (sans the dropdown on hover one) is in the documentation itself. I'm really not trying to poo-poo the article but you could pluck 10 random things from Bootstrap's relatively simple documentation and have the same thing. Maybe if it were titled "cool things in Bootstrap" instead of being presented as "tricks."
  - xauronx 13y ago
    What exactly is a "trick" then? I would argue that they're useful bits of functionality that a group of people might not know. For instance, if I post "math tips and tricks" to my facebook followers they'd be like "ooh, nice tips" but if I post them on a /r/mathematics I'd be told "they aren't tricks, that's just the way math works". I think you're just basically saying "I know this already so everyone else should too".
    - saurik 13y ago
      Math "tricks" are usually computational in nature (and so not particularly "mathematics") and while it might be obvious how they work to a mathematician, they are unlikely something the mathematician would expect to find in a textbook. (I was a math major for a few years in college, and have a ton of friends who still do research in and around mathematics today.)
  - nkozyra 13y ago
    > What exactly is a "trick" then? I'd call a trick something that is not part of the documentation core, something that has unexpected effect or behavior that was unintended initially. None of those would apply here.
baby 13y ago
Right, I didn't learn anything and I don't think I'm a bootstrap master.

by nkozyra 13y ago

aram 13y ago

Completely agree; with the exception of first item (dropdown on hover), all other items are pretty regular, documented things that are easy to understand if you are already using Bootstrap.

Touche 13y ago

It's easy to miss things in documentation because there is so much of it. The bootstrap documentation is really a reference utility. This article is great even for stuff that is in the documentation because you might not think to look for it.

nkozyra 13y ago
Surprised to see this - given the amount of technical detail inherent in common Web libraries (Angular, jQuery, even jQueryUI), Bootstrap is downright lean. You could read about every grid detail, form & UI element and JS element in less than 20 minutes.
- claar 13y ago
  As you know, the problem is the sheer number of libraries we use. Even if they were all as lean as Bootstrap, I will never know every tip and trick in all of them. Thus, articles like this one have their place, and I for one thought it picked out some nice under-utilized pieces.
DatBear 13y ago
Really? When I first heard about Bootstrap I found it pretty easy to look at almost all of the documentation in under an hour, and it covered all of these things, except the hover dropdown, which is simple css, and the media queries. From the first bullet point in the "Grid System": >Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Different stacking in mobile and desktop: http://getbootstrap.com/css/#grid-example-mixed http://getbootstrap.com/css/#grid-example-mixed Nesting Columns: http://getbootstrap.com/css/#grid-nesting http://getbootstrap.com/css/#grid-nesting Column Ordering: http://getbootstrap.com/css/#grid-column-ordering http://getbootstrap.com/css/#grid-column-ordering Lead class: http://getbootstrap.com/css/#type-body-copy http://getbootstrap.com/css/#type-body-copy Block Quotes: http://getbootstrap.com/css/#type-blockquotes http://getbootstrap.com/css/#type-blockquotes Inline Lists: http://getbootstrap.com/css/#type-lists http://getbootstrap.com/css/#type-lists Inline Forms (helping screen readers): http://getbootstrap.com/css/#forms-inline http://getbootstrap.com/css/#forms-inline Images: http://getbootstrap.com/css/#images http://getbootstrap.com/css/#images I guess you might not think to look for it in the documentation, but if you don't think to look for it, that means you probably aren't using it, and don't need it... I still wouldn't really call any of these things tips or tricks, it's just actually reading the documentation of what framework you're using, which apparently people don't do?
natural219 13y ago
I agree up until "Different Grid Columns at Different Device Sizes". That section does not qualify as a "tip" or "trick" -- it's perhaps the most fundamental part of using Bootstrap's "grid system" layout.

kawliga 13y ago

100% agree. Someone is pushing this site.

davidw 13y ago
On HN, we aren't ashamed to "push" things we've done or written up, as long as it's not all we do here. It takes hard work to create something, and if you don't believe in it enough to push it, who will?
- codecondo 13y ago
  who is we?
  - lgas 13y ago
    The HN community.

claar 13y ago

This is a case of "the 10000" http://xkcd.com/1053/ http://xkcd.com/1053/ to me. I've only been using bootstrap for 9 months, and I learned 4+ extremely useful tips from this article.

nkozyra 13y ago
Not to be pedantic, but as mentioned elsewhere every tip here (sans the dropdown on hover one) is in the documentation itself. I'm really not trying to poo-poo the article but you could pluck 10 random things from Bootstrap's relatively simple documentation and have the same thing. Maybe if it were titled "cool things in Bootstrap" instead of being presented as "tricks."
- xauronx 13y ago
  What exactly is a "trick" then? I would argue that they're useful bits of functionality that a group of people might not know. For instance, if I post "math tips and tricks" to my facebook followers they'd be like "ooh, nice tips" but if I post them on a /r/mathematics I'd be told "they aren't tricks, that's just the way math works". I think you're just basically saying "I know this already so everyone else should too".
  - saurik 13y ago
    Math "tricks" are usually computational in nature (and so not particularly "mathematics") and while it might be obvious how they work to a mathematician, they are unlikely something the mathematician would expect to find in a textbook. (I was a math major for a few years in college, and have a ton of friends who still do research in and around mathematics today.)
- nkozyra 13y ago
  > What exactly is a "trick" then? I'd call a trick something that is not part of the documentation core, something that has unexpected effect or behavior that was unintended initially. None of those would apply here.

baby 13y ago

Right, I didn't learn anything and I don't think I'm a bootstrap master.