startbootstrap/templates/landing-pages.html

---
layout: default
title: Bootstrap Landing Page Templates
description: Free Bootstrap 4 landing page templates and page headers that can help you get started on your next Bootstrap based landing page project
permalink: /templates/landing-pages/

meta-title: Free Bootstrap Landing Page Templates

type: template
---

{% include masthead/masthead-page.html %}

<div class="container">

  <!-- Show paginated posts for the specificed collection -->
  <div class="row">
    {% assign sorted = site.templates | sort: "rank" %}
    {% for template in sorted %}
    {% if template.categories contains 'landing-page' %}
    <div class="col-md-4">
      <div class="item-preview mb-5">
        <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ template.src }}">
          <img class="img-fluid" src="{{ template.img-thumbnail }}" alt="{{ template.img-desc }}">
        </a>
        <div class="item-preview-title d-flex align-items-center">
            {{ template.title }}
            {% if template.pro %}
            <span class='badge badge-warning ml-auto small badge-pill'>Pro</span>
            {% else %}
            <span class='badge badge-success ml-auto small badge-pill'>Free</span>
            {% endif %}
        </div>
        <div class="item-preview-description">{{ template.bump }}</div>
      </div>
    </div>
    {% endif %}
    {% endfor %}

    {% include survey.html %}

  </div>
  <!-- /.row -->

</div>
<!-- /.container -->

<section class="after-loop">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/themes/" class="after-loop-item card border-0 card-themes shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Themes</h4>
            <p class="w-75">Fully designed and ready to modify and publish!</p>
            <i class="fal fa-paint-brush-alt"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/snippets/" class="after-loop-item card border-0 card-snippets shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Snippets</h4>
            <p class="w-75">Code snippets ready to copy and paste!</p>
            <i class="fal fa-code"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mx-auto">
        <a href="/guides/" class="after-loop-item card border-0 card-guides shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Guides</h4>
            <p class="w-75">Guides and tutorials to help you learn Bootstrap!</p>
            <i class="fal fa-books"></i>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>