Forms

View code 
<form class="form">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Get the facts on…" name="q" aria-label="Search">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
        </div>
    </div>
</form>

Floating label form input

Floating labels are styled to look like placeholders (so they don’t take up additional vertical space). Unlike placeholders though, they don’t completely disappear when the user starts typing. Instead, they “float” to the top of the input, so the label is still visible.

Try typing in the input below for a demo.

Must be at least one character long.
View code 
<div class="form-group form-label-group">
    <input type="text" name="first_name" placeholder="First name" class="form-control" id="id_first_name">
    <label for="id_first_name">First name</label>
    <small class="text-muted">
      Must be at least one character long.
    </small>
</div>

Floating label textarea

The more evidence we can provide of people being affected by bad information, the more chance your MP will pay attention.
View code 
<div class="form-group form-label-group">
    <textarea rows="6" type="text" name="bio"
    placeholder="Why do you want a stronger Online Safety Bill?"
    class="form-control" id="id_bio"></textarea>
    <label for="id_bio">
        Why do you want a stronger Online Safety Bill?
    </label>
    <small class="text-muted">
      The more evidence we can provide of people being affected by bad
      information, the more chance your MP will pay attention.
    </small>
</div>