Forms

By default forms are inline with auto width.

<form>
  <label for="search">Search</label>
  <input class="field-light" id="search" type="text" placeholder="Search for product...">
  <button class="btn">Go!</button>
</form>

They also play nice with buttons.

<form>
    <input type="text" value="1">
    <input class="btn btn-primary" type="submit" value="Plaats in mandje">
</form>

Form with class form-full are 100% width for arguably the most (UX) friendly way to enter forms.

<form class="form-full">
  <label for="email">Email Address</label>
  <input type="text" id="email">
  <label for="password">Password</label>
  <input type="password" id="password">
  <label for="dropdown">Select</label>
  <select id="dropdown">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <label for="msg">Message</label>
  <textarea rows="3" id="msg"></textarea>
  <input class="btn" type="submit" value="Sign in">
</form>

Add class form-horizontal to use the grid classes INSIDE input fields. This way you can control the width of your fields based on the viewport size.

<form class="form-horizontal">
    <label class="col-sm-5">Postcode</label>
    <div class="col-sm-7">
        <input class="col-sm-5" type="text" placeholder="1234AB">
    </div>

    <label class="col-sm-5">Huisnummer + Toevoeging</label>
    <div class="col-sm-7">
        <input class="col-sm-3" type="text" placeholder="1">
        <input class="col-sm-2" type="text" placeholder="B">
    </div>

    <label class="col-sm-5">Adres</label>
    <div class="col-sm-7">
        <input class="col-xs-12" type="text" placeholder="Straatnaam wordt automatic ingevuld" disabled>
        <input class="col-xs-12" type="text" placeholder="Plaatsnaam wordt automatic ingevuld" disabled>
    </div>

    <label class="col-sm-5">Wilt u de BTW verleggen?</label>
    <div class="col-sm-7">
        <label class="col-sm-6"><input type="radio"> Ja</label>
        <label class="col-sm-6"><input type="radio"> Nee</label>
    </div>
</form>

Use the smallest viewport to simply use 100% width: col-xs-12. Wrap your rows around a col first to offset the negative margin.

<form class="form-horizontal">
    <label class="col-sm-2" id="email">Email</label>
    <div class="col-sm-10" id="email">
        <input class="col-xs-12" type="email">
    </div>
    <label class="col-sm-2" id="password">Password</label>
    <div class="col-sm-10" id="password">
        <input class="col-xs-12" type="password">
    </div>
    <label class="col-sm-2" for="captcha">Captcha</label>
    <div class="col-sm-10" id="captcha">
        <textarea class="col-xs-12"></textarea>
    </div>
    <label class="col-sm-12" for="remember">
       <input id="remember" type="checkbox" checked>
        Remember me
    </label>
    <input class="btn btn-primary col-sm-4 col-sm-offset-8" type="submit" value="Login">
</form>

Add class btn-input to a button to snuggle it next an input field. Use btn-input-left if the button is before the input field.

This applies a negative margin of the with of the elements borders (i.e. 2px).

<div class="row">
    <div class="col-xs-4 pull-right">
        <!-- snippet starts here -->
        <form class="form-horizontal">
            <div class="col-xs-12">
                <input class="col-xs-3" type="text" value="1">
                <input class="btn btn-secondary btn-input col-xs-9" type="submit" value="Plaats in mandje">
            </div>
        </form>
        <!-- snippet ends here -->
    </div>
    <div class="clearfix"></div>
    <div class="col-xs-4 pull-left">
        <!-- snippet starts here -->
        <form class="form-horizontal">
            <div class="col-xs-12">
                <input class="btn btn-tertiary btn-input-left col-xs-9" type="submit" value="Plaats in mandje">
                <input class="col-xs-3" type="text" value="1">
            </div>
        </form>
        <!-- snippet ends here -->
    </div>
</div>

Helping classes

<span class="required">*<span>

<form class="form-horizontal">
    <label class="col-xs-4">Email <span class="required">*<span></label>
    <input class="col-xs-8" type="email">
</form>

Add a div, span, or paragraph with the class help to add an explainer text.

<form class="form-horizontal">
    <label class="col-xs-4">Email</label>
    <div class="col-xs-8">
        <input class="col-xs-6" type="email">
        <p class="help col-xs-6">Read our <a href="/">policy</a></p>
    </div>
    <label class="col-xs-4">Email</label>
    <div class="col-xs-8">
        <input class="col-xs-12" type="email">
        <p class="help">Only used for sending confirmation emails</p>
    </div>
</form>

error, success, warning and info

<form class="form-horizontal">
    <input class="col-xs-12 error" type="text" value=".error">
    <input class="col-xs-12 success" type="text" value=".success">
    <input class="col-xs-12 warning" type="text" value=".warning">
    <input class="col-xs-12 info" type="text" value=".info">
</form>

Marrel.css

Forms

Helping classes