{% extends 'layouts/base_background.html' %} {% load static %} {% block title %} Material Kit 2 by Creative Tim {% endblock title %} {% block body %} class="inputs-sections" {% endblock body %} {% block header %} {% include 'includes/navigation_light.html' %} {% endblock header %} {% block content %}

Inputs

Input dynamic

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <div class="input-group input-group-dynamic">
          <label class="form-label">Regular</label>
          <input type="text" class="form-control" >
        </div>
      </div>
    </div>
  </div>
</section>

Input static

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <div class="input-group input-group-static mb-4">
          <label>First Name</label>
          <input class="form-control" placeholder="eg. Thomas Shelby" type="text" >
        </div>
      </div>
    </div>
  </div>
</section>

Input outline

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <div class="input-group input-group-outline mb-4">
          <label class="form-label">Outline</label>
          <input class="form-control" type="text" >
        </div>
      </div>
    </div>
  </div>
</section>

Input with icon

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <div class="input-group input-group-dynamic mb-4">
          <span class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></span>
          <input class="form-control" placeholder="Search" type="text" >
        </div>
      </div>
    </div>
  </div>
</section>

Input success

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <input type="text" placeholder="Success" class="form-control is-valid" >
      </div>
    </div>
  </div>
</section>

Input error

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <input type="text" placeholder="Error" class="form-control is-invalid" >
      </div>
    </div>
  </div>
</section>

Input disabled

Copy 
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between py-2">
      <div class="col-lg-4 mx-auto">
        <input type="text" placeholder="Disabled" class="form-control"  disabled>
      </div>
    </div>
  </div>
</section>
{% endblock content %} {% block footer %} {% include 'includes/footer_fullscreen.html' %} {% endblock footer %} {% block javascripts %} {% include 'includes/scripts_sections.html' %} {% endblock javascripts %}