Components

Self-contained components

Forms

With Brandaris you can easily add every form that you want.

Textual inputs

Here are examples of each textual HTML5 <input> type.

Some static input 
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-text-input-0">Text</label>
  </div>
  <div class="col-10">
    <input type="text" value="Lorem ipsum" id="example-text-input-0">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-search-input">Search</label>
  </div>
  <div class="col-10">
    <input type="search" value="How do I shoot web" id="example-search-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-email-input">Email</label>
  </div>
  <div class="col-10">
    <input type="email" value="bootstrap@example.com" id="example-email-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-url-input">URL</label>
  </div>
  <div class="col-10">
    <input type="url" value="https://getbootstrap.com" id="example-url-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-tel-input">Telephone</label>
  </div>
  <div class="col-10">
    <input type="tel" value="1-(555)-555-5555" id="example-tel-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-password-input">Password</label>
  </div>
  <div class="col-10">
    <input type="password" value="hunter2" id="example-password-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-number-input">Number</label>
  </div>
  <div class="col-10">
    <input type="number" value="42" id="example-number-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-datetime-local-input">Date and time</label>
  </div>
  <div class="col-10">
    <input class="input" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-date-input">Date</label>
  </div>
  <div class="col-10">
    <input type="date" value="2011-08-19" id="example-date-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-month-input">Month</label>
  </div>
  <div class="col-10">
    <input type="month" value="2011-08" id="example-month-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-week-input">Week</label>
  </div>
  <div class="col-10">
    <input type="week" value="2011-W33" id="example-week-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-time-input">Time</label>
  </div>
  <div class="col-10">
    <input type="time" value="13:45:00" id="example-time-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-color-input">Color</label>
  </div>
  <div class="col-10">
    <input type="color" value="#563d7c" id="example-color-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-file-input">File</label>
  </div>
  <div class="col-10">
    <input type="file" id="example-file-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label>Static</label>
  </div>
  <div class="col-10">
    <span class="input input-static">Some static input</span>
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label>Disabled</label>
  </div>
  <div class="col-10">
    <input type="text" disabled value="Disabled input field" id="example-disabled-input">
  </div>
</div>
<div class="row middle mb-2">
  <div class="col-2">
    <label>Select</label>
  </div>
  <div class="col-10">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Textarea

<div class="row mb-2">
  <div class="col-2">
    <label for="example-textarea-input">Textarea</label>
  </div>
  <div class="col-10">
    <textarea id="example-textarea-input" rows="3"></textarea>
  </div>
</div>

Inline

<div class="row middle mb-2">
  <div class="col-2">
    <label for="example-text-input-1">Text</label>
  </div>
  <div class="col-10">
    <input type="text" value="Lorem ipsum" id="example-text-input-1">
  </div>
</div>

Below

<div class="row mb-2">
  <div class="col-12">
    <label for="example-text-input-2">Text</label>
    <input type="text" value="Lorem ipsum" id="example-text-input-2">
  </div>
</div>

Disabled text

<div class="row mb-2">
  <div class="col-12">
    <label for="example-text-input-3">Text</label>
    <input type="text" value="Lorem ipsum" id="example-text-input-3" value="Lorem ipsum" disabled>
  </div>
</div>

Checkboxes

True or false, let’s check this!

Default

<div class="check mb-2">
  <input class="check-input" type="checkbox" id="checkbox-example">
  <label class="check-label" for="checkbox-example"></label>
</div>

With alternate color

<div class="check-wrap mb-2">
  <div class="check bg-primary clr-white">
    <input class="check-input" type="checkbox" id="checkbox-example2">
    <label class="check-label" for="checkbox-example2"></label>
  </div>
</div>

Disabled checked

<div class="check mb-2">
  <input class="check-input" type="checkbox" id="checkbox-example3" checked disabled>
  <label class="check-label" for="checkbox-example3"></label>
</div>

Disabled unchecked

<div class="check mb-2">
  <input class="check-input" type="checkbox" id="checkbox-example4" disabled>
  <label class="check-label" for="checkbox-example4"></label>
</div>

With label

<div class="check-wrap mb-2">
  <div class="check">
    <input class="check-input" type="checkbox" id="checkbox-example5">
    <label class="check-label" for="checkbox-example5"></label>
  </div>
  <label for="checkbox-example5">Example label</label>
</div>

Switch

<div class="check mb-2">
  <input class="check-input check-switch" type="checkbox" id="checkbox-switch-example">
  <label class="check-label" for="checkbox-switch-example"></label>
</div>

And with text label:

<div class="check-wrap mb-2">
  <div class="check">
    <input class="check-input check-switch" type="checkbox" id="checkbox-switch-example2">
    <label class="check-label" for="checkbox-switch-example2"></label>
  </div>
  <label for="checkbox-switch-example2">Example label</label>
