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>

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</>

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.

Padding (Spacing Within)

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

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  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-->

About Our Sources

We work hard to maintain the validity and accuracy of the information we provide in our Before You Go guide to traveling into Mexico, and coming back to the United States. We source our information through government websites and the direct relationships we have with community and government leaders both in the United States and Mexico. Our team is based in San Diego and crosses the US/Mexico border often. Additionally we are involved with advocating for a better border crossing experience through our work with the Smart Border Coalition and regional chambers of commerce. Please contact us with questions or corrections.