7 ms·

Bootstrap 3 Tips and Tricks

207 points by scotchio 12y ago

azoapes 12y ago
Aaaaaaaand it's down.
arb99 12y ago
site is down for me, but mirror here http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fscotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=sb http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...
- scotchio 12y ago
  Sorry guys, I didn't expect this much traffic. Working on it
genofon 12y ago
cached: http://webcache.googleusercontent.com/search?q=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&oq=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&aqs=chrome..69i57j69i58j69i60.2600j0j7&sourceid=chrome&es_sm=93&ie=UTF-8 http://webcache.googleusercontent.com/search?q=cache%3Ascotc...
elsherbini 12y ago
17 upvotes, and I've seen 4 come in while the site was down.
- aidos 12y ago
  Is it not reasonable to expect that the people who have come back to vote have already finished reading the article?
  - ihsw 12y ago
    I vote before looking at the article. Yes I've regretted it a few times, but generally I don't.
- MichaelApproved 12y ago
  Upvoting also "saves" an article. If you look at your profile, all the posts that you upvoted are listed under a link titled "Saved stories". Voting is also intended as a save this for later. It's not unreasonable to think that some people will save this story for later, even if the site is down.
  - aidos 12y ago
    Oh wow, I absolutely never knew that. Instead I dump the ones I want to check out in my scratch file.
nkozyra 12y 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 12y 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 12y 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 12y 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 12y 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 12y 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?
psteinweber 12y ago
Opened link, learned about .container-fluid within the first 30 seconds, life: changed. Thanks, very useful stuff!
noir_lord 12y ago
I like the tips but nosying around the rest of the site some of your other content is absolutely lovely. The chrome all-stars series is absolutely fantastic, I'm primarily a Firefox user (I've always preferred Firebug to Chrome Dev Tools) but I'm starting to realise that in a lot of ways chromes dev tools are much deeper than firebugs. Cheers :).
- Igglyboo 12y ago
  If he got rid of the bar on the right it would look much better, way too much clutter currently. It's very distracting.
  - noir_lord 12y ago
    While presentation is important it is only one part of the overall whole and given the choice I'll take a hideous but well written piece over a beautiful article that says nothing useful. note: I don't think this is hideous.
sologoub 12y ago
Cool write-up! One thing though, the hover menu doesn't really work with my Nexus 7, as it sends me straight to reddit. Hover in general assumes a mouse and doesn't work on mobile, which I'm guessing is why it was not included out of the box.
deleted 12y ago
[deleted]
subpixel 12y ago
May I politely suggest that the twirling-on-scroll social icons are a bit over the top? All that motion makes them something I instinctively want to avoid.
- matt_ 12y ago
  I found this incredibly off putting as well. Especially because of how fast they spun.
wnevets 12y ago
Where are the tricks? Most of them are lifted from the docs.
marcosdumay 12y ago
> It will stack like this on large devices (desktop): > And it will stack like this on small devices (tablets/phones, 768px and below): Isn't that the default behaviour of inline HTML elements? Honestly, most of the time I don't know what I gain by using Bootstrap, and would be very pleased if they distributted a Bootstrap-lite that only changed the default presentation of elements without all those containers, effects, and optional styles.
- alabut 12y ago
  That's not the default behavior for inline elements. In that example with the 4 hearts, you can imagine a visually ugly effect where a browser width is narrow enough to show 3 of them and the last one drops to a new line.
MBCook 12y ago
Went to the site on my iPhone, started reading, then got pushed into the iTunes Store to a free slot app by some scummy ad. Closed page. Didn't read.
- jakejake 12y ago
  I can't believe that Apple isn't blocking the ability for the browser to auto-open the app store. It's the absolute worst advertising experience imaginable because it actually closes the browser to open the app store. My response to leave a 1-star rating on whatever app is being advertised with a review stating that I don't like their advertising technique.
  - MBCook 12y ago
    I assume this is like pop-up blocking. You need to be able to open app store links some times (to get to the store to buy something), but you shouldn't be pushed there. But just like pop-ups, there is a big incentive for scummy advertisers to find ways around it. I've reported this kind of thing to better websites (ones I knew/trusted) when it happened and they fixed it. I don't know if this site is fine with this or is just the victim of a terrible ad network.
    - jakejake 12y ago
      It seems like it would be easy for Apple to add a confirmation like "Open in App Store?" Just like clicking on a phone number and have a confirmation before it starts dialing. Perhaps it's advantageous for Apple to keep it as-is, though? In the meantime, I just let the advertisers know my feelings with a 1-star review. If everybody did that it would probably put an end to these pop-ups, but I won't hold my breath.
duncans 12y ago
"hover dropdowns" - Nope. http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ http://uxmovement.com/navigation/why-hover-menus-do-users-mo...
trumbitta2 12y ago
Shameless plug: http://www.williamghelfi.com/bootstrap-in-practice http://www.williamghelfi.com/bootstrap-in-practice But I'm linking it only because in that page I offer my own tips and tricks via an email mini-course. Beginners have found it useful.
err4nt 12y ago
Heres an actual Bootstrap trick: Display placeholder text as tooltip content for focused, non-empty form inputs. Have you ever entered information into a form that used placeholder text to tell you what to write, and you already started typing so that text disappeared but forget what you're supposed to be writing? The only way to view that placeholder text is by clearing the input field, right? Well if you have Bootstrap included already we can do some magic! // Display placeholder="" text as tooltip for :focused, non-empty inputs $('form input').blur(function() { var inputVal = $(this).val(), titleText = $(this).attr('placeholder'); if ( inputVal != '' ) { $(this).tooltip({ title: titleText, trigger: 'focus', container: 'form' }); } });

