kdarty
1/12/2017 - 3:29 PM

Bootstrap Articles, Tips and Tutorials

Bootstrap Articles, Tips and Tutorials

Bootstrap Articles, Tips and Tutorials

Responsive navbar menu using bootstrap

http://www.2my4edge.com/2015/02/responsive-navbar-menu-using-bootstrap.html

Show menu bar in scroll up, hide in scroll down using Javascript with Bootstrap

http://www.2my4edge.com/2015/12/show-menu-bar-in-scroll-up-hide-in.html

Bootstrap Collapsible Panels

http://jsfiddle.net/zessx/r6eaw/12/

Bootstrap 3.0 - Collapsable Panels

https://jsfiddle.net/Wc4xt/1052/

Bootstrap Collapsible Panels with Open/Close Buttons

http://jsfiddle.net/feus4177/aygcj/25/

Collapse Informational Text

http://jsfiddle.net/Dc6jF/ NOTE: This could be adapted for mobile only use.

Bootstrap Modal Dialogs

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

Understanding Bootstrap Modals

http://www.sitepoint.com/understanding-bootstrap-modals/

Twitter Bootstrap Button Styles – Best Practices

https://www.claromentis.com/blog/twitter-bootstrap-button-best-practices/

How to hide Bootstrap modal from Javascript? - StackOverflow

http://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-from-javascript

The following is the solution that worked best for me:

$("[data-dismiss=modal]").trigger({ type: "click" });

NOTE: This solution triggers the Modal's "Dismiss" button which in turn handles everything needed to properly "close" or "hide" a given Modal Dialog.

Animating a Twitter BootStrap Icon with CSS3

http://elijahmanor.com/animating-a-twitter-bootstrap-icon-with-css3/

Font Awesome Examples (including Animated Icons)

https://fortawesome.github.io/Font-Awesome/examples/

Bootstrap CSS Animate Loading Icon Button snippet

http://www.bootply.com/128062

Creating Animated Spinners with FontAwesome or Glyphicons

http://chadkuehn.com/animated-font-spinners/

Bootstrap Generators and WYSIWYG Editors

These "generators" can prove useful when learning Bootstrap to help get an understanding of how to properly style elements to work with Bootstrap.

Bootstrap Button Generator

http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

Form Builder and Generator for Bootstrap

http://bootsnipp.com/forms

Style Bootstrap Theme Generator

http://stylebootstrap.info/

Bootstrap Live Customizer

http://bootstrap-live-customizer.com/

Bootstrap Glyphicons

http://glyphicons.bootstrapcheatsheets.com/

NOTE: This "cheatsheet" allows you to easily copy the icon class, HTML Entity Code, etc.

Modals in Bootstrap 3

https://coolestguidesontheplanet.com/bootstrap/modal.php

NOTE: This is a great guide for everything you would want to know about Modals in Bootstrap.

Bootstrap Modal and popover with Velocity.js animation

http://codepen.io/macsupport/pen/OPwvwx

Bootstrap Equal Height Columns with CSS Flexbox

http://www.bootply.com/126437