CODEWITHSUNDEEP
cssuser-interfacelabelbootstrap-4
don
don

Reputation: 4532

Bootstrap 4.1 floating labels

I've found on Google a doc example for Bootstrap 4.1 in which they feature floating labels: getbootstrap.com/docs/4.1/examples/floating-labels/

In that page, however, it is not explained how that can be achieved, and I can't find anything in the docs for v. 4.1. Floating labels are not even listed as a new feature in the ship list.

Does anyone know if floating labels are supported?

Upvotes: 8

Views: 35617

Answers (6)

tanguy_k
tanguy_k

Reputation: 12303

I've created an input floating label for Bootstrap 4 & 5 (not the same look that Bootstrap provides): https://github.com/tkrotoff/bootstrap-floating-label

@tkrotoff/bootstrap-floating-label demo

Here is the online demo: https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io

Upvotes: 2

Mike Aron
Mike Aron

Reputation: 580

Best way for me is using transform translate. It is smoother. I have added extra classes to prevent overwriting bootstraps original classes.

body{padding:75px}
.form-group.floating>label {
    bottom: 34px;
    left: 8px;
    position: relative;
    background-color: white;
    padding: 0px 5px 0px 5px;
    font-size: 1.1em;
    transition: 0.1s;
    pointer-events: none;
    font-weight: 500 !important;
    transform-origin: bottom left;
}

.form-control.floating:focus~label{
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
    color: #005ebf;
}

.form-control.floating:valid~label{
    transform-origin: bottom left;
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group floating">
<input type="text" class="form-control floating" id="usr" required value="">
<label for="usr">Username</label>
</div>

Upvotes: 5

AGB
AGB

Reputation: 2448

SCSS version below including support for textarea and excluding styles from IE11, which doesn't support :placeholder-shown.

:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
}

.floating-label {
    $placeholderColour: $middleGrey;
    position: relative;

    input, textarea, label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        margin-bottom: 0;
        line-height: 1.5;
        color: $placeholderColour;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;

        &:hover {
            cursor: text;
        }
    }

    input::-webkit-input-placeholder {
        color: transparent;
    }

    input:-ms-input-placeholder {
        color: transparent;
    }

    input::-ms-input-placeholder {
        color: transparent;
    }

    input::-moz-placeholder {
        color: transparent;
    }

    input::placeholder {
        color: transparent;
    }

    textarea::-webkit-input-placeholder {
        color: transparent;
    }

    textarea:-moz-placeholder {
        color: transparent;
    }

    textarea::-moz-placeholder {
        color: transparent;
    }

    textarea:-ms-input-placeholder {
        color: transparent;
    }

    textarea::placeholder {
        color: transparent;
    }

    input:not(:placeholder-shown),
    textarea:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
    }

    input:not(:placeholder-shown) ~ label,
    textarea:not(:placeholder-shown) ~ label {
        padding-top: calc(var(--input-padding-y) / 3);
        padding-bottom: calc(var(--input-padding-y) / 3);
        font-size: 12px;

        &:hover {
            cursor: default;
        }
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        label {
            display: none;
        }

        textarea:-ms-input-placeholder, input:-ms-input-placeholder {
            color: $placeholderColour;
        }

        textarea::-ms-input-placeholder, input::-ms-input-placeholder {
            color: $placeholderColour;
        }
    }
}

Upvotes: 1

djibe
djibe

Reputation: 3038

If you really want floating label, see this awesome Bootstrap 4 theme : http://djibe.github.io/material/docs/4.4/material/text-fields/

Upvotes: 3

asith
asith

Reputation: 559

Styles they ware using in that mentioned example site

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 15px;
  margin: 0 auto;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362620

It says on the Bootstrap examples page that floating-labels are...

"Experiments - Examples that focus on future-friendly features or techniques."

Like many of the other examples, there's an additional CSS file used in the example...

enter image description here

Using the floating-labels.css they work as expected in the supported browsers...

https://www.codeply.com/go/X9VbHqzD4B

Upvotes: 13

Related Questions