Can someone explain how bootstrap navigation changes look?

See more:

CSS3

style

navigation

bootstrap

Ok, i am familiar with grid systems, however i've been using Skeleton, and this is the first time i've developed for Mobile use as well as desktop.

I has informed bootstrap was a good route to use as it handles mobile very well. The responsive design of the grid system works well with mobile especially in terms of navigation panes.

Now my question is, how does bootstrap change the look of the menu when shrinks down. A friend was telling me its through media queries, but surely media queries just handles the size of the containers etc, and transparency it would seem when looking the css. How does it move the

element from across one bar, to into a smaller div (drop down menu) close the div, so its toggled by an icon, only show the icon when its below a certain width? It seems all black magic. If anyone could explain how the hell it knows to do this simply from css, i'd be very grateful !

Many thanks
one confused developer.

What I have tried:

I've tried researching boostrap, and collapse class on the navigation, but it just brings back info on the accordion, not this menu bar.