
Bootstrap 3 Tips and Tricks - scotchio
http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know
======
nkozyra
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.

~~~
Touche
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
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
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.

------
duncans
"hover dropdowns" \- Nope.

[http://uxmovement.com/navigation/why-hover-menus-do-users-
mo...](http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-
than-good/)

------
MBCook
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
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
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
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.

------
subpixel
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_
I found this incredibly off putting as well. Especially because of how fast
they spun.

------
noir_lord
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
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
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.

------
err4nt
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'
            });
          }
        });

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

------
genofon
cached:
[http://webcache.googleusercontent.com/search?q=cache%3Ascotc...](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)

------
marcosdumay
> 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
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.

------
arb99
site is down for me, but mirror here
[http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...](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)

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

------
trumbitta2
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.

------
sologoub
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.

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

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

~~~
aidos
Is it not reasonable to expect that the people who have come back to vote have
already finished reading the article?

~~~
ihsw
I vote before looking at the article. Yes I've regretted it a few times, but
generally I don't.

------
azoapes
Aaaaaaaand it's down.