207 points by scotchio 12y ago

Aaaaaaaand it's down.

arb99 12y ago

site is down for me, but mirror here http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fscotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=sb http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...

scotchio 12y ago
Sorry guys, I didn't expect this much traffic. Working on it

genofon 12y ago

cached: http://webcache.googleusercontent.com/search?q=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&oq=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&aqs=chrome..69i57j69i58j69i60.2600j0j7&sourceid=chrome&es_sm=93&ie=UTF-8 http://webcache.googleusercontent.com/search?q=cache%3Ascotc...

elsherbini 12y ago

17 upvotes, and I've seen 4 come in while the site was down.

aidos 12y ago
Is it not reasonable to expect that the people who have come back to vote have already finished reading the article?
- ihsw 12y ago
  I vote before looking at the article. Yes I've regretted it a few times, but generally I don't.
MichaelApproved 12y ago
Upvoting also "saves" an article. If you look at your profile, all the posts that you upvoted are listed under a link titled "Saved stories". Voting is also intended as a save this for later. It's not unreasonable to think that some people will save this story for later, even if the site is down.
- aidos 12y ago
  Oh wow, I absolutely never knew that. Instead I dump the ones I want to check out in my scratch file.

nkozyra 12y 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 12y 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 12y 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 12y 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 12y 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 12y 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?

psteinweber 12y ago

Opened link, learned about .container-fluid within the first 30 seconds, life: changed. Thanks, very useful stuff!

noir_lord 12y ago

I like the tips but nosying around the rest of the site some of your other content is absolutely lovely. The chrome all-stars series is absolutely fantastic, I'm primarily a Firefox user (I've always preferred Firebug to Chrome Dev Tools) but I'm starting to realise that in a lot of ways chromes dev tools are much deeper than firebugs. Cheers :).

Igglyboo 12y ago
If he got rid of the bar on the right it would look much better, way too much clutter currently. It's very distracting.
- noir_lord 12y ago
  While presentation is important it is only one part of the overall whole and given the choice I'll take a hideous but well written piece over a beautiful article that says nothing useful. note: I don't think this is hideous.

sologoub 12y ago

Cool write-up! One thing though, the hover menu doesn't really work with my Nexus 7, as it sends me straight to reddit. Hover in general assumes a mouse and doesn't work on mobile, which I'm guessing is why it was not included out of the box.

deleted 12y ago

[deleted]

subpixel 12y ago

May I politely suggest that the twirling-on-scroll social icons are a bit over the top? All that motion makes them something I instinctively want to avoid.

matt_ 12y ago
I found this incredibly off putting as well. Especially because of how fast they spun.

wnevets 12y ago

Where are the tricks? Most of them are lifted from the docs.

marcosdumay 12y ago

> It will stack like this on large devices (desktop): > And it will stack like this on small devices (tablets/phones, 768px and below): Isn't that the default behaviour of inline HTML elements? Honestly, most of the time I don't know what I gain by using Bootstrap, and would be very pleased if they distributted a Bootstrap-lite that only changed the default presentation of elements without all those containers, effects, and optional styles.

alabut 12y ago
That's not the default behavior for inline elements. In that example with the 4 hearts, you can imagine a visually ugly effect where a browser width is narrow enough to show 3 of them and the last one drops to a new line.

MBCook 12y ago

Went to the site on my iPhone, started reading, then got pushed into the iTunes Store to a free slot app by some scummy ad. Closed page. Didn't read.

jakejake 12y ago
I can't believe that Apple isn't blocking the ability for the browser to auto-open the app store. It's the absolute worst advertising experience imaginable because it actually closes the browser to open the app store. My response to leave a 1-star rating on whatever app is being advertised with a review stating that I don't like their advertising technique.
- MBCook 12y ago
  I assume this is like pop-up blocking. You need to be able to open app store links some times (to get to the store to buy something), but you shouldn't be pushed there. But just like pop-ups, there is a big incentive for scummy advertisers to find ways around it. I've reported this kind of thing to better websites (ones I knew/trusted) when it happened and they fixed it. I don't know if this site is fine with this or is just the victim of a terrible ad network.
  - jakejake 12y ago
    It seems like it would be easy for Apple to add a confirmation like "Open in App Store?" Just like clicking on a phone number and have a confirmation before it starts dialing. Perhaps it's advantageous for Apple to keep it as-is, though? In the meantime, I just let the advertisers know my feelings with a 1-star review. If everybody did that it would probably put an end to these pop-ups, but I won't hold my breath.

duncans 12y ago

"hover dropdowns" - Nope. http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ http://uxmovement.com/navigation/why-hover-menus-do-users-mo...

trumbitta2 12y ago

Shameless plug: http://www.williamghelfi.com/bootstrap-in-practice http://www.williamghelfi.com/bootstrap-in-practice But I'm linking it only because in that page I offer my own tips and tricks via an email mini-course. Beginners have found it useful.

err4nt 12y ago

Heres an actual Bootstrap trick: Display placeholder text as tooltip content for focused, non-empty form inputs. Have you ever entered information into a form that used placeholder text to tell you what to write, and you already started typing so that text disappeared but forget what you're supposed to be writing? The only way to view that placeholder text is by clearing the input field, right? Well if you have Bootstrap included already we can do some magic! // Display placeholder="" text as tooltip for :focused, non-empty inputs $('form input').blur(function() { var inputVal = $(this).val(), titleText = $(this).attr('placeholder'); if ( inputVal != '' ) { $(this).tooltip({ title: titleText, trigger: 'focus', container: 'form' }); } });