Useful code snippets for Twitter Bootstrap 3.

01-default-media-query-break-points.css

@media(max-width:767px) {
    
}
@media(min-width:768px) {
    
}
@media(min-width:992px) {
    
}
@media(min-width:1200px) {
    
}

/**
 *
 * alternatives
 *
 */
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

    /* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}

    /* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

    /* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

    /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

    /* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

    /* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

    /* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

    /* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
}

/**
 * source: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
 */

02-contact-buttons-for-small-screens.html

<div class="col-md-12 bg-dark">
	<span class="visible-xs">
		<a href="mailto:[email protected]" class="btn" title="Send an email to [email protected]">
			<i class="fa fa-envelope"></i>
		</a>
	
		<a href="tel:+441324612267" class="btn" title="Call 01324 612 267">
			<i class="fa fa-phone"></i> Falkirk
		</a>
	
		<a href="tel:+441418914891" class="btn" title="Call 01324 612 267">
			<i class="fa fa-phone"></i> Hillington
		</a>
	</span>

	<span class="hidden-xs">
		<i class="fa fa-envelope"></i> <a href="mailto:[email protected]" title="Send an email to [email protected]">[email protected]</a>
	
		<i class="fa fa-phone"></i> Falkirk <a href="tel:+441324612267" title="Call 01324 612 267">01324 612 267</a>
	
		<i class="fa fa-phone"></i> Hillington <a href="tel:+441418914891" title="Call 01324 612 267">0141 891 4891</a>
	</span>
</div>

02-media-query-debugging-icons.html

<!-- Debugging to indicate current screen size -->
<span class="visible-xs">X Small (max-width:767px)</span>
<span class="visible-sm">Small (min-width:768px)</span>
<span class="visible-md">Medium (min-width:992px)</span>
<span class="visible-lg">Large (min-width:1200px)</span>

<!-- If using Font Awesome this will show the relevant icons for each break point -->
<span class="visible-xs"><i class="fa fa-lg fa-mobile" title="Optimised for mobile phone display"></i></span>
<span class="visible-sm"><i class="fa fa-lg fa-tablet" title="Optimised for tablet display"></i></span>
<span class="visible-md"><i class="fa fa-lg fa-laptop" title="Optimised for laptop display"></i></span>
<span class="visible-lg"><i class="fa fa-lg fa-desktop" title="Optimised for desktop display"></i></span>

Bootstrap 3 Snippets

01-default-media-query-break-points.css
02-media-query-debugging-icons.html
03-contact-buttons-for-small-screens.html

=======[ fix navbar to top on scroll ]=======

<script>
$(document).scroll(function(){
    var elem = $('.navbar'); // set target element id or class here as required
    if (!elem.attr('data-top')) {
        if (elem.hasClass('navbar-fixed-top'))
            return;
         var offset = elem.offset()
        elem.attr('data-top', offset.top);
    }
    if (elem.attr('data-top') - elem.outerHeight() <= $(this).scrollTop() - $(elem).outerHeight())
        elem.addClass('navbar-fixed-top');
    else
        elem.removeClass('navbar-fixed-top');
});
</script>

Sources:
http://stackoverflow.com/questions/12113926/creating-a-sticky-navbar-using-twitter-bootstrap
http://jsfiddle.net/yTqSc/39/

======================================================================

=======[ Example Table ]=======

.table-striped
.table-bordered
.table-hover
.table-condensed

.table-responsive - wrap <table class="table"... with <div class="table-responsive"> to make a table responsive.

<table class="table table-bordered table-striped table-hover table-condensed">
    <thead>
        <tr>
            <th>Item</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
    </tbody>
</table>

======================================================================