Starter Templates

The basic template is a guideline for how to structure your pages when building with a Bootstrap Theme. Included below are all the necessary bits for using the theme’s CSS and JS, as well as some friendly reminders.

Example


<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hello, World!</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css" type="text/css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet"> 

    <!-- Plugins -->
    <link rel="stylesheet" href="/assets/vendor/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="/assets/vendor/hamburgers/hamburgers.min.css" type="text/css">
    <link rel="stylesheet" href="/assets/vendor/animate/animate.min.css" type="text/css">

    <!-- Icons -->
    <link rel="stylesheet" href="/assets/fonts/font-awesome/css/font-awesome.min.css" type="text/css">

    <!-- Global style (main) -->
    <link type="text/css" href="/assets/css/boomerang.css" rel="stylesheet" media="screen">

    <!-- Custom style - Remove if not necessary -->
    <link type="text/css" href="/assets/css/custom-style.css" rel="stylesheet">

    <!-- Favicon -->
    <link href="/assets/images/favicon.png" rel="icon" type="image/png">

</head>
<body>

    <main class="body-wrap">
        ...
    </main>

    <!-- Core -->
    <script src="/assets/vendor/jquery/jquery.min.js"></script>
    <script src="/assets/vendor/popper/popper.min.js"></script>
    <script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- App JS -->
    <script src="/assets/js/boomerang.min.js"></script>
</body>
</html>