In this tutorial, you will learn how to make your own Responsive Governor Theme using Bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Like any other framework, Bootstrap is completely compatible and easy to use with Governor.

Before getting started

CSS

In the head of your document add a link to Bootstrap's css file.

Example head.html

<meta charset="utf-8">
<title gv-title></title>
<meta gv-meta="keywords">
<meta gv-meta="description">
<meta gv-meta="author">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="assets/css/bootstrap.css">
    

Remember, if using the include head.html it should be placed within the includes folder and you have referenced it using gv-includes="head.html" in your master.html.

Javascript

To take advantage of all the javascript plugins Bootstrap offers you will need to add Bootstraps initializing script to the bottom of your document.

Example master.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <div gv-includes="head.html"></div>
    </head>
    <body>
        <div gv-includes="nav.html"></div>
        <div gv-content></div>
        <div gv-includes="footer.html"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>
    

Adding the script to the bottom of the master.html insures it will work on every page.

Bootstrap Example

Example index.html

<div class="row" -block="Block One">
    <div class="col-md-4">
        <img gv-img -label="Image"/>
    </div>
    <div class="col-md-8">
        <h4 gv-text -label="title"></h4>
        <div class="row">
            <div class="col-md-6">
                <p gv-textarea -label="Text"></p>
                <a gv-link -label="Bootstrap Primary Link button" class="btn btn-lg btn-primary"></a>
            </div>
        <div class="col-md-6">
            <p gv-textarea -label="Text"></p>
            <a gv-link -label="Bootstrap Danger Button" class="btn btn-danger"></a>
        </div>
        </div>
    </div>
</div>
<div class="row" -block="Block Two">
    <div class="col-md-8">
        <div class="well">
            <p gv-text></p>
        </div>
    </div>
    <div class="col-md-4">
        <img gv-img -label="Image">
    </div>
</div>
    

Summary

In just two easy steps Bootstrap is installed and ready to use with your Governor Theme. For more information on Bootstrap please visit, getbootstrap.com

Did this answer your question?