2020-05-12 20:50:21 +03:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms." >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2020-08-04 19:36:55 +03:00
< meta name = "generator" content = "Jekyll v4.1.1" >
2020-05-12 20:50:21 +03:00
< meta name = "docsearch:language" content = "en" >
< meta name = "docsearch:version" content = "4.5" >
< title > Forms · Bootstrap v4.5< / title >
< link rel = "canonical" href = "https://getbootstrap.com/docs/4.5/components/forms/" >
<!-- Bootstrap core CSS -->
2020-10-13 18:59:54 +03:00
< link href = "/docs/4.5/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous" >
2020-05-12 20:50:21 +03:00
<!-- Documentation extras -->
< link href = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel = "stylesheet" >
< link href = "/docs/4.5/assets/css/docs.min.css" rel = "stylesheet" >
<!-- Favicons -->
< link rel = "apple-touch-icon" href = "/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" >
< link rel = "manifest" href = "/docs/4.5/assets/img/favicons/manifest.json" >
< link rel = "mask-icon" href = "/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color = "#563d7c" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon.ico" >
< meta name = "msapplication-config" content = "/docs/4.5/assets/img/favicons/browserconfig.xml" >
< meta name = "theme-color" content = "#563d7c" >
<!-- Twitter -->
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:site" content = "@getbootstrap" >
< meta name = "twitter:creator" content = "@getbootstrap" >
< meta name = "twitter:title" content = "Forms" >
< meta name = "twitter:description" content = "Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms." >
< meta name = "twitter:image" content = "https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png" >
<!-- Facebook -->
< meta property = "og:url" content = "https://getbootstrap.com/docs/4.5/components/forms/" >
< meta property = "og:title" content = "Forms" >
< meta property = "og:description" content = "Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms." >
< meta property = "og:type" content = "website" >
< meta property = "og:image" content = "https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< script >
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
< / script >
< script async src = "https://www.google-analytics.com/analytics.js" > < / script >
< / head >
< body >
2020-08-04 19:36:55 +03:00
< div class = "skippy overflow-hidden" >
< div class = "container-xl" >
< a class = "sr-only sr-only-focusable d-inline-flex p-2 m-1" href = "#content" > Skip to main content< / a > < a class = "sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href = "#bd-docs-nav" > Skip to docs navigation< / a > < / div >
< / div >
2020-05-12 20:50:21 +03:00
< header class = "navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" >
< a class = "navbar-brand mr-0 mr-md-2" href = "/" aria-label = "Bootstrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "36" height = "36" class = "d-block" viewBox = "0 0 612 612" role = "img" focusable = "false" > < title > Bootstrap< / title > < path fill = "currentColor" d = "M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" / > < path fill = "currentColor" d = "M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" / > < / svg > < / a >
< div class = "navbar-nav-scroll" >
< ul class = "navbar-nav bd-navbar-nav flex-row" >
< li class = "nav-item" >
< a class = "nav-link " href = "/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');" > Home< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link active" href = "/docs/4.5/getting-started/introduction/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Docs');" > Documentation< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link " href = "/docs/4.5/examples/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Examples');" > Examples< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://icons.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target = "_blank" rel = "noopener" > Icons< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://themes.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target = "_blank" rel = "noopener" > Themes< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://expo.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target = "_blank" rel = "noopener" > Expo< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://blog.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target = "_blank" rel = "noopener" > Blog< / a >
< / li >
< / ul >
< / div >
< ul class = "navbar-nav ml-md-auto" >
< li class = "nav-item dropdown" >
< a class = "nav-item nav-link dropdown-toggle mr-md-2" href = "#" id = "bd-versions" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
v4.5
< / a >
< div class = "dropdown-menu dropdown-menu-md-right" aria-labelledby = "bd-versions" >
< a class = "dropdown-item active" href = "/docs/4.5/" > Latest (4.5.x)< / a >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "https://getbootstrap.com/docs/3.4/" > v3.4.1< / a >
< a class = "dropdown-item" href = "https://getbootstrap.com/2.3.2/" > v2.3.2< / a >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "/docs/versions/" > All versions< / a >
< / div >
< / li >
< li class = "nav-item" >
< a class = "nav-link pl-2 pr-1 mx-1 py-3 my-n2" href = "https://github.com/twbs" target = "_blank" rel = "noopener" aria-label = "GitHub" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 499.36" role = "img" focusable = "false" > < title > GitHub< / title > < path fill = "currentColor" fill-rule = "evenodd" d = "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://twitter.com/getbootstrap" target = "_blank" rel = "noopener" aria-label = "Twitter" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 416.32" role = "img" focusable = "false" > < title > Twitter< / title > < path fill = "currentColor" d = "M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://bootstrap-slack.herokuapp.com/" target = "_blank" rel = "noopener" aria-label = "Slack" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 512" role = "img" focusable = "false" > < title > Slack< / title > < path fill = "currentColor" d = "M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z" / > < path fill = "currentColor" d = "M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://opencollective.com/bootstrap/" target = "_blank" rel = "noopener" aria-label = "Open Collective" > < svg xmlns = "http://www.w3.org/2000/svg" fill = "currentColor" fill-rule = "evenodd" class = "navbar-nav-svg" viewBox = "0 0 40 41" role = "img" focusable = "false" > < title > Open Collective< / title > < path fill-opacity = ".4" d = "M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" / > < path d = "M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" / > < / svg > < / a >
< / li >
< / ul >
< a class = "btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href = "/docs/4.5/getting-started/download/" > Download< / a >
< / header >
< div class = "container-fluid" >
< div class = "row flex-xl-nowrap" >
< div class = "col-md-3 col-xl-2 bd-sidebar" >
< form role = "search" class = "bd-search d-flex align-items-center" >
< input type = "search" class = "form-control" id = "search-input" placeholder = "Search..." aria-label = "Search for..." autocomplete = "off" data-docs-version = "4.5" >
< button class = "btn bd-search-docs-toggle d-md-none p-0 ml-3" type = "button" data-toggle = "collapse" data-target = "#bd-docs-nav" aria-controls = "bd-docs-nav" aria-expanded = "false" aria-label = "Toggle docs navigation" > < svg xmlns = "http://www.w3.org/2000/svg" width = "30" height = "30" viewBox = "0 0 30 30" role = "img" focusable = "false" > < title > Menu< / title > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" / > < / svg > < / button >
< / form >
< nav class = "collapse bd-links" id = "bd-docs-nav" aria-label = "Main navigation" > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/getting-started/introduction/" >
Getting started
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/getting-started/introduction/" >
Introduction
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/download/" >
Download
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/contents/" >
Contents
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/browsers-devices/" >
Browsers & devices
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/javascript/" >
JavaScript
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/theming/" >
Theming
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/build-tools/" >
Build tools
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/webpack/" >
Webpack
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/accessibility/" >
Accessibility
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/layout/overview/" >
Layout
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/layout/overview/" >
Overview
< / a >
< / li > < li >
< a href = "/docs/4.5/layout/grid/" >
Grid
< / a >
< / li > < li >
< a href = "/docs/4.5/layout/utilities-for-layout/" >
Utilities for layout
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/content/reboot/" >
Content
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/content/reboot/" >
Reboot
< / a >
< / li > < li >
< a href = "/docs/4.5/content/typography/" >
Typography
< / a >
< / li > < li >
< a href = "/docs/4.5/content/code/" >
Code
< / a >
< / li > < li >
< a href = "/docs/4.5/content/images/" >
Images
< / a >
< / li > < li >
< a href = "/docs/4.5/content/tables/" >
Tables
< / a >
< / li > < li >
< a href = "/docs/4.5/content/figures/" >
Figures
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item active" >
< a class = "bd-toc-link" href = "/docs/4.5/components/alerts/" >
Components
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/components/alerts/" >
Alerts
< / a >
< / li > < li >
< a href = "/docs/4.5/components/badge/" >
Badge
< / a >
< / li > < li >
< a href = "/docs/4.5/components/breadcrumb/" >
Breadcrumb
< / a >
< / li > < li >
< a href = "/docs/4.5/components/buttons/" >
Buttons
< / a >
< / li > < li >
< a href = "/docs/4.5/components/button-group/" >
Button group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/card/" >
Card
< / a >
< / li > < li >
< a href = "/docs/4.5/components/carousel/" >
Carousel
< / a >
< / li > < li >
< a href = "/docs/4.5/components/collapse/" >
Collapse
< / a >
< / li > < li >
< a href = "/docs/4.5/components/dropdowns/" >
Dropdowns
< / a >
< / li > < li class = "active bd-sidenav-active" >
< a href = "/docs/4.5/components/forms/" >
Forms
< / a >
< / li > < li >
< a href = "/docs/4.5/components/input-group/" >
Input group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/jumbotron/" >
Jumbotron
< / a >
< / li > < li >
< a href = "/docs/4.5/components/list-group/" >
List group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/media-object/" >
Media object
< / a >
< / li > < li >
< a href = "/docs/4.5/components/modal/" >
Modal
< / a >
< / li > < li >
< a href = "/docs/4.5/components/navs/" >
Navs
< / a >
< / li > < li >
< a href = "/docs/4.5/components/navbar/" >
Navbar
< / a >
< / li > < li >
< a href = "/docs/4.5/components/pagination/" >
Pagination
< / a >
< / li > < li >
< a href = "/docs/4.5/components/popovers/" >
Popovers
< / a >
< / li > < li >
< a href = "/docs/4.5/components/progress/" >
Progress
< / a >
< / li > < li >
< a href = "/docs/4.5/components/scrollspy/" >
Scrollspy
< / a >
< / li > < li >
< a href = "/docs/4.5/components/spinners/" >
Spinners
< / a >
< / li > < li >
< a href = "/docs/4.5/components/toasts/" >
Toasts
< / a >
< / li > < li >
< a href = "/docs/4.5/components/tooltips/" >
Tooltips
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/utilities/borders/" >
Utilities
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/utilities/borders/" >
Borders
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/clearfix/" >
Clearfix
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/close-icon/" >
Close icon
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/colors/" >
Colors
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/display/" >
Display
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/embed/" >
Embed
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/flex/" >
Flex
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/float/" >
Float
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/image-replacement/" >
Image replacement
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/interactions/" >
Interactions
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/overflow/" >
Overflow
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/position/" >
Position
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/screen-readers/" >
Screen readers
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/shadows/" >
Shadows
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/sizing/" >
Sizing
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/spacing/" >
Spacing
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/stretched-link/" >
Stretched link
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/text/" >
Text
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/vertical-align/" >
Vertical align
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/visibility/" >
Visibility
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/extend/approach/" >
Extend
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/extend/approach/" >
Approach
< / a >
< / li > < li >
< a href = "/docs/4.5/extend/icons/" >
Icons
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/migration/" >
Migration
< / a >
< ul class = "nav bd-sidenav" > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/about/overview/" >
About
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/about/overview/" >
Overview
< / a >
< / li > < li >
< a href = "/docs/4.5/about/team/" >
Team
< / a >
< / li > < li >
< a href = "/docs/4.5/about/brand/" >
Brand
< / a >
< / li > < li >
< a href = "/docs/4.5/about/license/" >
License
< / a >
< / li > < li >
< a href = "/docs/4.5/about/translations/" >
Translations
< / a >
< / li > < / ul >
< / div > < / nav >
< / div >
< nav class = "d-none d-xl-block col-xl-2 bd-toc" aria-label = "Secondary navigation" >
< ul class = "section-nav" >
< li class = "toc-entry toc-h2" > < a href = "#overview" > Overview< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#form-controls" > Form controls< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#sizing" > Sizing< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#readonly" > Readonly< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#readonly-plain-text" > Readonly plain text< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h2" > < a href = "#range-inputs" > Range Inputs< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#checkboxes-and-radios" > Checkboxes and radios< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#default-stacked" > Default (stacked)< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#inline" > Inline< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#without-labels" > Without labels< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h2" > < a href = "#layout" > Layout< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#form-groups" > Form groups< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#form-grid" > Form grid< / a >
< ul >
< li class = "toc-entry toc-h4" > < a href = "#form-row" > Form row< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#horizontal-form" > Horizontal form< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#column-sizing" > Column sizing< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#auto-sizing" > Auto-sizing< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h3" > < a href = "#inline-forms" > Inline forms< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h2" > < a href = "#help-text" > Help text< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#disabled-forms" > Disabled forms< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#validation" > Validation< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#how-it-works" > How it works< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#custom-styles" > Custom styles< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#browser-defaults" > Browser defaults< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#server-side" > Server side< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#supported-elements" > Supported elements< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#tooltips" > Tooltips< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#customizing" > Customizing< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#input-group-validation-workaround" > Input group validation workaround< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h2" > < a href = "#custom-forms" > Custom forms< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#checkboxes-and-radios-1" > Checkboxes and radios< / a >
< ul >
< li class = "toc-entry toc-h4" > < a href = "#checkboxes" > Checkboxes< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#radios" > Radios< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#inline-1" > Inline< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#disabled" > Disabled< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h3" > < a href = "#switches" > Switches< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#select-menu" > Select menu< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#range" > Range< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#file-browser" > File browser< / a >
< ul >
< li class = "toc-entry toc-h4" > < a href = "#translating-or-customizing-the-strings-with-scss" > Translating or customizing the strings with SCSS< / a > < / li >
< li class = "toc-entry toc-h4" > < a href = "#translating-or-customizing-the-strings-with-html" > Translating or customizing the strings with HTML< / a > < / li >
< / ul >
< / li >
< / ul >
< / li >
< / ul >
< / nav >
< main class = "col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role = "main" >
2020-08-04 19:36:55 +03:00
< div class = "d-md-flex flex-md-row-reverse align-items-center justify-content-between" >
2020-10-13 18:59:54 +03:00
< a class = "btn btn-sm btn-bd-light my-2 my-md-0" href = "https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.5/components/forms.md" title = "View and edit this file on GitHub" target = "_blank" rel = "noopener" > View on GitHub< / a >
2020-08-04 19:36:55 +03:00
< h1 class = "bd-title" id = "content" > Forms< / h1 >
< / div >
2020-05-12 20:50:21 +03:00
< p class = "bd-lead" > Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.< / p >
< script async src = "https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id = "_carbonads_js" > < / script >
< h2 id = "overview" > Overview< / h2 >
< p > Bootstrap’ < a href = "/docs/4.5/content/reboot/#forms" > our Rebooted form styles< / a > with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.< / p >
2020-08-04 19:36:55 +03:00
< p > Be sure to use an appropriate < code class = "language-plaintext highlighter-rouge" > type< / code > attribute on all inputs (e.g., < code class = "language-plaintext highlighter-rouge" > email< / code > for email address or < code class = "language-plaintext highlighter-rouge" > number< / code > for numerical information) to take advantage of newer input controls like email verification, number selection, and more.< / p >
2020-05-12 20:50:21 +03:00
< p > Here’ ’ < / p >
< div class = "bd-example" >
< form >
< div class = "form-group" >
< label for = "exampleInputEmail1" > Email address< / label >
< input type = "email" class = "form-control" id = "exampleInputEmail1" aria-describedby = "emailHelp" / >
< small id = "emailHelp" class = "form-text text-muted" > We'll never share your email with anyone else.< / small >
< / div >
< div class = "form-group" >
< label for = "exampleInputPassword1" > Password< / label >
< input type = "password" class = "form-control" id = "exampleInputPassword1" / >
< / div >
< div class = "form-group form-check" >
< input type = "checkbox" class = "form-check-input" id = "exampleCheck1" / >
< label class = "form-check-label" for = "exampleCheck1" > Check me out< / label >
< / div >
< button type = "submit" class = "btn btn-primary" > Submit< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleInputEmail1"< / span > < span class = "nt" > > < / span > Email address< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleInputEmail1"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "emailHelp"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < small< / span > < span class = "na" > id=< / span > < span class = "s" > "emailHelp"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-text text-muted"< / span > < span class = "nt" > > < / span > We'll never share your email with anyone else.< span class = "nt" > < /small> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleInputPassword1"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleInputPassword1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleCheck1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleCheck1"< / span > < span class = "nt" > > < / span > Check me out< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h2 id = "form-controls" > Form controls< / h2 >
2020-08-04 19:36:55 +03:00
< p > Textual form controls—like < code class = "language-plaintext highlighter-rouge" > < input> < / code > s, < code class = "language-plaintext highlighter-rouge" > < select> < / code > s, and < code class = "language-plaintext highlighter-rouge" > < textarea> < / code > s—are styled with the < code class = "language-plaintext highlighter-rouge" > .form-control< / code > class. Included are styles for general appearance, focus state, sizing, and more.< / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > Be sure to explore our < a href = "#custom-forms" > custom forms< / a > to further style < code class = "language-plaintext highlighter-rouge" > < select> < / code > s.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group" >
< label for = "exampleFormControlInput1" > Email address< / label >
< input type = "email" class = "form-control" id = "exampleFormControlInput1" placeholder = "name@example.com" / >
< / div >
< div class = "form-group" >
< label for = "exampleFormControlSelect1" > Example select< / label >
< select class = "form-control" id = "exampleFormControlSelect1" >
< option > 1< / option >
< option > 2< / option >
< option > 3< / option >
< option > 4< / option >
< option > 5< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "exampleFormControlSelect2" > Example multiple select< / label >
< select multiple = "" class = "form-control" id = "exampleFormControlSelect2" >
< option > 1< / option >
< option > 2< / option >
< option > 3< / option >
< option > 4< / option >
< option > 5< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "exampleFormControlTextarea1" > Example textarea< / label >
< textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3" > < / textarea >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleFormControlInput1"< / span > < span class = "nt" > > < / span > Email address< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleFormControlInput1"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "name@example.com"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleFormControlSelect1"< / span > < span class = "nt" > > < / span > Example select< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleFormControlSelect1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > 1< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 2< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 3< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 4< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 5< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleFormControlSelect2"< / span > < span class = "nt" > > < / span > Example multiple select< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > multiple< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleFormControlSelect2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > 1< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 2< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 3< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 4< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > 5< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleFormControlTextarea1"< / span > < span class = "nt" > > < / span > Example textarea< span class = "nt" > < /label> < / span >
< span class = "nt" > < textarea< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleFormControlTextarea1"< / span > < span class = "na" > rows=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < /textarea> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > For file inputs, swap the < code class = "language-plaintext highlighter-rouge" > .form-control< / code > for < code class = "language-plaintext highlighter-rouge" > .form-control-file< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group" >
< label for = "exampleFormControlFile1" > Example file input< / label >
< input type = "file" class = "form-control-file" id = "exampleFormControlFile1" / >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleFormControlFile1"< / span > < span class = "nt" > > < / span > Example file input< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control-file"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleFormControlFile1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "sizing" > Sizing< / h3 >
2020-08-04 19:36:55 +03:00
< p > Set heights using classes like < code class = "language-plaintext highlighter-rouge" > .form-control-lg< / code > and < code class = "language-plaintext highlighter-rouge" > .form-control-sm< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< input class = "form-control form-control-lg" type = "text" placeholder = ".form-control-lg" / >
< input class = "form-control" type = "text" placeholder = "Default input" / >
< input class = "form-control form-control-sm" type = "text" placeholder = ".form-control-sm" / >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-lg"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > ".form-control-lg"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Default input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-sm"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > ".form-control-sm"< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
< div class = "bd-example" >
< select class = "form-control form-control-lg" >
< option > Large select< / option >
< / select >
< select class = "form-control" >
< option > Default select< / option >
< / select >
< select class = "form-control form-control-sm" >
< option > Small select< / option >
< / select >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-lg"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > Large select< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > Default select< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-sm"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > Small select< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span > < / code > < / pre > < / figure >
< h3 id = "readonly" > Readonly< / h3 >
2020-08-04 19:36:55 +03:00
< p > Add the < code class = "language-plaintext highlighter-rouge" > readonly< / code > boolean attribute on an input to prevent modification of the input’ < / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< input class = "form-control" type = "text" placeholder = "Readonly input here..." readonly = "" / >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Readonly input here..."< / span > < span class = "na" > readonly< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
< h3 id = "readonly-plain-text" > Readonly plain text< / h3 >
2020-08-04 19:36:55 +03:00
< p > If you want to have < code class = "language-plaintext highlighter-rouge" > < input readonly> < / code > elements in your form styled as plain text, use the < code class = "language-plaintext highlighter-rouge" > .form-control-plaintext< / code > class to remove the default form field styling and preserve the correct margin and padding.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group row" >
< label for = "staticEmail" class = "col-sm-2 col-form-label" > Email< / label >
< div class = "col-sm-10" >
< input type = "text" readonly = "" class = "form-control-plaintext" id = "staticEmail" value = "email@example.com" / >
< / div >
< / div >
< div class = "form-group row" >
< label for = "inputPassword" class = "col-sm-2 col-form-label" > Password< / label >
< div class = "col-sm-10" >
< input type = "password" class = "form-control" id = "inputPassword" / >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "staticEmail"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > readonly< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control-plaintext"< / span > < span class = "na" > id=< / span > < span class = "s" > "staticEmail"< / span > < span class = "na" > value=< / span > < span class = "s" > "email@example.com"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< div class = "bd-example" >
< form class = "form-inline" >
< div class = "form-group mb-2" >
< label for = "staticEmail2" class = "sr-only" > Email< / label >
< input type = "text" readonly = "" class = "form-control-plaintext" id = "staticEmail2" value = "email@example.com" / >
< / div >
< div class = "form-group mx-sm-3 mb-2" >
< label for = "inputPassword2" class = "sr-only" > Password< / label >
< input type = "password" class = "form-control" id = "inputPassword2" placeholder = "Password" / >
< / div >
< button type = "submit" class = "btn btn-primary mb-2" > Confirm identity< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "form-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group mb-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "staticEmail2"< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > readonly< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control-plaintext"< / span > < span class = "na" > id=< / span > < span class = "s" > "staticEmail2"< / span > < span class = "na" > value=< / span > < span class = "s" > "email@example.com"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group mx-sm-3 mb-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword2"< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword2"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Password"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary mb-2"< / span > < span class = "nt" > > < / span > Confirm identity< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h2 id = "range-inputs" > Range Inputs< / h2 >
2020-08-04 19:36:55 +03:00
< p > Set horizontally scrollable range inputs using < code class = "language-plaintext highlighter-rouge" > .form-control-range< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group" >
< label for = "formControlRange" > Example Range input< / label >
< input type = "range" class = "form-control-range" id = "formControlRange" / >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "formControlRange"< / span > < span class = "nt" > > < / span > Example Range input< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "range"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control-range"< / span > < span class = "na" > id=< / span > < span class = "s" > "formControlRange"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h2 id = "checkboxes-and-radios" > Checkboxes and radios< / h2 >
2020-08-04 19:36:55 +03:00
< p > Default checkboxes and radios are improved upon with the help of < code class = "language-plaintext highlighter-rouge" > .form-check< / code > , < strong > a single class for both input types that improves the layout and behavior of their HTML elements< / strong > . Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.< / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > Disabled checkboxes and radios are supported. The < code class = "language-plaintext highlighter-rouge" > disabled< / code > attribute will apply a lighter color to help indicate the input’ < / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our < code class = "language-plaintext highlighter-rouge" > < input> < / code > s and < code class = "language-plaintext highlighter-rouge" > < label> < / code > s are sibling elements as opposed to an < code class = "language-plaintext highlighter-rouge" > < input> < / code > within a < code class = "language-plaintext highlighter-rouge" > < label> < / code > . This is slightly more verbose as you must specify < code class = "language-plaintext highlighter-rouge" > id< / code > and < code class = "language-plaintext highlighter-rouge" > for< / code > attributes to relate the < code class = "language-plaintext highlighter-rouge" > < input> < / code > and < code class = "language-plaintext highlighter-rouge" > < label> < / code > .< / p >
2020-05-12 20:50:21 +03:00
< h3 id = "default-stacked" > Default (stacked)< / h3 >
2020-08-04 19:36:55 +03:00
< p > By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with < code class = "language-plaintext highlighter-rouge" > .form-check< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" value = "" id = "defaultCheck1" / >
< label class = "form-check-label" for = "defaultCheck1" >
Default checkbox
< / label >
< / div >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" value = "" id = "defaultCheck2" disabled = "" / >
< label class = "form-check-label" for = "defaultCheck2" >
Disabled checkbox
< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "na" > id=< / span > < span class = "s" > "defaultCheck1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "defaultCheck1"< / span > < span class = "nt" > > < / span >
Default checkbox
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "na" > id=< / span > < span class = "s" > "defaultCheck2"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "defaultCheck2"< / span > < span class = "nt" > > < / span >
Disabled checkbox
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "bd-example" >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios1" value = "option1" checked = "" / >
< label class = "form-check-label" for = "exampleRadios1" >
Default radio
< / label >
< / div >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios2" value = "option2" / >
< label class = "form-check-label" for = "exampleRadios2" >
Second default radio
< / label >
< / div >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios3" value = "option3" disabled = "" / >
< label class = "form-check-label" for = "exampleRadios3" >
Disabled radio
< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "exampleRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleRadios1"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "na" > checked< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleRadios1"< / span > < span class = "nt" > > < / span >
Default radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "exampleRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleRadios2"< / span > < span class = "na" > value=< / span > < span class = "s" > "option2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleRadios2"< / span > < span class = "nt" > > < / span >
Second default radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "exampleRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "exampleRadios3"< / span > < span class = "na" > value=< / span > < span class = "s" > "option3"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "exampleRadios3"< / span > < span class = "nt" > > < / span >
Disabled radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "inline" > Inline< / h3 >
2020-08-04 19:36:55 +03:00
< p > Group checkboxes or radios on the same horizontal row by adding < code class = "language-plaintext highlighter-rouge" > .form-check-inline< / code > to any < code class = "language-plaintext highlighter-rouge" > .form-check< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "checkbox" id = "inlineCheckbox1" value = "option1" / >
< label class = "form-check-label" for = "inlineCheckbox1" > 1< / label >
< / div >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "checkbox" id = "inlineCheckbox2" value = "option2" / >
< label class = "form-check-label" for = "inlineCheckbox2" > 2< / label >
< / div >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "checkbox" id = "inlineCheckbox3" value = "option3" disabled = "" / >
< label class = "form-check-label" for = "inlineCheckbox3" > 3 (disabled)< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineCheckbox1"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineCheckbox1"< / span > < span class = "nt" > > < / span > 1< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineCheckbox2"< / span > < span class = "na" > value=< / span > < span class = "s" > "option2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineCheckbox2"< / span > < span class = "nt" > > < / span > 2< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineCheckbox3"< / span > < span class = "na" > value=< / span > < span class = "s" > "option3"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineCheckbox3"< / span > < span class = "nt" > > < / span > 3 (disabled)< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "bd-example" >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio1" value = "option1" / >
< label class = "form-check-label" for = "inlineRadio1" > 1< / label >
< / div >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio2" value = "option2" / >
< label class = "form-check-label" for = "inlineRadio2" > 2< / label >
< / div >
< div class = "form-check form-check-inline" >
< input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio3" value = "option3" disabled = "" / >
< label class = "form-check-label" for = "inlineRadio3" > 3 (disabled)< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "inlineRadioOptions"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineRadio1"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineRadio1"< / span > < span class = "nt" > > < / span > 1< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "inlineRadioOptions"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineRadio2"< / span > < span class = "na" > value=< / span > < span class = "s" > "option2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineRadio2"< / span > < span class = "nt" > > < / span > 2< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check form-check-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "inlineRadioOptions"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineRadio3"< / span > < span class = "na" > value=< / span > < span class = "s" > "option3"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineRadio3"< / span > < span class = "nt" > > < / span > 3 (disabled)< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "without-labels" > Without labels< / h3 >
2020-08-04 19:36:55 +03:00
< p > Add < code class = "language-plaintext highlighter-rouge" > .position-static< / code > to inputs within < code class = "language-plaintext highlighter-rouge" > .form-check< / code > that don’ < code class = "language-plaintext highlighter-rouge" > aria-label< / code > ).< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "form-check" >
< input class = "form-check-input position-static" type = "checkbox" id = "blankCheckbox" value = "option1" aria-label = "..." / >
< / div >
< div class = "form-check" >
< input class = "form-check-input position-static" type = "radio" name = "blankRadio" id = "blankRadio1" value = "option1" aria-label = "..." / >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input position-static"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "blankCheckbox"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "..."< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input position-static"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "blankRadio"< / span > < span class = "na" > id=< / span > < span class = "s" > "blankRadio1"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "..."< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "layout" > Layout< / h2 >
2020-08-04 19:36:55 +03:00
< p > Since Bootstrap applies < code class = "language-plaintext highlighter-rouge" > display: block< / code > and < code class = "language-plaintext highlighter-rouge" > width: 100%< / code > to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.< / p >
2020-05-12 20:50:21 +03:00
< h3 id = "form-groups" > Form groups< / h3 >
2020-08-04 19:36:55 +03:00
< p > The < code class = "language-plaintext highlighter-rouge" > .form-group< / code > class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies < code class = "language-plaintext highlighter-rouge" > margin-bottom< / code > , but it picks up additional styles in < code class = "language-plaintext highlighter-rouge" > .form-inline< / code > as needed. Use it with < code class = "language-plaintext highlighter-rouge" > < fieldset> < / code > s, < code class = "language-plaintext highlighter-rouge" > < div> < / code > s, or nearly any other element.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group" >
< label for = "formGroupExampleInput" > Example label< / label >
< input type = "text" class = "form-control" id = "formGroupExampleInput" placeholder = "Example input placeholder" / >
< / div >
< div class = "form-group" >
< label for = "formGroupExampleInput2" > Another label< / label >
< input type = "text" class = "form-control" id = "formGroupExampleInput2" placeholder = "Another input placeholder" / >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "formGroupExampleInput"< / span > < span class = "nt" > > < / span > Example label< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "formGroupExampleInput"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Example input placeholder"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "formGroupExampleInput2"< / span > < span class = "nt" > > < / span > Another label< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "formGroupExampleInput2"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Another input placeholder"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "form-grid" > Form grid< / h3 >
< p > More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.< / p >
< div class = "bd-example" >
< form >
< div class = "row" >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "First name" / >
< / div >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "Last name" / >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "First name"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Last name"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h4 id = "form-row" > Form row< / h4 >
2020-08-04 19:36:55 +03:00
< p > You may also swap < code class = "language-plaintext highlighter-rouge" > .row< / code > for < code class = "language-plaintext highlighter-rouge" > .form-row< / code > , a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-row" >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "First name" / >
< / div >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "Last name" / >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "First name"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Last name"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< p > More complex layouts can also be created with the grid system.< / p >
< div class = "bd-example" >
< form >
< div class = "form-row" >
< div class = "form-group col-md-6" >
< label for = "inputEmail4" > Email< / label >
< input type = "email" class = "form-control" id = "inputEmail4" / >
< / div >
< div class = "form-group col-md-6" >
< label for = "inputPassword4" > Password< / label >
< input type = "password" class = "form-control" id = "inputPassword4" / >
< / div >
< / div >
< div class = "form-group" >
< label for = "inputAddress" > Address< / label >
< input type = "text" class = "form-control" id = "inputAddress" placeholder = "1234 Main St" / >
< / div >
< div class = "form-group" >
< label for = "inputAddress2" > Address 2< / label >
< input type = "text" class = "form-control" id = "inputAddress2" placeholder = "Apartment, studio, or floor" / >
< / div >
< div class = "form-row" >
< div class = "form-group col-md-6" >
< label for = "inputCity" > City< / label >
< input type = "text" class = "form-control" id = "inputCity" / >
< / div >
< div class = "form-group col-md-4" >
< label for = "inputState" > State< / label >
< select id = "inputState" class = "form-control" >
< option selected = "" > Choose...< / option >
< option > ...< / option >
< / select >
< / div >
< div class = "form-group col-md-2" >
< label for = "inputZip" > Zip< / label >
< input type = "text" class = "form-control" id = "inputZip" / >
< / div >
< / div >
< div class = "form-group" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "gridCheck" / >
< label class = "form-check-label" for = "gridCheck" >
Check me out
< / label >
< / div >
< / div >
< button type = "submit" class = "btn btn-primary" > Sign in< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group col-md-6"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputEmail4"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputEmail4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group col-md-6"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword4"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputAddress"< / span > < span class = "nt" > > < / span > Address< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputAddress"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "1234 Main St"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputAddress2"< / span > < span class = "nt" > > < / span > Address 2< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputAddress2"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Apartment, studio, or floor"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group col-md-6"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputCity"< / span > < span class = "nt" > > < / span > City< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputCity"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group col-md-4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputState"< / span > < span class = "nt" > > < / span > State< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > id=< / span > < span class = "s" > "inputState"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > ...< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group col-md-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputZip"< / span > < span class = "nt" > > < / span > Zip< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputZip"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "gridCheck"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "gridCheck"< / span > < span class = "nt" > > < / span >
Check me out
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Sign in< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h4 id = "horizontal-form" > Horizontal form< / h4 >
2020-08-04 19:36:55 +03:00
< p > Create horizontal forms with the grid by adding the < code class = "language-plaintext highlighter-rouge" > .row< / code > class to form groups and using the < code class = "language-plaintext highlighter-rouge" > .col-*-*< / code > classes to specify the width of your labels and controls. Be sure to add < code class = "language-plaintext highlighter-rouge" > .col-form-label< / code > to your < code class = "language-plaintext highlighter-rouge" > < label> < / code > s as well so they’ < / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ < code class = "language-plaintext highlighter-rouge" > padding-top< / code > on our stacked radio inputs label to better align the text baseline.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group row" >
< label for = "inputEmail3" class = "col-sm-2 col-form-label" > Email< / label >
< div class = "col-sm-10" >
< input type = "email" class = "form-control" id = "inputEmail3" / >
< / div >
< / div >
< div class = "form-group row" >
< label for = "inputPassword3" class = "col-sm-2 col-form-label" > Password< / label >
< div class = "col-sm-10" >
< input type = "password" class = "form-control" id = "inputPassword3" / >
< / div >
< / div >
< fieldset class = "form-group" >
< div class = "row" >
< legend class = "col-form-label col-sm-2 pt-0" > Radios< / legend >
< div class = "col-sm-10" >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios1" value = "option1" checked = "" / >
< label class = "form-check-label" for = "gridRadios1" >
First radio
< / label >
< / div >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios2" value = "option2" / >
< label class = "form-check-label" for = "gridRadios2" >
Second radio
< / label >
< / div >
< div class = "form-check disabled" >
< input class = "form-check-input" type = "radio" name = "gridRadios" id = "gridRadios3" value = "option3" disabled = "" / >
< label class = "form-check-label" for = "gridRadios3" >
Third disabled radio
< / label >
< / div >
< / div >
< / div >
< / fieldset >
< div class = "form-group row" >
< div class = "col-sm-2" > Checkbox< / div >
< div class = "col-sm-10" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "gridCheck1" / >
< label class = "form-check-label" for = "gridCheck1" >
Example checkbox
< / label >
< / div >
< / div >
< / div >
< div class = "form-group row" >
< div class = "col-sm-10" >
< button type = "submit" class = "btn btn-primary" > Sign in< / button >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputEmail3"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputEmail3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword3"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < fieldset< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < legend< / span > < span class = "na" > class=< / span > < span class = "s" > "col-form-label col-sm-2 pt-0"< / span > < span class = "nt" > > < / span > Radios< span class = "nt" > < /legend> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "gridRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "gridRadios1"< / span > < span class = "na" > value=< / span > < span class = "s" > "option1"< / span > < span class = "na" > checked< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "gridRadios1"< / span > < span class = "nt" > > < / span >
First radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "gridRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "gridRadios2"< / span > < span class = "na" > value=< / span > < span class = "s" > "option2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "gridRadios2"< / span > < span class = "nt" > > < / span >
Second radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check disabled"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "gridRadios"< / span > < span class = "na" > id=< / span > < span class = "s" > "gridRadios3"< / span > < span class = "na" > value=< / span > < span class = "s" > "option3"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "gridRadios3"< / span > < span class = "nt" > > < / span >
Third disabled radio
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /fieldset> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2"< / span > < span class = "nt" > > < / span > Checkbox< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "gridCheck1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "gridCheck1"< / span > < span class = "nt" > > < / span >
Example checkbox
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Sign in< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h5 id = "horizontal-form-label-sizing" > Horizontal form label sizing< / h5 >
2020-08-04 19:36:55 +03:00
< p > Be sure to use < code class = "language-plaintext highlighter-rouge" > .col-form-label-sm< / code > or < code class = "language-plaintext highlighter-rouge" > .col-form-label-lg< / code > to your < code class = "language-plaintext highlighter-rouge" > < label> < / code > s or < code class = "language-plaintext highlighter-rouge" > < legend> < / code > s to correctly follow the size of < code class = "language-plaintext highlighter-rouge" > .form-control-lg< / code > and < code class = "language-plaintext highlighter-rouge" > .form-control-sm< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-group row" >
< label for = "colFormLabelSm" class = "col-sm-2 col-form-label col-form-label-sm" > Email< / label >
< div class = "col-sm-10" >
< input type = "email" class = "form-control form-control-sm" id = "colFormLabelSm" placeholder = "col-form-label-sm" / >
< / div >
< / div >
< div class = "form-group row" >
< label for = "colFormLabel" class = "col-sm-2 col-form-label" > Email< / label >
< div class = "col-sm-10" >
< input type = "email" class = "form-control" id = "colFormLabel" placeholder = "col-form-label" / >
< / div >
< / div >
< div class = "form-group row" >
< label for = "colFormLabelLg" class = "col-sm-2 col-form-label col-form-label-lg" > Email< / label >
< div class = "col-sm-10" >
< input type = "email" class = "form-control form-control-lg" id = "colFormLabelLg" placeholder = "col-form-label-lg" / >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "colFormLabelSm"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label col-form-label-sm"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-sm"< / span > < span class = "na" > id=< / span > < span class = "s" > "colFormLabelSm"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "col-form-label-sm"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "colFormLabel"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "colFormLabel"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "col-form-label"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "colFormLabelLg"< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-2 col-form-label col-form-label-lg"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-10"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control form-control-lg"< / span > < span class = "na" > id=< / span > < span class = "s" > "colFormLabelLg"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "col-form-label-lg"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h4 id = "column-sizing" > Column sizing< / h4 >
2020-08-04 19:36:55 +03:00
< p > As shown in the previous examples, our grid system allows you to place any number of < code class = "language-plaintext highlighter-rouge" > .col< / code > s within a < code class = "language-plaintext highlighter-rouge" > .row< / code > or < code class = "language-plaintext highlighter-rouge" > .form-row< / code > . They’ < code class = "language-plaintext highlighter-rouge" > .col< / code > s equally split the rest, with specific column classes like < code class = "language-plaintext highlighter-rouge" > .col-7< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-row" >
< div class = "col-7" >
< input type = "text" class = "form-control" placeholder = "City" / >
< / div >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "State" / >
< / div >
< div class = "col" >
< input type = "text" class = "form-control" placeholder = "Zip" / >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-7"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "City"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "State"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Zip"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h4 id = "auto-sizing" > Auto-sizing< / h4 >
2020-08-04 19:36:55 +03:00
< p > The example below uses a flexbox utility to vertically center the contents and changes < code class = "language-plaintext highlighter-rouge" > .col< / code > to < code class = "language-plaintext highlighter-rouge" > .col-auto< / code > so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-row align-items-center" >
< div class = "col-auto" >
< label class = "sr-only" for = "inlineFormInput" > Name< / label >
< input type = "text" class = "form-control mb-2" id = "inlineFormInput" placeholder = "Jane Doe" / >
< / div >
< div class = "col-auto" >
< label class = "sr-only" for = "inlineFormInputGroup" > Username< / label >
< div class = "input-group mb-2" >
< div class = "input-group-prepend" >
< div class = "input-group-text" > @< / div >
< / div >
< input type = "text" class = "form-control" id = "inlineFormInputGroup" placeholder = "Username" / >
< / div >
< / div >
< div class = "col-auto" >
< div class = "form-check mb-2" >
< input class = "form-check-input" type = "checkbox" id = "autoSizingCheck" / >
< label class = "form-check-label" for = "autoSizingCheck" >
Remember me
< / label >
< / div >
< / div >
< div class = "col-auto" >
< button type = "submit" class = "btn btn-primary mb-2" > Submit< / button >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row align-items-center"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInput"< / span > < span class = "nt" > > < / span > Name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control mb-2"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInput"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Jane Doe"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInputGroup"< / span > < span class = "nt" > > < / span > Username< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInputGroup"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Username"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check mb-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "autoSizingCheck"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "autoSizingCheck"< / span > < span class = "nt" > > < / span >
Remember me
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary mb-2"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< p > You can then remix that once again with size-specific column classes.< / p >
< div class = "bd-example" >
< form >
< div class = "form-row align-items-center" >
< div class = "col-sm-3 my-1" >
< label class = "sr-only" for = "inlineFormInputName" > Name< / label >
< input type = "text" class = "form-control" id = "inlineFormInputName" placeholder = "Jane Doe" / >
< / div >
< div class = "col-sm-3 my-1" >
< label class = "sr-only" for = "inlineFormInputGroupUsername" > Username< / label >
< div class = "input-group" >
< div class = "input-group-prepend" >
< div class = "input-group-text" > @< / div >
< / div >
< input type = "text" class = "form-control" id = "inlineFormInputGroupUsername" placeholder = "Username" / >
< / div >
< / div >
< div class = "col-auto my-1" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "autoSizingCheck2" / >
< label class = "form-check-label" for = "autoSizingCheck2" >
Remember me
< / label >
< / div >
< / div >
< div class = "col-auto my-1" >
< button type = "submit" class = "btn btn-primary" > Submit< / button >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row align-items-center"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-3 my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInputName"< / span > < span class = "nt" > > < / span > Name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInputName"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Jane Doe"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-sm-3 my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInputGroupUsername"< / span > < span class = "nt" > > < / span > Username< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInputGroupUsername"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Username"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "autoSizingCheck2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "autoSizingCheck2"< / span > < span class = "nt" > > < / span >
Remember me
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< p > And of course < a href = "#custom-forms" > custom form controls< / a > are supported.< / p >
< div class = "bd-example" >
< form >
< div class = "form-row align-items-center" >
< div class = "col-auto my-1" >
< label class = "mr-sm-2 sr-only" for = "inlineFormCustomSelect" > Preference< / label >
< select class = "custom-select mr-sm-2" id = "inlineFormCustomSelect" >
< option selected = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< div class = "col-auto my-1" >
< div class = "custom-control custom-checkbox mr-sm-2" >
< input type = "checkbox" class = "custom-control-input" id = "customControlAutosizing" / >
< label class = "custom-control-label" for = "customControlAutosizing" > Remember my preference< / label >
< / div >
< / div >
< div class = "col-auto my-1" >
< button type = "submit" class = "btn btn-primary" > Submit< / button >
< / div >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row align-items-center"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "mr-sm-2 sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormCustomSelect"< / span > < span class = "nt" > > < / span > Preference< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select mr-sm-2"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormCustomSelect"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-checkbox mr-sm-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customControlAutosizing"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customControlAutosizing"< / span > < span class = "nt" > > < / span > Remember my preference< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-auto my-1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "inline-forms" > Inline forms< / h3 >
2020-08-04 19:36:55 +03:00
< p > Use the < code class = "language-plaintext highlighter-rouge" > .form-inline< / code > class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.< / p >
2020-05-12 20:50:21 +03:00
< ul >
2020-08-04 19:36:55 +03:00
< li > Controls are < code class = "language-plaintext highlighter-rouge" > display: flex< / code > , collapsing any HTML white space and allowing you to provide alignment control with < a href = "/docs/4.5/utilities/spacing/" > spacing< / a > and < a href = "/docs/4.5/utilities/flex/" > flexbox< / a > utilities.< / li >
< li > Controls and input groups receive < code class = "language-plaintext highlighter-rouge" > width: auto< / code > to override the Bootstrap default < code class = "language-plaintext highlighter-rouge" > width: 100%< / code > .< / li >
2020-05-12 20:50:21 +03:00
< li > Controls < strong > only appear inline in viewports that are at least 576px wide< / strong > to account for narrow viewports on mobile devices.< / li >
< / ul >
2020-08-04 19:36:55 +03:00
< p > You may need to manually address the width and alignment of individual form controls with < a href = "/docs/4.5/utilities/spacing/" > spacing utilities< / a > (as shown below). Lastly, be sure to always include a < code class = "language-plaintext highlighter-rouge" > < label> < / code > with each form control, even if you need to hide it from non-screenreader visitors with < code class = "language-plaintext highlighter-rouge" > .sr-only< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form class = "form-inline" >
< label class = "sr-only" for = "inlineFormInputName2" > Name< / label >
< input type = "text" class = "form-control mb-2 mr-sm-2" id = "inlineFormInputName2" placeholder = "Jane Doe" / >
< label class = "sr-only" for = "inlineFormInputGroupUsername2" > Username< / label >
< div class = "input-group mb-2 mr-sm-2" >
< div class = "input-group-prepend" >
< div class = "input-group-text" > @< / div >
< / div >
< input type = "text" class = "form-control" id = "inlineFormInputGroupUsername2" placeholder = "Username" / >
< / div >
< div class = "form-check mb-2 mr-sm-2" >
< input class = "form-check-input" type = "checkbox" id = "inlineFormCheck" / >
< label class = "form-check-label" for = "inlineFormCheck" >
Remember me
< / label >
< / div >
< button type = "submit" class = "btn btn-primary mb-2" > Submit< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "form-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInputName2"< / span > < span class = "nt" > > < / span > Name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control mb-2 mr-sm-2"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInputName2"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Jane Doe"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormInputGroupUsername2"< / span > < span class = "nt" > > < / span > Username< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-2 mr-sm-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormInputGroupUsername2"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Username"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check mb-2 mr-sm-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormCheck"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormCheck"< / span > < span class = "nt" > > < / span >
Remember me
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary mb-2"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< p > Custom form controls and selects are also supported.< / p >
< div class = "bd-example" >
< form class = "form-inline" >
< label class = "my-1 mr-2" for = "inlineFormCustomSelectPref" > Preference< / label >
< select class = "custom-select my-1 mr-sm-2" id = "inlineFormCustomSelectPref" >
< option selected = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< div class = "custom-control custom-checkbox my-1 mr-sm-2" >
< input type = "checkbox" class = "custom-control-input" id = "customControlInline" / >
< label class = "custom-control-label" for = "customControlInline" > Remember my preference< / label >
< / div >
< button type = "submit" class = "btn btn-primary my-1" > Submit< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "form-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "my-1 mr-2"< / span > < span class = "na" > for=< / span > < span class = "s" > "inlineFormCustomSelectPref"< / span > < span class = "nt" > > < / span > Preference< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select my-1 mr-sm-2"< / span > < span class = "na" > id=< / span > < span class = "s" > "inlineFormCustomSelectPref"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-checkbox my-1 mr-sm-2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customControlInline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customControlInline"< / span > < span class = "nt" > > < / span > Remember my preference< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary my-1"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< div class = "bd-callout bd-callout-warning" >
< h5 id = "alternatives-to-hidden-labels" > Alternatives to hidden labels< / h5 >
2020-08-04 19:36:55 +03:00
< p > Assistive technologies such as screen readers will have trouble with your forms if you don’ < code class = "language-plaintext highlighter-rouge" > .sr-only< / code > class. There are further alternative methods of providing a label for assistive technologies, such as the < code class = "language-plaintext highlighter-rouge" > aria-label< / code > , < code class = "language-plaintext highlighter-rouge" > aria-labelledby< / code > or < code class = "language-plaintext highlighter-rouge" > title< / code > attribute. If none of these are present, assistive technologies may resort to using the < code class = "language-plaintext highlighter-rouge" > placeholder< / code > attribute, if present, but note that use of < code class = "language-plaintext highlighter-rouge" > placeholder< / code > as a replacement for other labelling methods is not advised.< / p >
2020-05-12 20:50:21 +03:00
< / div >
< h2 id = "help-text" > Help text< / h2 >
2020-08-04 19:36:55 +03:00
< p > Block-level help text in forms can be created using < code class = "language-plaintext highlighter-rouge" > .form-text< / code > (previously known as < code class = "language-plaintext highlighter-rouge" > .help-block< / code > in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like < code class = "language-plaintext highlighter-rouge" > .text-muted< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-callout bd-callout-warning" >
< h5 id = "associating-help-text-with-form-controls" > Associating help text with form controls< / h5 >
2020-08-04 19:36:55 +03:00
< p > Help text should be explicitly associated with the form control it relates to using the < code class = "language-plaintext highlighter-rouge" > aria-describedby< / code > attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.< / p >
2020-05-12 20:50:21 +03:00
< / div >
2020-08-04 19:36:55 +03:00
< p > Help text below inputs can be styled with < code class = "language-plaintext highlighter-rouge" > .form-text< / code > . This class includes < code class = "language-plaintext highlighter-rouge" > display: block< / code > and adds some top margin for easy spacing from the inputs above.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< label for = "inputPassword5" > Password< / label >
< input type = "password" id = "inputPassword5" class = "form-control" aria-describedby = "passwordHelpBlock" / >
< small id = "passwordHelpBlock" class = "form-text text-muted" >
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
< / small >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword5"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword5"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "passwordHelpBlock"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < small< / span > < span class = "na" > id=< / span > < span class = "s" > "passwordHelpBlock"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-text text-muted"< / span > < span class = "nt" > > < / span >
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
< span class = "nt" > < /small> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > Inline text can use any typical inline HTML element (be it a < code class = "language-plaintext highlighter-rouge" > < small> < / code > , < code class = "language-plaintext highlighter-rouge" > < span> < / code > , or something else) with nothing more than a utility class.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form class = "form-inline" >
< div class = "form-group" >
< label for = "inputPassword6" > Password< / label >
< input type = "password" id = "inputPassword6" class = "form-control mx-sm-3" aria-describedby = "passwordHelpInline" / >
< small id = "passwordHelpInline" class = "text-muted" >
Must be 8-20 characters long.
< / small >
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "form-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "inputPassword6"< / span > < span class = "nt" > > < / span > Password< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputPassword6"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control mx-sm-3"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "passwordHelpInline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < small< / span > < span class = "na" > id=< / span > < span class = "s" > "passwordHelpInline"< / span > < span class = "na" > class=< / span > < span class = "s" > "text-muted"< / span > < span class = "nt" > > < / span >
Must be 8-20 characters long.
< span class = "nt" > < /small> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h2 id = "disabled-forms" > Disabled forms< / h2 >
2020-08-04 19:36:55 +03:00
< p > Add the < code class = "language-plaintext highlighter-rouge" > disabled< / code > boolean attribute on an input to prevent user interactions and make it appear lighter.< / p >
2020-05-12 20:50:21 +03:00
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "disabledInput"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Disabled input here..."< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > Add the < code class = "language-plaintext highlighter-rouge" > disabled< / code > attribute to a < code class = "language-plaintext highlighter-rouge" > < fieldset> < / code > to disable all the controls within.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< fieldset disabled = "" >
< div class = "form-group" >
< label for = "disabledTextInput" > Disabled input< / label >
< input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input" / >
< / div >
< div class = "form-group" >
< label for = "disabledSelect" > Disabled select menu< / label >
< select id = "disabledSelect" class = "form-control" >
< option > Disabled select< / option >
< / select >
< / div >
< div class = "form-group" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "disabledFieldsetCheck" disabled = "" / >
< label class = "form-check-label" for = "disabledFieldsetCheck" >
Can't check this
< / label >
< / div >
< / div >
< button type = "submit" class = "btn btn-primary" > Submit< / button >
< / fieldset >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < fieldset< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "disabledTextInput"< / span > < span class = "nt" > > < / span > Disabled input< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > id=< / span > < span class = "s" > "disabledTextInput"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Disabled input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "disabledSelect"< / span > < span class = "nt" > > < / span > Disabled select menu< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > id=< / span > < span class = "s" > "disabledSelect"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option> < / span > Disabled select< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > id=< / span > < span class = "s" > "disabledFieldsetCheck"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "disabledFieldsetCheck"< / span > < span class = "nt" > > < / span >
Can't check this
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /fieldset> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< div class = "bd-callout bd-callout-warning" >
< h5 id = "caveat-with-anchors" > Caveat with anchors< / h5 >
2020-08-04 19:36:55 +03:00
< p > Browsers treat all native form controls (< code class = "language-plaintext highlighter-rouge" > < input> < / code > , < code class = "language-plaintext highlighter-rouge" > < select> < / code > , and < code class = "language-plaintext highlighter-rouge" > < button> < / code > elements) inside a < code class = "language-plaintext highlighter-rouge" > < fieldset disabled> < / code > as disabled, preventing both keyboard and mouse interactions on them.< / p >
< p > However, if your form also includes custom button-like elements such as < code class = "language-plaintext highlighter-rouge" > < a ... class="btn btn-*"> < / code > , these will only be given a style of < code class = "language-plaintext highlighter-rouge" > pointer-events: none< / code > . As noted in the section about < a href = "/docs/4.5/components/buttons/#disabled-state" > disabled state for buttons< / a > (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’ < code class = "language-plaintext highlighter-rouge" > tabindex="-1"< / code > to prevent them from receiving focus and < code class = "language-plaintext highlighter-rouge" > aria-disabled="disabled"< / code > to signal their state to assistive technologies.< / p >
2020-05-12 20:50:21 +03:00
< / div >
< div class = "bd-callout bd-callout-danger" >
< h4 id = "cross-browser-compatibility" > Cross-browser compatibility< / h4 >
2020-08-04 19:36:55 +03:00
< p > While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’ < code class = "language-plaintext highlighter-rouge" > disabled< / code > attribute on a < code class = "language-plaintext highlighter-rouge" > < fieldset> < / code > . Use custom JavaScript to disable the fieldset in these browsers.< / p >
2020-05-12 20:50:21 +03:00
< / div >
< h2 id = "validation" > Validation< / h2 >
< p > Provide valuable, actionable feedback to your users with HTML5 form validation– < a href = "https://caniuse.com/#feat=form-validation" > available in all our supported browsers< / a > . Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.< / p >
< div class = "bd-callout bd-callout-warning" >
2020-08-04 19:36:55 +03:00
< p > We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’ < / p >
2020-05-12 20:50:21 +03:00
< / div >
< div class = "bd-callout bd-callout-warning" >
< h5 id = "input-group-validation" > Input group validation< / h5 >
2020-08-04 19:36:55 +03:00
< p > Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the < code class = "language-plaintext highlighter-rouge" > .input-group< / code > that has < code class = "language-plaintext highlighter-rouge" > .is-{valid|invalid}< / code > . Placing feedback messages within input groups breaks the < code class = "language-plaintext highlighter-rouge" > border-radius< / code > . < a href = "#input-group-validation-workaround" > See this workaround< / a > .< / p >
2020-05-12 20:50:21 +03:00
< / div >
< h3 id = "how-it-works" > How it works< / h3 >
< p > Here’ < / p >
< ul >
2020-08-04 19:36:55 +03:00
< li > HTML form validation is applied via CSS’ < code class = "language-plaintext highlighter-rouge" > :invalid< / code > and < code class = "language-plaintext highlighter-rouge" > :valid< / code > . It applies to < code class = "language-plaintext highlighter-rouge" > < input> < / code > , < code class = "language-plaintext highlighter-rouge" > < select> < / code > , and < code class = "language-plaintext highlighter-rouge" > < textarea> < / code > elements.< / li >
< li > Bootstrap scopes the < code class = "language-plaintext highlighter-rouge" > :invalid< / code > and < code class = "language-plaintext highlighter-rouge" > :valid< / code > styles to parent < code class = "language-plaintext highlighter-rouge" > .was-validated< / code > class, usually applied to the < code class = "language-plaintext highlighter-rouge" > < form> < / code > . Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).< / li >
< li > To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the < code class = "language-plaintext highlighter-rouge" > .was-validated< / code > class from the < code class = "language-plaintext highlighter-rouge" > < form> < / code > again after submission.< / li >
< li > As a fallback, < code class = "language-plaintext highlighter-rouge" > .is-invalid< / code > and < code class = "language-plaintext highlighter-rouge" > .is-valid< / code > classes may be used instead of the pseudo-classes for < a href = "#server-side" > server side validation< / a > . They do not require a < code class = "language-plaintext highlighter-rouge" > .was-validated< / code > parent class.< / li >
< li > Due to constraints in how CSS works, we cannot (at present) apply styles to a < code class = "language-plaintext highlighter-rouge" > < label> < / code > that comes before a form control in the DOM without the help of custom JavaScript.< / li >
2020-05-12 20:50:21 +03:00
< li > All modern browsers support the < a href = "https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api" > constraint validation API< / a > , a series of JavaScript methods for validating form controls.< / li >
< li > Feedback messages may utilize the < a href = "#browser-defaults" > browser defaults< / a > (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.< / li >
2020-08-04 19:36:55 +03:00
< li > You may provide custom validity messages with < code class = "language-plaintext highlighter-rouge" > setCustomValidity< / code > in JavaScript.< / li >
2020-05-12 20:50:21 +03:00
< / ul >
< p > With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.< / p >
< h3 id = "custom-styles" > Custom styles< / h3 >
2020-08-04 19:36:55 +03:00
< p > For custom Bootstrap form validation messages, you’ < code class = "language-plaintext highlighter-rouge" > novalidate< / code > boolean attribute to your < code class = "language-plaintext highlighter-rouge" > < form> < / code > . This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ < code class = "language-plaintext highlighter-rouge" > :invalid< / code > and < code class = "language-plaintext highlighter-rouge" > :valid< / code > styles applied to your form controls.< / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for < code class = "language-plaintext highlighter-rouge" > < select> < / code > s are only available with < code class = "language-plaintext highlighter-rouge" > .custom-select< / code > , and not < code class = "language-plaintext highlighter-rouge" > .form-control< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form class = "needs-validation" novalidate = "" >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationCustom01" > First name< / label >
< input type = "text" class = "form-control" id = "validationCustom01" value = "Mark" required = "" / >
< div class = "valid-feedback" >
Looks good!
< / div >
< / div >
< div class = "col-md-6 mb-3" >
< label for = "validationCustom02" > Last name< / label >
< input type = "text" class = "form-control" id = "validationCustom02" value = "Otto" required = "" / >
< div class = "valid-feedback" >
Looks good!
< / div >
< / div >
< / div >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationCustom03" > City< / label >
< input type = "text" class = "form-control" id = "validationCustom03" required = "" / >
< div class = "invalid-feedback" >
Please provide a valid city.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationCustom04" > State< / label >
< select class = "custom-select" id = "validationCustom04" required = "" >
< option selected = "" disabled = "" value = "" > Choose...< / option >
< option > ...< / option >
< / select >
< div class = "invalid-feedback" >
Please select a valid state.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationCustom05" > Zip< / label >
< input type = "text" class = "form-control" id = "validationCustom05" required = "" / >
< div class = "invalid-feedback" >
Please provide a valid zip.
< / div >
< / div >
< / div >
< div class = "form-group" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck" required = "" / >
< label class = "form-check-label" for = "invalidCheck" >
Agree to terms and conditions
< / label >
< div class = "invalid-feedback" >
You must agree before submitting.
< / div >
< / div >
< / div >
< button class = "btn btn-primary" type = "submit" > Submit form< / button >
< / form >
< script >
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
< / script >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "needs-validation"< / span > < span class = "na" > novalidate< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationCustom01"< / span > < span class = "nt" > > < / span > First name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationCustom01"< / span > < span class = "na" > value=< / span > < span class = "s" > "Mark"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-feedback"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationCustom02"< / span > < span class = "nt" > > < / span > Last name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationCustom02"< / span > < span class = "na" > value=< / span > < span class = "s" > "Otto"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-feedback"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationCustom03"< / span > < span class = "nt" > > < / span > City< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationCustom03"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please provide a valid city.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationCustom04"< / span > < span class = "nt" > > < / span > State< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationCustom04"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "na" > disabled< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > ...< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please select a valid state.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationCustom05"< / span > < span class = "nt" > > < / span > Zip< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationCustom05"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please provide a valid zip.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "na" > id=< / span > < span class = "s" > "invalidCheck"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "invalidCheck"< / span > < span class = "nt" > > < / span >
Agree to terms and conditions
< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
You must agree before submitting.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "nt" > > < / span > Submit form< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span >
< span class = "nt" > < script> < / span >
< span class = "c1" > // Example starter JavaScript for disabling form submissions if there are invalid fields< / span >
< span class = "p" > (< / span > < span class = "kd" > function< / span > < span class = "p" > ()< / span > < span class = "p" > {< / span >
< span class = "dl" > '< / span > < span class = "s1" > use strict< / span > < span class = "dl" > '< / span > < span class = "p" > ;< / span >
< span class = "nb" > window< / span > < span class = "p" > .< / span > < span class = "nx" > addEventListener< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > load< / span > < span class = "dl" > '< / span > < span class = "p" > ,< / span > < span class = "kd" > function< / span > < span class = "p" > ()< / span > < span class = "p" > {< / span >
< span class = "c1" > // Fetch all the forms we want to apply custom Bootstrap validation styles to< / span >
< span class = "kd" > var< / span > < span class = "nx" > forms< / span > < span class = "o" > =< / span > < span class = "nb" > document< / span > < span class = "p" > .< / span > < span class = "nx" > getElementsByClassName< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > needs-validation< / span > < span class = "dl" > '< / span > < span class = "p" > );< / span >
< span class = "c1" > // Loop over them and prevent submission< / span >
< span class = "kd" > var< / span > < span class = "nx" > validation< / span > < span class = "o" > =< / span > < span class = "nb" > Array< / span > < span class = "p" > .< / span > < span class = "nx" > prototype< / span > < span class = "p" > .< / span > < span class = "nx" > filter< / span > < span class = "p" > .< / span > < span class = "nx" > call< / span > < span class = "p" > (< / span > < span class = "nx" > forms< / span > < span class = "p" > ,< / span > < span class = "kd" > function< / span > < span class = "p" > (< / span > < span class = "nx" > form< / span > < span class = "p" > )< / span > < span class = "p" > {< / span >
< span class = "nx" > form< / span > < span class = "p" > .< / span > < span class = "nx" > addEventListener< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > submit< / span > < span class = "dl" > '< / span > < span class = "p" > ,< / span > < span class = "kd" > function< / span > < span class = "p" > (< / span > < span class = "nx" > event< / span > < span class = "p" > )< / span > < span class = "p" > {< / span >
< span class = "k" > if< / span > < span class = "p" > (< / span > < span class = "nx" > form< / span > < span class = "p" > .< / span > < span class = "nx" > checkValidity< / span > < span class = "p" > ()< / span > < span class = "o" > ===< / span > < span class = "kc" > false< / span > < span class = "p" > )< / span > < span class = "p" > {< / span >
< span class = "nx" > event< / span > < span class = "p" > .< / span > < span class = "nx" > preventDefault< / span > < span class = "p" > ();< / span >
< span class = "nx" > event< / span > < span class = "p" > .< / span > < span class = "nx" > stopPropagation< / span > < span class = "p" > ();< / span >
< span class = "p" > }< / span >
< span class = "nx" > form< / span > < span class = "p" > .< / span > < span class = "nx" > classList< / span > < span class = "p" > .< / span > < span class = "nx" > add< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > was-validated< / span > < span class = "dl" > '< / span > < span class = "p" > );< / span >
< span class = "p" > },< / span > < span class = "kc" > false< / span > < span class = "p" > );< / span >
< span class = "p" > });< / span >
< span class = "p" > },< / span > < span class = "kc" > false< / span > < span class = "p" > );< / span >
< span class = "p" > })();< / span >
< span class = "nt" > < /script> < / span > < / code > < / pre > < / figure >
< h3 id = "browser-defaults" > Browser defaults< / h3 >
< p > Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ < / p >
< p > While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.< / p >
< div class = "bd-example" >
< form >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationDefault01" > First name< / label >
< input type = "text" class = "form-control" id = "validationDefault01" value = "Mark" required = "" / >
< / div >
< div class = "col-md-6 mb-3" >
< label for = "validationDefault02" > Last name< / label >
< input type = "text" class = "form-control" id = "validationDefault02" value = "Otto" required = "" / >
< / div >
< / div >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationDefault03" > City< / label >
< input type = "text" class = "form-control" id = "validationDefault03" required = "" / >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationDefault04" > State< / label >
< select class = "custom-select" id = "validationDefault04" required = "" >
< option selected = "" disabled = "" value = "" > Choose...< / option >
< option > ...< / option >
< / select >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationDefault05" > Zip< / label >
< input type = "text" class = "form-control" id = "validationDefault05" required = "" / >
< / div >
< / div >
< div class = "form-group" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck2" required = "" / >
< label class = "form-check-label" for = "invalidCheck2" >
Agree to terms and conditions
< / label >
< / div >
< / div >
< button class = "btn btn-primary" type = "submit" > Submit form< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationDefault01"< / span > < span class = "nt" > > < / span > First name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationDefault01"< / span > < span class = "na" > value=< / span > < span class = "s" > "Mark"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationDefault02"< / span > < span class = "nt" > > < / span > Last name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationDefault02"< / span > < span class = "na" > value=< / span > < span class = "s" > "Otto"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationDefault03"< / span > < span class = "nt" > > < / span > City< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationDefault03"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationDefault04"< / span > < span class = "nt" > > < / span > State< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationDefault04"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "na" > disabled< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > ...< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationDefault05"< / span > < span class = "nt" > > < / span > Zip< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationDefault05"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "na" > id=< / span > < span class = "s" > "invalidCheck2"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "invalidCheck2"< / span > < span class = "nt" > > < / span >
Agree to terms and conditions
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "nt" > > < / span > Submit form< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "server-side" > Server side< / h3 >
2020-08-04 19:36:55 +03:00
< p > We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with < code class = "language-plaintext highlighter-rouge" > .is-invalid< / code > and < code class = "language-plaintext highlighter-rouge" > .is-valid< / code > . Note that < code class = "language-plaintext highlighter-rouge" > .invalid-feedback< / code > is also supported with these classes.< / p >
< p > For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using < code class = "language-plaintext highlighter-rouge" > aria-describedby< / code > . This attribute allows more than one < code class = "language-plaintext highlighter-rouge" > id< / code > to be referenced, in case the field already points to additional form text.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationServer01" > First name< / label >
< input type = "text" class = "form-control is-valid" id = "validationServer01" value = "Mark" required = "" / >
< div class = "valid-feedback" >
Looks good!
< / div >
< / div >
< div class = "col-md-6 mb-3" >
< label for = "validationServer02" > Last name< / label >
< input type = "text" class = "form-control is-valid" id = "validationServer02" value = "Otto" required = "" / >
< div class = "valid-feedback" >
Looks good!
< / div >
< / div >
< / div >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationServer03" > City< / label >
2020-08-04 19:36:55 +03:00
< input type = "text" class = "form-control is-invalid" id = "validationServer03" aria-describedby = "validationServer03Feedback" required = "" / >
< div id = "validationServer03Feedback" class = "invalid-feedback" >
2020-05-12 20:50:21 +03:00
Please provide a valid city.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationServer04" > State< / label >
2020-08-04 19:36:55 +03:00
< select class = "custom-select is-invalid" id = "validationServer04" aria-describedby = "validationServer04Feedback" required = "" >
2020-05-12 20:50:21 +03:00
< option selected = "" disabled = "" value = "" > Choose...< / option >
< option > ...< / option >
< / select >
2020-08-04 19:36:55 +03:00
< div id = "validationServer04Feedback" class = "invalid-feedback" >
2020-05-12 20:50:21 +03:00
Please select a valid state.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationServer05" > Zip< / label >
2020-08-04 19:36:55 +03:00
< input type = "text" class = "form-control is-invalid" id = "validationServer05" aria-describedby = "validationServer05Feedback" required = "" / >
< div id = "validationServer05Feedback" class = "invalid-feedback" >
2020-05-12 20:50:21 +03:00
Please provide a valid zip.
< / div >
< / div >
< / div >
< div class = "form-group" >
< div class = "form-check" >
2020-08-04 19:36:55 +03:00
< input class = "form-check-input is-invalid" type = "checkbox" value = "" id = "invalidCheck3" aria-describedby = "invalidCheck3Feedback" required = "" / >
2020-05-12 20:50:21 +03:00
< label class = "form-check-label" for = "invalidCheck3" >
Agree to terms and conditions
< / label >
2020-08-04 19:36:55 +03:00
< div id = "invalidCheck3Feedback" class = "invalid-feedback" >
2020-05-12 20:50:21 +03:00
You must agree before submitting.
< / div >
< / div >
< / div >
< button class = "btn btn-primary" type = "submit" > Submit form< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationServer01"< / span > < span class = "nt" > > < / span > First name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-valid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer01"< / span > < span class = "na" > value=< / span > < span class = "s" > "Mark"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-feedback"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationServer02"< / span > < span class = "nt" > > < / span > Last name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-valid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer02"< / span > < span class = "na" > value=< / span > < span class = "s" > "Otto"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-feedback"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationServer03"< / span > < span class = "nt" > > < / span > City< span class = "nt" > < /label> < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-invalid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer03"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "validationServer03Feedback"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer03Feedback"< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
Please provide a valid city.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationServer04"< / span > < span class = "nt" > > < / span > State< span class = "nt" > < /label> < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select is-invalid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer04"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "validationServer04Feedback"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "na" > disabled< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > ...< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer04Feedback"< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
Please select a valid state.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationServer05"< / span > < span class = "nt" > > < / span > Zip< span class = "nt" > < /label> < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-invalid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer05"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "validationServer05Feedback"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "validationServer05Feedback"< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
Please provide a valid zip.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check"< / span > < span class = "nt" > > < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-input is-invalid"< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "na" > id=< / span > < span class = "s" > "invalidCheck3"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "invalidCheck3Feedback"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "form-check-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "invalidCheck3"< / span > < span class = "nt" > > < / span >
Agree to terms and conditions
< span class = "nt" > < /label> < / span >
2020-08-04 19:36:55 +03:00
< span class = "nt" > < div< / span > < span class = "na" > id=< / span > < span class = "s" > "invalidCheck3Feedback"< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
2020-05-12 20:50:21 +03:00
You must agree before submitting.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "nt" > > < / span > Submit form< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "supported-elements" > Supported elements< / h3 >
< p > Validation styles are available for the following form controls and components:< / p >
< ul >
2020-08-04 19:36:55 +03:00
< li > < code class = "language-plaintext highlighter-rouge" > < input> < / code > s and < code class = "language-plaintext highlighter-rouge" > < textarea> < / code > s with < code class = "language-plaintext highlighter-rouge" > .form-control< / code > < / li >
< li > < code class = "language-plaintext highlighter-rouge" > < select> < / code > s with < code class = "language-plaintext highlighter-rouge" > .form-control< / code > or < code class = "language-plaintext highlighter-rouge" > .custom-select< / code > < / li >
< li > < code class = "language-plaintext highlighter-rouge" > .form-check< / code > s< / li >
< li > < code class = "language-plaintext highlighter-rouge" > .custom-checkbox< / code > s and < code class = "language-plaintext highlighter-rouge" > .custom-radio< / code > s< / li >
< li > < code class = "language-plaintext highlighter-rouge" > .custom-file< / code > < / li >
2020-05-12 20:50:21 +03:00
< / ul >
< div class = "bd-example" >
< form class = "was-validated" >
< div class = "mb-3" >
< label for = "validationTextarea" > Textarea< / label >
< textarea class = "form-control is-invalid" id = "validationTextarea" placeholder = "Required example textarea" required = "" > < / textarea >
< div class = "invalid-feedback" >
Please enter a message in the textarea.
< / div >
< / div >
< div class = "custom-control custom-checkbox mb-3" >
< input type = "checkbox" class = "custom-control-input" id = "customControlValidation1" required = "" / >
< label class = "custom-control-label" for = "customControlValidation1" > Check this custom checkbox< / label >
< div class = "invalid-feedback" > Example invalid feedback text< / div >
< / div >
< div class = "custom-control custom-radio" >
< input type = "radio" class = "custom-control-input" id = "customControlValidation2" name = "radio-stacked" required = "" / >
< label class = "custom-control-label" for = "customControlValidation2" > Toggle this custom radio< / label >
< / div >
< div class = "custom-control custom-radio mb-3" >
< input type = "radio" class = "custom-control-input" id = "customControlValidation3" name = "radio-stacked" required = "" / >
< label class = "custom-control-label" for = "customControlValidation3" > Or toggle this other custom radio< / label >
< div class = "invalid-feedback" > More example invalid feedback text< / div >
< / div >
< div class = "mb-3" >
< select class = "custom-select" required = "" >
< option value = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< div class = "invalid-feedback" > Example invalid custom select feedback< / div >
< / div >
< div class = "custom-file mb-3" >
< input type = "file" class = "custom-file-input" id = "validatedCustomFile" required = "" / >
< label class = "custom-file-label" for = "validatedCustomFile" > Choose file...< / label >
< div class = "invalid-feedback" > Example invalid custom file feedback< / div >
< / div >
< div class = "mb-3" >
< div class = "input-group is-invalid" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "validatedInputGroupPrepend" > @< / span >
< / div >
< input type = "text" class = "form-control is-invalid" aria-describedby = "validatedInputGroupPrepend" required = "" / >
< / div >
< div class = "invalid-feedback" >
Example invalid input group feedback
< / div >
< / div >
< div class = "mb-3" >
< div class = "input-group is-invalid" >
< div class = "input-group-prepend" >
< label class = "input-group-text" for = "validatedInputGroupSelect" > Options< / label >
< / div >
< select class = "custom-select" id = "validatedInputGroupSelect" required = "" >
< option value = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< div class = "invalid-feedback" >
Example invalid input group feedback
< / div >
< / div >
< div class = "input-group is-invalid" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "validatedInputGroupCustomFile" required = "" / >
< label class = "custom-file-label" for = "validatedInputGroupCustomFile" > Choose file...< / label >
< / div >
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
< / div >
< div class = "invalid-feedback" >
Example invalid input group feedback
< / div >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "was-validated"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTextarea"< / span > < span class = "nt" > > < / span > Textarea< span class = "nt" > < /label> < / span >
< span class = "nt" > < textarea< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-invalid"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTextarea"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Required example textarea"< / span > < span class = "na" > required< / span > < span class = "nt" > > < /textarea> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please enter a message in the textarea.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-checkbox mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customControlValidation1"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customControlValidation1"< / span > < span class = "nt" > > < / span > Check this custom checkbox< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span > Example invalid feedback text< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customControlValidation2"< / span > < span class = "na" > name=< / span > < span class = "s" > "radio-stacked"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customControlValidation2"< / span > < span class = "nt" > > < / span > Toggle this custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customControlValidation3"< / span > < span class = "na" > name=< / span > < span class = "s" > "radio-stacked"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customControlValidation3"< / span > < span class = "nt" > > < / span > Or toggle this other custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span > More example invalid feedback text< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span > Example invalid custom select feedback< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "validatedCustomFile"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "validatedCustomFile"< / span > < span class = "nt" > > < / span > Choose file...< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span > Example invalid custom file feedback< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group is-invalid"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "validatedInputGroupPrepend"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control is-invalid"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "validatedInputGroupPrepend"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Example invalid input group feedback
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group is-invalid"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > for=< / span > < span class = "s" > "validatedInputGroupSelect"< / span > < span class = "nt" > > < / span > Options< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "validatedInputGroupSelect"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Example invalid input group feedback
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group is-invalid"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "validatedInputGroupCustomFile"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "validatedInputGroupCustomFile"< / span > < span class = "nt" > > < / span > Choose file...< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Example invalid input group feedback
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "tooltips" > Tooltips< / h3 >
2020-08-04 19:36:55 +03:00
< p > If your form layout allows it, you can swap the < code class = "language-plaintext highlighter-rouge" > .{valid|invalid}-feedback< / code > classes for < code class = "language-plaintext highlighter-rouge" > .{valid|invalid}-tooltip< / code > classes to display validation feedback in a styled tooltip. Be sure to have a parent with < code class = "language-plaintext highlighter-rouge" > position: relative< / code > on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< form class = "needs-validation" novalidate = "" >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationTooltip01" > First name< / label >
< input type = "text" class = "form-control" id = "validationTooltip01" value = "Mark" required = "" / >
< div class = "valid-tooltip" >
Looks good!
< / div >
< / div >
< div class = "col-md-6 mb-3" >
< label for = "validationTooltip02" > Last name< / label >
< input type = "text" class = "form-control" id = "validationTooltip02" value = "Otto" required = "" / >
< div class = "valid-tooltip" >
Looks good!
< / div >
< / div >
< / div >
< div class = "form-row" >
< div class = "col-md-6 mb-3" >
< label for = "validationTooltip03" > City< / label >
< input type = "text" class = "form-control" id = "validationTooltip03" required = "" / >
< div class = "invalid-tooltip" >
Please provide a valid city.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationTooltip04" > State< / label >
< select class = "custom-select" id = "validationTooltip04" required = "" >
< option selected = "" disabled = "" value = "" > Choose...< / option >
< option > ...< / option >
< / select >
< div class = "invalid-tooltip" >
Please select a valid state.
< / div >
< / div >
< div class = "col-md-3 mb-3" >
< label for = "validationTooltip05" > Zip< / label >
< input type = "text" class = "form-control" id = "validationTooltip05" required = "" / >
< div class = "invalid-tooltip" >
Please provide a valid zip.
< / div >
< / div >
< / div >
< button class = "btn btn-primary" type = "submit" > Submit form< / button >
< / form >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < form< / span > < span class = "na" > class=< / span > < span class = "s" > "needs-validation"< / span > < span class = "na" > novalidate< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTooltip01"< / span > < span class = "nt" > > < / span > First name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTooltip01"< / span > < span class = "na" > value=< / span > < span class = "s" > "Mark"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-tooltip"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTooltip02"< / span > < span class = "nt" > > < / span > Last name< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTooltip02"< / span > < span class = "na" > value=< / span > < span class = "s" > "Otto"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "valid-tooltip"< / span > < span class = "nt" > > < / span >
Looks good!
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "form-row"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-6 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTooltip03"< / span > < span class = "nt" > > < / span > City< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTooltip03"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-tooltip"< / span > < span class = "nt" > > < / span >
Please provide a valid city.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTooltip04"< / span > < span class = "nt" > > < / span > State< span class = "nt" > < /label> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTooltip04"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "na" > disabled< / span > < span class = "na" > value=< / span > < span class = "s" > ""< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > ...< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-tooltip"< / span > < span class = "nt" > > < / span >
Please select a valid state.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "col-md-3 mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "validationTooltip05"< / span > < span class = "nt" > > < / span > Zip< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "validationTooltip05"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-tooltip"< / span > < span class = "nt" > > < / span >
Please provide a valid zip.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-primary"< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "nt" > > < / span > Submit form< span class = "nt" > < /button> < / span >
< span class = "nt" > < /form> < / span > < / code > < / pre > < / figure >
< h3 id = "customizing" > Customizing< / h3 >
2020-08-04 19:36:55 +03:00
< p > Validation states can be customized via Sass with the < code class = "language-plaintext highlighter-rouge" > $form-validation-states< / code > map. Located in our < code class = "language-plaintext highlighter-rouge" > _variables.scss< / code > file, this Sass map is looped over to generate the default < code class = "language-plaintext highlighter-rouge" > valid< / code > /< code class = "language-plaintext highlighter-rouge" > invalid< / code > validation states. Included is a nested map for customizing each state’ < / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > Please note that we do not recommend customizing these values without also modifying the < code class = "language-plaintext highlighter-rouge" > form-validation-state< / code > mixin.< / p >
2020-05-12 20:50:21 +03:00
< figure class = "highlight" > < pre > < code class = "language-scss" data-lang = "scss" > < span class = "c1" > // Sass map from `_variables.scss`< / span >
< span class = "c1" > // Override this and recompile your Sass to generate different states< / span >
< span class = "nv" > $form-validation-states< / span > < span class = "p" > :< / span > < span class = "nf" > map-merge< / span > < span class = "p" > (< / span >
< span class = "p" > (< / span >
< span class = "s2" > "valid"< / span > < span class = "o" > :< / span > < span class = "p" > (< / span >
< span class = "s2" > "color"< / span > < span class = "o" > :< / span > < span class = "nv" > $form-feedback-valid-color< / span > < span class = "o" > ,< / span >
< span class = "s2" > "icon"< / span > < span class = "o" > :< / span > < span class = "nv" > $form-feedback-icon-valid< / span >
< span class = "p" > )< / span > < span class = "o" > ,< / span >
< span class = "s2" > "invalid"< / span > < span class = "o" > :< / span > < span class = "p" > (< / span >
< span class = "s2" > "color"< / span > < span class = "o" > :< / span > < span class = "nv" > $form-feedback-invalid-color< / span > < span class = "o" > ,< / span >
< span class = "s2" > "icon"< / span > < span class = "o" > :< / span > < span class = "nv" > $form-feedback-icon-invalid< / span >
< span class = "p" > )< / span >
< span class = "p" > )< / span > < span class = "o" > ,< / span >
< span class = "nv" > $form-validation-states< / span >
< span class = "p" > );< / span >
< span class = "c1" > // Loop from `_forms.scss`< / span >
< span class = "c1" > // Any modifications to the above Sass map will be reflected in your compiled< / span >
< span class = "c1" > // CSS via this loop.< / span >
< span class = "k" > @each< / span > < span class = "nv" > $state< / span > < span class = "o" > ,< / span > < span class = "nv" > $data< / span > < span class = "n" > in< / span > < span class = "nv" > $form-validation-states< / span > < span class = "p" > {< / span >
< span class = "k" > @include< / span > < span class = "nd" > form-validation-state< / span > < span class = "p" > (< / span > < span class = "nv" > $state< / span > < span class = "o" > ,< / span > < span class = "nf" > map-get< / span > < span class = "p" > (< / span > < span class = "nv" > $data< / span > < span class = "o" > ,< / span > < span class = "n" > color< / span > < span class = "p" > )< / span > < span class = "o" > ,< / span > < span class = "nf" > map-get< / span > < span class = "p" > (< / span > < span class = "nv" > $data< / span > < span class = "o" > ,< / span > < span class = "nb" > icon< / span > < span class = "p" > ));< / span >
< span class = "p" > }< / span > < / code > < / pre > < / figure >
< h3 id = "input-group-validation-workaround" > Input group validation workaround< / h3 >
2020-08-04 19:36:55 +03:00
< p > We’ < code class = "language-plaintext highlighter-rouge" > border-radius< / code > of input groups with validation due to selector limitations, so manual overrides are required. When you’ ’ < code class = "language-plaintext highlighter-rouge" > .rounded-right< / code > to the elements with the broken < code class = "language-plaintext highlighter-rouge" > border-radius< / code > .< / p >
2020-05-12 20:50:21 +03:00
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control rounded-right"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please choose a username.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "bd-example bd-example-forms-input-group-workaround" >
< div class = "input-group" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > @< / span >
< / div >
< input type = "text" class = "form-control is-invalid rounded-right" required = "" / >
< div class = "invalid-feedback" >
Please choose a username.
< / div >
< / div >
< / div >
2020-08-04 19:36:55 +03:00
< p > When you are using a small or large input group or customizing the default < code class = "language-plaintext highlighter-rouge" > border-radius< / code > values, add custom CSS to the element with the busted < code class = "language-plaintext highlighter-rouge" > border-radius< / code > .< / p >
2020-05-12 20:50:21 +03:00
< figure class = "highlight" > < pre > < code class = "language-css" data-lang = "css" > < span class = "c" > /* Change values to match the radius of your form control */< / span >
< span class = "nc" > .fix-rounded-right< / span > < span class = "p" > {< / span >
< span class = "nl" > border-top-right-radius< / span > < span class = "p" > :< / span > < span class = "m" > .2rem< / span > < span class = "cp" > !important< / span > < span class = "p" > ;< / span >
< span class = "nl" > border-bottom-right-radius< / span > < span class = "p" > :< / span > < span class = "m" > .2rem< / span > < span class = "cp" > !important< / span > < span class = "p" > ;< / span >
< span class = "p" > }< / span > < / code > < / pre > < / figure >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group input-group-sm"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control fix-rounded-right"< / span > < span class = "na" > required< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "invalid-feedback"< / span > < span class = "nt" > > < / span >
Please choose a username.
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "bd-example bd-example-forms-input-group-workaround" >
< div class = "input-group input-group-sm" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > @< / span >
< / div >
< input type = "text" class = "form-control is-invalid fix-rounded-right" required = "" / >
< div class = "invalid-feedback" >
Please choose a username.
< / div >
< / div >
< / div >
< h2 id = "custom-forms" > Custom forms< / h2 >
< p > For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’ ’ < / p >
< h3 id = "checkboxes-and-radios-1" > Checkboxes and radios< / h3 >
2020-08-04 19:36:55 +03:00
< p > Each checkbox and radio < code class = "language-plaintext highlighter-rouge" > < input> < / code > and < code class = "language-plaintext highlighter-rouge" > < label> < / code > pairing is wrapped in a < code class = "language-plaintext highlighter-rouge" > < div> < / code > to create our custom control. Structurally, this is the same approach as our default < code class = "language-plaintext highlighter-rouge" > .form-check< / code > .< / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > We use the sibling selector (< code class = "language-plaintext highlighter-rouge" > ~< / code > ) for all our < code class = "language-plaintext highlighter-rouge" > < input> < / code > states—like < code class = "language-plaintext highlighter-rouge" > :checked< / code > —to properly style our custom form indicator. When combined with the < code class = "language-plaintext highlighter-rouge" > .custom-control-label< / code > class, we can also style the text for each item based on the < code class = "language-plaintext highlighter-rouge" > < input> < / code > ’ < / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > We hide the default < code class = "language-plaintext highlighter-rouge" > < input> < / code > with < code class = "language-plaintext highlighter-rouge" > opacity< / code > and use the < code class = "language-plaintext highlighter-rouge" > .custom-control-label< / code > to build a new custom form indicator in its place with < code class = "language-plaintext highlighter-rouge" > ::before< / code > and < code class = "language-plaintext highlighter-rouge" > ::after< / code > . Unfortunately we can’ < code class = "language-plaintext highlighter-rouge" > < input> < / code > because CSS’ < code class = "language-plaintext highlighter-rouge" > content< / code > doesn’ < / p >
2020-05-12 20:50:21 +03:00
< p > In the checked states, we use < strong > base64 embedded SVG icons< / strong > from < a href = "https://github.com/iconic/open-iconic" > Open Iconic< / a > . This provides us the best control for styling and positioning across browsers and devices.< / p >
< h4 id = "checkboxes" > Checkboxes< / h4 >
< div class = "bd-example" >
< div class = "custom-control custom-checkbox" >
< input type = "checkbox" class = "custom-control-input" id = "customCheck1" / >
< label class = "custom-control-label" for = "customCheck1" > Check this custom checkbox< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-checkbox"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customCheck1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customCheck1"< / span > < span class = "nt" > > < / span > Check this custom checkbox< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > Custom checkboxes can also utilize the < code class = "language-plaintext highlighter-rouge" > :indeterminate< / code > pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example bd-example-indeterminate" >
< div class = "custom-control custom-checkbox" >
< input type = "checkbox" class = "custom-control-input" id = "customCheck2" / >
< label class = "custom-control-label" for = "customCheck2" > Check this custom checkbox< / label >
< / div >
< / div >
< p > If you’ < / p >
< figure class = "highlight" > < pre > < code class = "language-js" data-lang = "js" > < span class = "nx" > $< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > .your-checkbox< / span > < span class = "dl" > '< / span > < span class = "p" > ).< / span > < span class = "nx" > prop< / span > < span class = "p" > (< / span > < span class = "dl" > '< / span > < span class = "s1" > indeterminate< / span > < span class = "dl" > '< / span > < span class = "p" > ,< / span > < span class = "kc" > true< / span > < span class = "p" > )< / span > < / code > < / pre > < / figure >
< h4 id = "radios" > Radios< / h4 >
< div class = "bd-example" >
< div class = "custom-control custom-radio" >
< input type = "radio" id = "customRadio1" name = "customRadio" class = "custom-control-input" / >
< label class = "custom-control-label" for = "customRadio1" > Toggle this custom radio< / label >
< / div >
< div class = "custom-control custom-radio" >
< input type = "radio" id = "customRadio2" name = "customRadio" class = "custom-control-input" / >
< label class = "custom-control-label" for = "customRadio2" > Or toggle this other custom radio< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRadio1"< / span > < span class = "na" > name=< / span > < span class = "s" > "customRadio"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customRadio1"< / span > < span class = "nt" > > < / span > Toggle this custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRadio2"< / span > < span class = "na" > name=< / span > < span class = "s" > "customRadio"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customRadio2"< / span > < span class = "nt" > > < / span > Or toggle this other custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h4 id = "inline-1" > Inline< / h4 >
< div class = "bd-example" >
< div class = "custom-control custom-radio custom-control-inline" >
< input type = "radio" id = "customRadioInline1" name = "customRadioInline1" class = "custom-control-input" / >
< label class = "custom-control-label" for = "customRadioInline1" > Toggle this custom radio< / label >
< / div >
< div class = "custom-control custom-radio custom-control-inline" >
< input type = "radio" id = "customRadioInline2" name = "customRadioInline1" class = "custom-control-input" / >
< label class = "custom-control-label" for = "customRadioInline2" > Or toggle this other custom radio< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio custom-control-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRadioInline1"< / span > < span class = "na" > name=< / span > < span class = "s" > "customRadioInline1"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customRadioInline1"< / span > < span class = "nt" > > < / span > Toggle this custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio custom-control-inline"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRadioInline2"< / span > < span class = "na" > name=< / span > < span class = "s" > "customRadioInline1"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customRadioInline2"< / span > < span class = "nt" > > < / span > Or toggle this other custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h4 id = "disabled" > Disabled< / h4 >
2020-08-04 19:36:55 +03:00
< p > Custom checkboxes and radios can also be disabled. Add the < code class = "language-plaintext highlighter-rouge" > disabled< / code > boolean attribute to the < code class = "language-plaintext highlighter-rouge" > < input> < / code > and the custom indicator and label description will be automatically styled.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "custom-control custom-checkbox" >
< input type = "checkbox" class = "custom-control-input" id = "customCheckDisabled1" disabled = "" / >
< label class = "custom-control-label" for = "customCheckDisabled1" > Check this custom checkbox< / label >
< / div >
< div class = "custom-control custom-radio" >
< input type = "radio" name = "radioDisabled" id = "customRadioDisabled2" class = "custom-control-input" disabled = "" / >
< label class = "custom-control-label" for = "customRadioDisabled2" > Toggle this custom radio< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-checkbox"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customCheckDisabled1"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customCheckDisabled1"< / span > < span class = "nt" > > < / span > Check this custom checkbox< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "radioDisabled"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRadioDisabled2"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > disabled< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customRadioDisabled2"< / span > < span class = "nt" > > < / span > Toggle this custom radio< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "switches" > Switches< / h3 >
2020-08-04 19:36:55 +03:00
< p > A switch has the markup of a custom checkbox but uses the < code class = "language-plaintext highlighter-rouge" > .custom-switch< / code > class to render a toggle switch. Switches also support the < code class = "language-plaintext highlighter-rouge" > disabled< / code > attribute.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "custom-control custom-switch" >
< input type = "checkbox" class = "custom-control-input" id = "customSwitch1" / >
< label class = "custom-control-label" for = "customSwitch1" > Toggle this switch element< / label >
< / div >
< div class = "custom-control custom-switch" >
< input type = "checkbox" class = "custom-control-input" disabled = "" id = "customSwitch2" / >
< label class = "custom-control-label" for = "customSwitch2" > Disabled switch element< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-switch"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customSwitch1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customSwitch1"< / span > < span class = "nt" > > < / span > Toggle this switch element< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control custom-switch"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-input"< / span > < span class = "na" > disabled< / span > < span class = "na" > id=< / span > < span class = "s" > "customSwitch2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-control-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customSwitch2"< / span > < span class = "nt" > > < / span > Disabled switch element< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "select-menu" > Select menu< / h3 >
2020-08-04 19:36:55 +03:00
< p > Custom < code class = "language-plaintext highlighter-rouge" > < select> < / code > menus need only a custom class, < code class = "language-plaintext highlighter-rouge" > .custom-select< / code > to trigger the custom styles. Custom styles are limited to the < code class = "language-plaintext highlighter-rouge" > < select> < / code > ’ < code class = "language-plaintext highlighter-rouge" > < option> < / code > s due to browser limitations.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< select class = "custom-select" >
< option selected = "" > Open this select menu< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Open this select menu< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span > < / code > < / pre > < / figure >
< p > You may also choose from small and large custom selects to match our similarly sized text inputs.< / p >
< div class = "bd-example" >
< select class = "custom-select custom-select-lg mb-3" >
< option selected = "" > Open this select menu< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< select class = "custom-select custom-select-sm" >
< option selected = "" > Open this select menu< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select custom-select-lg mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Open this select menu< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select custom-select-sm"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Open this select menu< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > The < code class = "language-plaintext highlighter-rouge" > multiple< / code > attribute is also supported:< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< select class = "custom-select" multiple = "" >
< option selected = "" > Open this select menu< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > multiple< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Open this select menu< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > As is the < code class = "language-plaintext highlighter-rouge" > size< / code > attribute:< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< select class = "custom-select" size = "3" >
< option selected = "" > Open this select menu< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > size=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Open this select menu< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span > < / code > < / pre > < / figure >
< h3 id = "range" > Range< / h3 >
2020-08-04 19:36:55 +03:00
< p > Create custom < code class = "language-plaintext highlighter-rouge" > < input type="range"> < / code > controls with < code class = "language-plaintext highlighter-rouge" > .custom-range< / code > . The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< label for = "customRange1" > Example range< / label >
< input type = "range" class = "custom-range" id = "customRange1" / >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "customRange1"< / span > < span class = "nt" > > < / span > Example range< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "range"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-range"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRange1"< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > Range inputs have implicit values for < code class = "language-plaintext highlighter-rouge" > min< / code > and < code class = "language-plaintext highlighter-rouge" > max< / code > —< code class = "language-plaintext highlighter-rouge" > 0< / code > and < code class = "language-plaintext highlighter-rouge" > 100< / code > , respectively. You may specify new values for those using the < code class = "language-plaintext highlighter-rouge" > min< / code > and < code class = "language-plaintext highlighter-rouge" > max< / code > attributes.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< label for = "customRange2" > Example range< / label >
< input type = "range" class = "custom-range" min = "0" max = "5" id = "customRange2" / >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "customRange2"< / span > < span class = "nt" > > < / span > Example range< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "range"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-range"< / span > < span class = "na" > min=< / span > < span class = "s" > "0"< / span > < span class = "na" > max=< / span > < span class = "s" > "5"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRange2"< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > By default, range inputs “snap” to integer values. To change this, you can specify a < code class = "language-plaintext highlighter-rouge" > step< / code > value. In the example below, we double the number of steps by using < code class = "language-plaintext highlighter-rouge" > step="0.5"< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< label for = "customRange3" > Example range< / label >
< input type = "range" class = "custom-range" min = "0" max = "5" step = "0.5" id = "customRange3" / >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "customRange3"< / span > < span class = "nt" > > < / span > Example range< span class = "nt" > < /label> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "range"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-range"< / span > < span class = "na" > min=< / span > < span class = "s" > "0"< / span > < span class = "na" > max=< / span > < span class = "s" > "5"< / span > < span class = "na" > step=< / span > < span class = "s" > "0.5"< / span > < span class = "na" > id=< / span > < span class = "s" > "customRange3"< / span > < span class = "nt" > > < / span > < / code > < / pre > < / figure >
< h3 id = "file-browser" > File browser< / h3 >
< div class = "bd-callout bd-callout-info" >
< p > The recommended plugin to animate custom file input: < a href = "https://www.npmjs.com/package/bs-custom-file-input" > bs-custom-file-input< / a > , that’ < / p >
< / div >
< p > The file input is the most gnarly of the bunch and requires additional JavaScript if you’ < em > Choose file…< / em > and selected file name text.< / p >
< div class = "bd-example" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "customFile" / >
< label class = "custom-file-label" for = "customFile" > Choose file< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customFile"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customFile"< / span > < span class = "nt" > > < / span > Choose file< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > We hide the default file < code class = "language-plaintext highlighter-rouge" > < input> < / code > via < code class = "language-plaintext highlighter-rouge" > opacity< / code > and instead style the < code class = "language-plaintext highlighter-rouge" > < label> < / code > . The button is generated and positioned with < code class = "language-plaintext highlighter-rouge" > ::after< / code > . Lastly, we declare a < code class = "language-plaintext highlighter-rouge" > width< / code > and < code class = "language-plaintext highlighter-rouge" > height< / code > on the < code class = "language-plaintext highlighter-rouge" > < input> < / code > for proper spacing for surrounding content.< / p >
2020-05-12 20:50:21 +03:00
< h4 id = "translating-or-customizing-the-strings-with-scss" > Translating or customizing the strings with SCSS< / h4 >
2020-08-04 19:36:55 +03:00
< p > The < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/:lang" > < code class = "language-plaintext highlighter-rouge" > :lang()< / code > pseudo-class< / a > is used to allow for translation of the “Browse” text into other languages. Override or add entries to the < code class = "language-plaintext highlighter-rouge" > $custom-file-text< / code > Sass variable with the relevant < a href = "https://en.wikipedia.org/wiki/IETF_language_tag" > language tag< / a > and localized strings. The English strings can be customized the same way. For example, here’ ’ < code class = "language-plaintext highlighter-rouge" > es< / code > ):< / p >
2020-05-12 20:50:21 +03:00
< figure class = "highlight" > < pre > < code class = "language-scss" data-lang = "scss" > < span class = "nv" > $custom-file-text< / span > < span class = "p" > :< / span > < span class = "p" > (< / span >
< span class = "n" > en< / span > < span class = "o" > :< / span > < span class = "s2" > "Browse"< / span > < span class = "o" > ,< / span >
< span class = "n" > es< / span > < span class = "o" > :< / span > < span class = "s2" > "Elegir"< / span >
< span class = "p" > );< / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > Here’ < code class = "language-plaintext highlighter-rouge" > lang(es)< / code > in action on the custom file input for a Spanish translation:< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "customFileLang" lang = "es" / >
< label class = "custom-file-label" for = "customFileLang" > Seleccionar Archivo< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customFileLang"< / span > < span class = "na" > lang=< / span > < span class = "s" > "es"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customFileLang"< / span > < span class = "nt" > > < / span > Seleccionar Archivo< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
2020-08-04 19:36:55 +03:00
< p > You’ < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang" > the < code class = "language-plaintext highlighter-rouge" > lang< / code > attribute< / a > on the < code class = "language-plaintext highlighter-rouge" > < html> < / code > element or the < a href = "https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12" > < code class = "language-plaintext highlighter-rouge" > Content-Language< / code > HTTP header< / a > , among other methods.< / p >
2020-05-12 20:50:21 +03:00
< h4 id = "translating-or-customizing-the-strings-with-html" > Translating or customizing the strings with HTML< / h4 >
2020-08-04 19:36:55 +03:00
< p > Bootstrap also provides a way to translate the “Browse” text in HTML with the < code class = "language-plaintext highlighter-rouge" > data-browse< / code > attribute which can be added to the custom input label (example in Dutch):< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "customFileLangHTML" / >
< label class = "custom-file-label" for = "customFileLangHTML" data-browse = "Bestand kiezen" > Voeg je document toe< / label >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "customFileLangHTML"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "customFileLangHTML"< / span > < span class = "na" > data-browse=< / span > < span class = "s" > "Bestand kiezen"< / span > < span class = "nt" > > < / span > Voeg je document toe< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / main >
< / div >
< / div >
< script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > < / script >
2020-10-13 18:59:54 +03:00
< script > window . jQuery || document . write ( '<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>' ) < / script > < script src = "/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous" > < / script > < script src = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" > < / script > < script src = "/docs/4.5/assets/js/docs.min.js" > < / script >
2020-05-12 20:50:21 +03:00
< / body >
< / html >
