-
.verticallyCollapsed: removes vertical margins
-
@grid-float-breakpoint: override value to set the point at which the the navbars etc collapse for mobile
-
.container vs .container-fluid: .container sets a fixed width, .container-fluid uses full width that adapts to device width. Important: Bootstrap 3.0 does not have container-fluid, it is the default (but it does not work with row/cols because the container class is the one that sets the negative margin to compensate for the gutter of the last col). We have to use:
container or container-fluid
row 1
col 1
col 2
...
col n
row 2
col 1
col 2
...
col n
...
row n
...
-
column classes:
- .col-lg: for large desktop and tv (>= 1200)
- .col-md: for large tablet (landscape) and small desktops (>= 992)
- .col-sm: mobiles and tablet (portrait or smaller ones) (>= 768)
- .col-xs: mobiles (< 768)
- So you can use a combination of them to setup how you want your cols (menu items) to stack up at different widths. The classes apply to widths GREATER THAN OR EQUAL TO the breakpoint sizes.
-
.hidden-xs (or sm, md, lg): to hide elem for that screen size or bigger
-
.show-sm (or xs, md, lg): to show elem for that screen size or bigger
-
To align a dropdown menu to the right (they are aligned to the left by default) add .pull-right to the UL of the dropdown. Useful when you have a dropdown positioned at the RHS of the screen, because otherwise part of the dropdown will overflow the width of the window