Lunds universitet - Style Guide

Search: Break 

<div class="mb-3">
    <label for="text" class="text-center w-100 form-label">Text Label</label>
    <div class="input-group mb-2 mb-lg-0 mb-2">
        <input type="text" id="text" class="form-control" name="text">
        <div class="d-none d-lg-block">
            <button class="btn btn-outline-primary rounded-0 w-100" type="submit">Sök</button>
        </div>
    </div>
    <div class="d-flex d-lg-none justify-content-center">
        <button class="btn rounded btn-primary" type="submit">Sök</button>
    </div>
</div>
 
<div class="mb-3{{modifiers modifiers}}">
  <label for="{{name}}" class="text-center{{modifiers label-modifiers}}">{{label}}</label>
  <div class="input-group mb-2 mb-lg-0{{modifiers group-modifiers}}">
    <input type="{{type}}" id="{{name}}" class="form-control" name="{{name}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if help}} aria-describedby="{{help.id}}"{{/if}}{{#if required}} required{{/if}}{{#if disabled}} disabled{{/if}}>
    <div class="d-none d-lg-block">
      <button class="btn{{modifiers submit-modifiers}}" type="submit">{{submit-label}}</button>
    </div>
  </div>
  <div class="d-flex d-lg-none justify-content-center">
    <button class="btn rounded btn-primary" type="submit">{{submit-label}}</button>
  </div>
  {{#if help}}
    {{render "@form-help" help}}
  {{/if}}
</div>
 
{
  "type": "text",
  "name": "text",
  "label": "Text Label",
  "submit-label": "Sök",
  "label-modifiers": [
    "w-100",
    "form-label"
  ],
  "group-modifiers": [
    "mb-2"
  ],
  "submit-modifiers": [
    "btn-outline-primary",
    "rounded-0",
    "w-100"
  ]
}

No notes defined.