{% extends layout_path %}

{% load static %}
{% load i18n %}

{% block title %}Fluid - Layouts{% endblock %}

{% block content %}

<!-- Layout Demo -->
<div class="layout-demo-wrapper">
  <div class="layout-demo-placeholder">
    {% if menu_horizontal %}
    <img src="{% static 'img/layouts/layout-horizontal-fluid-' %}{{ COOKIES.style|default:style }}.png" class="img-fluid" alt="Layout fluid" data-app-light-img="layouts/layout-horizontal-fluid-light.png" data-app-dark-img="layouts/layout-horizontal-fluid-dark.png">
    {% else %}
    <img src="{% static 'img/layouts/layout-fluid-' %}{{ COOKIES.style|default:style }}.png" class="img-fluid" alt="Layout fluid" data-app-light-img="layouts/layout-fluid-light.png" data-app-dark-img="layouts/layout-fluid-dark.png">
    {% endif %}
  </div>
  <div class="layout-demo-info">
    <h4>Layout fluid</h4>
    <p>Fluid layout sets a <code>100% width</code> at each responsive breakpoint.</p>
  </div>
</div>
<!--/ Layout Demo -->
{% endblock %}