Category Archives: bootstrap

Order Box Layout in Modal

HTML

SCSS

 

Popper.js with Bootstrap

popper.js v2.0 not compatible with bootstrap v4. Use v1.0 instead.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.map

Popper.js official

https://popper.js.org/

HTML

 

Customize Bootstrap SCSS

Install bootstrap source

Import bootstrap in SCSS

Reference:

  1. https://stackoverflow.com/questions/22329145/include-bootstrap-in-laravel
  2. https://getbootstrap.com/docs/4.1/getting-started/theming/#importing

Boostrap Navbar Example

  1. Include jQuery
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
  2. Include boostrap
    http://getbootstrap.com/getting-started/#download

HTML Example:

Keep navbar as collapsed for all screen sizes.

Reference:
http://stackoverflow.com/questions/22462142/how-to-keep-bootstrap-3-navbar-as-collapsed-for-all-screen-sizes

Customization:

 

Popover Handling

This example will trigger a popover when a link is clicked and dismiss automatically in 3 seconds. 

 

viewport – page width in mobile devices

Basic:

Advance:

If you want pages are resized automatically basing on browser width and without (or few) RWD scripts, “viewport” is a good solution for this. The key is how to use attribute “maximum-scale”:

 Reference:

  1. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Related CSS:

References: