pixel
Get A Quote
Page Titles

Wrap page titles in <h1 class="display-5"> tags:

Notes:
  • You can change the size by changing the number from 1 to 6
  • display-1 is the largest, display-6 is the smallest
  • Bootstrap Reference
  • I created size 5 & 6 (it's not in the reference) 
<h1 class="display-5">This is a Page Title</h1>
Eg

Mandatory Auto Liability Insurance in Baja Norte

Lead Text

Wrap lead text (usually after title) in <p class="lead"> tags:

<p class="lead">This is a Page Title</>
Eg
Sub headers

Wrap subheaders in <h5> tags:

<h5>Subheader</h5>
Smaller Sub headers

Smaller subheaders, slightly bigger than bolded text, wrap in <h6> tags:

<h6>Smaller Subheaders</h6>
Margins (Spacing Between)

To add margins between elements, for example a paragraph of text, use the bootstrap classes to add more or less spacing around the element. For example to add 1 additional unit of spacing (approximately 2.5px) to the bottom margin of an element, use the class mb-1. Two units of spacing (approx 5px), use the class mb-2. You can add up to 5 units of spacing.

Top: mt-1, mt-2, mt-3, mt-4, mt-5.

Bottom: mb-1, mb-2, mb-3, mb-4, mb-5.

Right: mr-1, mr-2, mr-3, mr-4, mr-5.

Left: ml-1, ml-2, ml-3, ml-4, ml-5.

Padding (Spacing Within)

To add padding within an element. The pattern is the same above but uses "p" instead of "m"

Toppt-1, pt-2, pt-3, pt-4, pt-5.

Bottom pb-1, pb-2, pb-3, pb-4, pb-5.

Right pr-1, pr-2, pr-3, pr-4, pr-5.

Left pl-1, pl-2, pl-3, pl-4, pl-5.

Margin (spacing) example

For example wrap a paragraph that you want to put 2 units of top and bottom spacing like so:

<p class="mb-2 mt-2">Nice paragraph with spacing on top and bottom</p>
FAQs

FAQs are a little more complicated, and involve the use of the accordian set of classes.

Hints
First wrap the entire FAQ area in the main <div class="accordians accordions-faq"> classes.
Each question has it's own <div class="accordian"> (singular) class with accordion__head and accordion__body within
Using closing comments like <!-- /.accordions --> help you trace where elements start and end
Bonus!
Add the class 'accordions-search' to get a text search bar above the faqs
<div class="accordions accordions-faq accordions-search">

<div class="accordions accordions-faq">

    <div class="accordion">
        <div class="accordion__head">
            <h6>Is this my first FAQ question?</h6> <i class="ico-angle-down accordion__ico"></i>
        </div><!-- /.accordion__head -->
        <div class="accordion__body">
            <p>Hello!  I am the answer to the first question.</p>
        </div><!-- /.accordion__body -->
    </div><!-- /.accordion -->
    
    <div class="accordion">
        <div class="accordion__head">
            <h6>Are SECOND FAQ questions even better?</h6> <i class="ico-angle-down accordion__ico"></i>
        </div><!-- /.accordion__head -->
        <div class="accordion__body">
            <p>This is the answer to the second question</p>
        </div><!-- /.accordion__body -->
    </div><!-- /.accordion -->
    
</div><!-- /.accordions /.accordions-faq-->
Gallery Lightbox

Gallery lightboxes are responsive to mobile, but you will have to test to make sure the columns are even.

Hints
You can have multiple horizontal images per column. This is usefull if you have vertical images. 

    <div class="gallery" data-featherlight-gallery data-featherlight-filter="a">
        <div class="gallery-row">
            <a href="one-large.jpg"> <!--vertical photo-->
                <img src="one-small.jpg">
            </a>
            <a href="two-large.jpg"> <!--vertical photo-->
                <img src="two-small.jpg">
            </a>
            <a href="three-large.jpg"> <!--vertical photo-->
                <img src="three-small.jpg">
            </a>
        </div> <!--./gallery-row-->
        <div class="gallery-row">
            <a href="four-large.jpg"> <!--horizontal photo-->
                <img src="four-small.jpg">
            </a>
            <a href="five-large.jpg"> <!--horizontal photo-->
                <img src="five-small.jpg">
            </a>
        </div> <!--./gallery-row-->   
    </div> <!--./gallery-->
Google Map Box

This is using the Bootstrap embed classes.


        
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=218423293329152207211.0004e728a71f60fb77799&ie=UTF8&t=m&ll=32.542065,-117.034353&spn=0.002696,0.00575&output=embed"> </iframe>
    </div> <!--./embed-responsive-->