rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Add support for Bootstrap Icons on floating label forms

Browse Source
This commit is contained in:
Mark Otto 2021-05-06 15:51:23 -07:00
parent bf09367486
commit 32930bc06e
2 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
scss/forms/_floating-labels.scss
View File

@ -59,3 +59,23 @@
} }
// stylelint-enable no-duplicate-selectors // stylelint-enable no-duplicate-selectors
} }
.form-floating-icon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem + $form-floating-padding-x;
~ label {
left: 2.5rem;
}
~ .form-control,
~ .form-select {
padding-left: 2.5rem + $form-floating-padding-x;
}
}

31
site/content/docs/5.0/forms/floating-labels.md
View File

@ -75,6 +75,37 @@ Other than `.form-control`, floating labels are only available on `.form-select`
</div> </div>
{{< /example >}} {{< /example >}}
## With icons
Add [Bootstrap Icons]({{< param icons >}}) or other SVGs to floating label forms. Depending on your icons and content, you may want to add more utilities or custom styles.
{{< example >}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="envelope" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</symbol>
<symbol id="key" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</symbol>
</svg>
<div class="form-floating mb-3">
<div class="form-floating-icon">
<svg class="bi" width="24" height="24"><use xlink:href="#envelope"/></svg>
</div>
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<div class="form-floating-icon">
<svg class="bi" width="24" height="24"><use xlink:href="#key"/></svg>
</div>
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
{{< /example >}}
## Layout ## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes. When working with the Bootstrap grid system, be sure to place form elements within column classes.