Understanding bootstrap

Head

For mobile friendly with zoom

<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>

Disable zoom. Looks more like native app

<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

Container

Responsive fixed width container

<div class="container"> 
... 
</div>

Full width container, spanning the entire width of your viewport

<div class="container-fluid"> 
... 
</div>

Scroll spy

<body data-spy="scroll" data-target="#my-navbar">

Smooth Scroll (put script after jquery)

Example:

<li><a class=”smoothScroll” href=”#feedback”>Feedback</a></li>
<li><a class=”smoothScroll” href=”#kimaction“>Call to Action</a></li>

<div id=”kimaction“>Call to Action landed</div>

<script>
$(function() {
 // Only allow class smoothScroll to prevent problems with carousel, scrollspy, etc
 $('.smoothScroll').click(function() {
 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top
 }, 750); // Speed of the scroll in milliseconds
 return false;
 }
 }
 });
});
</script>

Center content blocks

Bootstrap method

<div class="center-block" style="border: 1px solid silver;">
    <p style="text-align: center;">Center block</p>
</div>

Manually

<div style="border: 1px solid silver; display: block; margin-left: auto; margin-right: auto;">
    <p style="text-align: center;">Center block</p>
</div>

Panel

<div class="panel panel-primary">
   <div class="panel-heading">
            <h3 class="panel-title">title goes here</h3>
   </div>
   <div class="panel-body">
            <p>body goes here</P>
            <p>body goes here</P>
            <p>body goes here</P>
   </div>
</div>

Label

Override the label font

label { 
  font-weight: normal !important; 
}

Buttons

<a href="#" class="btn btn-lg btn-danger">Delete <span class="glyphicon glyphicon-trash"></span></a>

More buttons at http://bootsnipp.com/buttons#

Drop shadow

<div style="background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px; ">

Clearfix (clear: both;)

<div class="clearfix">...</div>

Nav bar always on top

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
   <div class="container"> 
       <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
                       <span class="icon-bar"></span> 
                       <span class="icon-bar"></span> 
                       <span class="icon-bar"></span> 
                       <span class="icon-bar"></span> 
              </button>
       </div>
       <div class="collapse navbar-collapse" id="navbar-collapse">
             <a href="#" class="btn btn-info navbar-btn navbar-right">Download</a>
             <ul class="nav navbar-nav"> 
                  <li><a href="#">Feedback</a></li> 
                  <li><a href="#">Feedback</a></li> 
                  <li><a href="#">Feedback</a></li> 
                  <li><a href="#">Feedback</a></li> 
             </ul>
       </div>
   </div>
</nav>

Scroll effect for all anchor links

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>

Bootstrap for Sass

Edit composer.json to use Sass on Laravel

"require-dev": { 
       "panique/laravel-sass": "dev-master" 
}

Note the require-dev, not a normal require