</div>

Validation

Give me the errors!

Info

<div class="row mb-2">
  <div class="col-12 feedback info">
    <label for="example-text-input-3">Text</label>
    <input type="text" value="Lorem ipsum" id="example-text-input-3">
    <span class="help clr-primary"><span class="icon clr-primary">{% icon info-with-circle.svg %}</span> This is the info message!</span>
  </div>
</div>
<div class="row mar-bottom">
  <div class="col-12 feedback info">
    <label for="example-textarea-2">Textarea</label>
    <textarea id="example-textare-2" rows="3"></textarea>
    <span class="help clr-primary"><span class="icon clr-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 .4C4.697.4.399 4.698.399 10A9.6 9.6 0 0 0 10 19.601c5.301 0 9.6-4.298 9.6-9.601 0-5.302-4.299-9.6-9.6-9.6zm.896 3.466c.936 0 1.211.543 1.211 1.164 0 .775-.62 1.492-1.679 1.492-.886 0-1.308-.445-1.282-1.182 0-.621.519-1.474 1.75-1.474zM8.498 15.75c-.64 0-1.107-.389-.66-2.094l.733-3.025c.127-.484.148-.678 0-.678-.191 0-1.022.334-1.512.664l-.319-.523c1.555-1.299 3.343-2.061 4.108-2.061.64 0 .746.756.427 1.92l-.84 3.18c-.149.562-.085.756.064.756.192 0 .82-.232 1.438-.719l.362.486c-1.513 1.512-3.162 2.094-3.801 2.094z"/></svg></span> This is the info message!</span>
  </div>
</div>

Warning

<div class="row mb-2">
  <div class="col-12 feedback warning">
    <label for="example-text-input-5">Text</label>
    <input type="text" value="Lorem ipsum" id="example-text-input-5">
    <span class="help clr-tertiary"><span class="icon clr-secondary">{% icon warning.svg %}</span> This is the warning message!</span>
  </div>
</div>
<div class="row mar-bottom">
  <div class="col-12 feedback warning">
    <label for="example-textarea-2">Textarea</label>
    <textarea id="example-textare-2" rows="3"></textarea>
    <span class="help clr-secondary"><span class="icon clr-secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M19.511 17.98L10.604 1.348a.697.697 0 0 0-1.208 0L.49 17.98a.675.675 0 0 0 .005.68c.125.211.352.34.598.34h17.814a.694.694 0 0 0 .598-.34.677.677 0 0 0 .006-.68zM11 17H9v-2h2v2zm0-3.5H9V7h2v6.5z"/></svg></span> This is the warning message!</span>
  </div>
</div>

Danger

<div class="row mb-2">
  <div class="col-12 feedback danger">
    <label for="example-text-input-7">Text</label>
    <input type="text" value="Lorem ipsum" id="example-text-input-7">
    <span class="help clr-tertiary"><span class="icon clr-tertiary">{% icon new.svg %}</span> This is the danger message!</span>
  </div>
</div>
<div class="row mar-bottom">
  <div class="col-12 feedback danger">
    <label for="example-textarea-2">Textarea</label>
    <textarea id="example-textare-2" rows="3"></textarea>
    <span class="help clr-tertiary"><span class="icon clr-tertiary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18.69 12.344l-1.727-1.538c-.5-.445-.5-1.174 0-1.619l1.727-1.539c.5-.445.367-.859-.296-.924l-2.29-.217c-.662-.062-1.02-.633-.791-1.266l1.215-3.383c.228-.635-.051-.865-.619-.514l-2.701 1.67a1.158 1.158 0 0 1-1.631-.426L10.599.842C10.27.254 9.727.252 9.392.834l-.909 1.58c-.337.585-1.108.833-1.713.556l-1.6-.734c-.608-.28-1.073.042-1.037.716l.086 1.615c.037.674-.461 1.367-1.104 1.541l-1.545.414c-.642.174-.76.68-.26 1.125l1.727 1.539c.5.445.5 1.174 0 1.619L1.31 12.344c-.5.445-.368.877.293.957l2.095.254c.661.08 1.029.67.818 1.311l-1.074 3.258c-.211.641.09.889.668.555l2.463-1.426a1.321 1.321 0 0 1 1.729.408L9.324 19.2c.372.559.931.529 1.24-.068l.899-1.733a1.243 1.243 0 0 1 1.648-.543l1.734.867c.598.297 1.057-.01 1.021-.682l-.087-1.617c-.035-.674.461-1.365 1.106-1.539l1.543-.416c.644-.174.762-.68.262-1.125zM11 14H9v-2h2v2zm0-3H9V6h2v5z"/></svg></span> This is the danger message!</span>
  </div>
</div>
On this page