13 Matching Annotations
  1. Jun 2019
  2. Feb 2019
  3. getbootstrap.com getbootstrap.com
    1. <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a> </nav>

      Fixed top Nav bar

  4. Oct 2018
    1. Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

      so import your custom stuff first, then bootstrap. this is how !default works (probably at sass level). this is demonstrated in the lines below this one... . And the reason is how !default is working, which is sass feature, so the default values come/included AFTER you've set your default values.

  5. Aug 2018
  6. getbootstrap.com getbootstrap.com
    1. Place various form controls and components within a navbar with .form-inline.

      Useful exactly as demonstrated here: search input in the navbar...

    1. To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

      This is handy to achieve divisions to grids in resolutions finer than 12 columns, and the possibilities are practically endless with this technique.

    2. d-none

      cool - this causes along with other classes here, that in width narrower than 'md', this is 'gone' - display: none...

    3. Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

      very good examples of determining column widths

    4. For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

      important gist of when to specific width of column, when not to.

    5. justify-content-md-center

      justify flex container content to the center, in md and above only (change to xl and reduce browser width to see this in action, applies only for XL widths)

    6. Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it

      Cool and handy. Again, achieved using flex-basis and flex-grow

    7. For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

      Handy and useful. This is achieved using flex-basis and flex-grow

    1. // No media query for `xs` since this is the default in Bootstrap

      This is a change from past versions of bootstrap