mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 14:17:54 +03:00
3000 lines
175 KiB
HTML
3000 lines
175 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title>
|
||
|
||
Forms · Bootstrap Material Design
|
||
|
||
</title>
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:site" content="@getbootstrap">
|
||
<meta name="twitter:creator" content="@getbootstrap">
|
||
|
||
|
||
<meta name="twitter:card" content="summary">
|
||
<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/assets/brand/bootstrap-social-logo.png">
|
||
|
||
|
||
<!-- Facebook -->
|
||
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/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="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://getbootstrap.com/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">
|
||
|
||
<!-- Meta -->
|
||
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
|
||
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||
<div class="container">
|
||
<span class="skiplink-text">Skip to main content</span>
|
||
</div>
|
||
</a>
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
|
||
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" 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="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<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.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
|
||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path 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" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path 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" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" 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 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" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form 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">
|
||
<button class="btn-link 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 avigation">
|
||
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||
|
||
</button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Introduction
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/">
|
||
Download
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/contents/">
|
||
Contents
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/">
|
||
JavaScript
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
|
||
Options
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/build-tools/">
|
||
Build tools
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/webpack/">
|
||
Webpack
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/accessibility/">
|
||
Accessibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Overview
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/grid/">
|
||
Grid
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/media-object/">
|
||
Media object
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Reboot
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/typography/">
|
||
Typography
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/code/">
|
||
Code
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/images/">
|
||
Images
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/tables/">
|
||
Tables
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/figures/">
|
||
Figures
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
|
||
Button group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/card/">
|
||
Card
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
|
||
Carousel
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="active bd-sidenav-active">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
|
||
Input group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
|
||
Jumbotron
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
|
||
List group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
|
||
Pagination
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
|
||
Popovers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
|
||
Progress
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
|
||
Scrollspy
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
|
||
Tooltips
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Material Design
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/collapse-inline/">
|
||
Collapse inline
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/drawers/">
|
||
Drawers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/extensions/">
|
||
Extensions
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/labels/">
|
||
Labels
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/list-groups/">
|
||
List groups
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/menus/">
|
||
Menus
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/selections/">
|
||
Selections
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/snackbars/">
|
||
Snackbars
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Borders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/clearfix/">
|
||
Clearfix
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/close-icon/">
|
||
Close icon
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/colors/">
|
||
Colors
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/display/">
|
||
Display
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/embed/">
|
||
Embed
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/flex/">
|
||
Flex
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/float/">
|
||
Float
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/image-replacement/">
|
||
Image replacement
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/position/">
|
||
Position
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/screenreaders/">
|
||
Screenreaders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/sizing/">
|
||
Sizing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">
|
||
Spacing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/text/">
|
||
Text
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/vertical-align/">
|
||
Vertical align
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">
|
||
Visibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Icons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<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="#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>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#alternatives-to-hidden-labels">Alternatives to hidden labels</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#help-text">Help text</a>
|
||
<ul>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h5"><a href="#associating-help-text-with-form-controls">Associating help text with form controls</a></li>
|
||
</ul>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#disabled-forms">Disabled forms</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#caveat-with-anchors">Caveat with anchors</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#cross-browser-compatibility">Cross-browser compatibility</a></li>
|
||
</ul>
|
||
</ul>
|
||
</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>
|
||
</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="#disabled">Disabled</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#stacked">Stacked</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#select-menu">Select menu</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">Translating or customizing the strings</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Forms</h1>
|
||
<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 type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
|
||
|
||
<h2 id="overview">Overview</h2>
|
||
|
||
<p>Bootstrap’s form controls expand on <a href="/bootstrap-material-design/docs/4.0/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>
|
||
|
||
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||
|
||
<p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
|
||
<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" placeholder="Password" />
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="checkbox" class="form-check-input" />
|
||
Check me out
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</div>
|
||
<div 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="na">placeholder=</span><span class="s">"Enter email"</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="na">placeholder=</span><span class="s">"Password"</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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="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></div>
|
||
|
||
<h2 id="form-controls">Form controls</h2>
|
||
|
||
<p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, and <code class="highlighter-rouge"><textarea></code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||
|
||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge"><select></code>s.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-control-file</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlFile1">Example file input</label>
|
||
<input type="file" class="form-control-file" id="exampleFormControlFile1" />
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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></div>
|
||
|
||
<h3 id="sizing">Sizing</h3>
|
||
|
||
<p>Set heights using classes like <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<h3 id="readonly">Readonly</h3>
|
||
|
||
<p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<input class="form-control" type="text" placeholder="Readonly input here…" readonly="" />
|
||
</div>
|
||
<div 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></div>
|
||
|
||
<h3 id="readonly-plain-text">Readonly plain text</h3>
|
||
|
||
<p>If you want to have <code class="highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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" placeholder="Password" />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form class="form-inline">
|
||
<div class="form-group">
|
||
<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">
|
||
<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">Confirm identity</button>
|
||
</form>
|
||
</div>
|
||
<div 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">"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"</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"</span><span class="nt">></span>Confirm identity<span class="nt"></button></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||
|
||
<p>Default checkboxes and radios are improved upon with the help of <code class="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>
|
||
|
||
<p>Disabled checkboxes and radios are supported, but to provide a <code class="highlighter-rouge">not-allowed</code> cursor on hover of the parent <code class="highlighter-rouge"><label></code>, you’ll need to add the <code class="highlighter-rouge">.disabled</code> class to the parent <code class="highlighter-rouge">.form-check</code>. The disabled class will also lighten the text color to help indicate the input’s state.</p>
|
||
|
||
<h3 id="default-stacked">Default (stacked)</h3>
|
||
|
||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" />
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" disabled="" />
|
||
Option two is disabled
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="nt">></span>
|
||
Option one is this and that<span class="ni">&mdash;</span>be sure to include why it's great
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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">disabled</span><span class="nt">></span>
|
||
Option two is disabled
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="" />
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div>
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="" />
|
||
Option three is disabled
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option one is this and that<span class="ni">&mdash;</span>be sure to include why it's great
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option two can be something else and selecting it will deselect option one
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option three is disabled
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h3 id="inline">Inline</h3>
|
||
|
||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" /> 1
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" /> 2
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="" /> 3
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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> 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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> 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 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="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> 3
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> 1
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" /> 3
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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> 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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> 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 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="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> 3
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h3 id="without-labels">Without labels</h3>
|
||
|
||
<p>Add <code class="highlighter-rouge">.position-static</code> to inputs within <code class="highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using <code class="highlighter-rouge">aria-label</code>).</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..." />
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..." />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div 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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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"></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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="layout">Layout</h2>
|
||
|
||
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="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>
|
||
|
||
<h3 id="form-groups">Form groups</h3>
|
||
|
||
<p>The <code class="highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. Its only purpose is to provide <code class="highlighter-rouge">margin-bottom</code> around a label and control pairing. As a bonus, since it’s a class you can use it with <code class="highlighter-rouge"><fieldset></code>s, <code class="highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-group">
|
||
<label class="form-control-label" for="formGroupExampleInput">Example label</label>
|
||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-control-label" for="formGroupExampleInput2">Another label</label>
|
||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" />
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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">class=</span><span class="s">"form-control-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"</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">class=</span><span class="s">"form-control-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"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<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" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<h4 id="form-row">Form row</h4>
|
||
|
||
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="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>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<p>More complex layouts can also be created with the grid system.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-6">
|
||
<label for="inputEmail4" class="col-form-label">Email</label>
|
||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email" />
|
||
</div>
|
||
<div class="form-group col-md-6">
|
||
<label for="inputPassword4" class="col-form-label">Password</label>
|
||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inputAddress" class="col-form-label">Address</label>
|
||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inputAddress2" class="col-form-label">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" class="col-form-label">City</label>
|
||
<input type="text" class="form-control" id="inputCity" />
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="inputState" class="col-form-label">State</label>
|
||
<select id="inputState" class="form-control">Choose</select>
|
||
</div>
|
||
<div class="form-group col-md-2">
|
||
<label for="inputZip" class="col-form-label">Zip</label>
|
||
<input type="text" class="form-control" id="inputZip" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" /> Check me out
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</form>
|
||
</div>
|
||
<div 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="na">class=</span><span class="s">"col-form-label"</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="na">placeholder=</span><span class="s">"Email"</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="na">class=</span><span class="s">"col-form-label"</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="na">placeholder=</span><span class="s">"Password"</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="na">class=</span><span class="s">"col-form-label"</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="na">class=</span><span class="s">"col-form-label"</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="na">class=</span><span class="s">"col-form-label"</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="na">class=</span><span class="s">"col-form-label"</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>Choose<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="na">class=</span><span class="s">"col-form-label"</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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="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></div>
|
||
|
||
<h4 id="horizontal-form">Horizontal form</h4>
|
||
|
||
<p>Create horizontal forms with the grid by adding the <code class="highlighter-rouge">.row</code> class to form groups and using the <code class="highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls.</p>
|
||
|
||
<p>Be sure to add <code class="highlighter-rouge">.col-form-label</code> to your <code class="highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls. For <code class="highlighter-rouge"><legend></code> elements, you can use <code class="highlighter-rouge">.col-form-legend</code> to make them appear similar to regular <code class="highlighter-rouge"><label></code> elements.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="container">
|
||
<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" placeholder="Email" />
|
||
</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" placeholder="Password" />
|
||
</div>
|
||
</div>
|
||
<fieldset class="form-group">
|
||
<div class="row">
|
||
<legend class="col-form-legend col-sm-2">Radios</legend>
|
||
<div class="col-sm-10">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="" />
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" />
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div>
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="" />
|
||
Option three is disabled
|
||
</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">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" /> Check me out
|
||
</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>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<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="na">placeholder=</span><span class="s">"Email"</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="na">placeholder=</span><span class="s">"Password"</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-legend col-sm-2"</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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option one is this and that<span class="ni">&mdash;</span>be sure to include why it's great
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option two can be something else and selecting it will deselect option one
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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>
|
||
Option three is disabled
|
||
<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"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="nt">></span> Check me out
|
||
<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>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h4 id="column-sizing">Column sizing</h4>
|
||
|
||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="highlighter-rouge">.col</code>s within a <code class="highlighter-rouge">.row</code> or <code class="highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="highlighter-rouge">.col-7</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<h4 id="auto-sizing">Auto-sizing</h4>
|
||
|
||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="highlighter-rouge">.col</code> to <code class="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>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe" />
|
||
</div>
|
||
<div class="col-auto">
|
||
<label class="sr-only" for="inlineFormInputGroup">Username</label>
|
||
<div class="input-group mb-2 mb-sm-0">
|
||
<div class="input-group-addon">@</div>
|
||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username" />
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-check mb-2 mb-sm-0">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" /> Remember me
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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 mb-sm-0"</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 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></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 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="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"</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></div>
|
||
|
||
<p>You can then remix that once again with size-specific column classes.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-row align-items-center">
|
||
<div class="col-sm-3">
|
||
<label class="sr-only" for="inlineFormInputName">Name</label>
|
||
<input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInputName" placeholder="Jane Doe" />
|
||
</div>
|
||
<div class="col-sm-3">
|
||
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
||
<div class="input-group mb-2 mb-sm-0">
|
||
<div class="input-group-addon">@</div>
|
||
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username" />
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-check mb-2 mb-sm-0">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" /> Remember me
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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"</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 mb-2 mb-sm-0"</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"</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 mb-2 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></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"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check mb-2 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="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"</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></div>
|
||
|
||
<p>And of course <a href="#custom-forms">custom form controls</a> are supported.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="form-row align-items-center">
|
||
<div class="col-auto">
|
||
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
|
||
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" 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">
|
||
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Remember my preference</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-auto">
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div 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">"mr-sm-2"</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 mb-2 mr-sm-2 mb-sm-0"</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"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Remember my preference<span class="nt"></span></span>
|
||
<span class="nt"></label></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"</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></div>
|
||
|
||
<h3 id="inline-forms">Inline forms</h3>
|
||
|
||
<p>Use the <code class="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>
|
||
|
||
<ul>
|
||
<li>Controls are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">spacing</a> and <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">flexbox</a> utilities.</li>
|
||
<li>Controls and input groups receive <code class="highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
|
||
<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>
|
||
|
||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="highlighter-rouge">.sr-only</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form class="form-inline">
|
||
<label class="sr-only" for="inlineFormInputName2">Name</label>
|
||
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe" />
|
||
|
||
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
|
||
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
|
||
<div class="input-group-addon">@</div>
|
||
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username" />
|
||
</div>
|
||
|
||
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" /> Remember me
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</div>
|
||
<div 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 mb-sm-0"</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 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></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 mb-sm-0"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</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="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"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<p>Custom form controls and selects are also supported.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form class="form-inline">
|
||
<label class="mr-sm-2" for="inlineFormCustomSelectPref">Preference</label>
|
||
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelectPref">
|
||
<option selected="">Choose...</option>
|
||
<option value="1">One</option>
|
||
<option value="2">Two</option>
|
||
<option value="3">Three</option>
|
||
</select>
|
||
|
||
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Remember my preference</span>
|
||
</label>
|
||
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</div>
|
||
<div 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">"mr-sm-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 mb-2 mr-sm-2 mb-sm-0"</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"><label</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Remember my preference<span class="nt"></span></span>
|
||
<span class="nt"></label></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></div>
|
||
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h4 id="alternatives-to-hidden-labels">Alternatives to hidden labels</h4>
|
||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="highlighter-rouge">aria-label</code>, <code class="highlighter-rouge">aria-labelledby</code> or <code class="highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||
</div>
|
||
|
||
<h2 id="help-text">Help text</h2>
|
||
|
||
<p>Block-level help text in forms can be created using <code class="highlighter-rouge">.form-text</code> (previously known as <code class="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="highlighter-rouge">.text-muted</code>.</p>
|
||
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h5 id="associating-help-text-with-form-controls">Associating help text with form controls</h5>
|
||
|
||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="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>
|
||
</div>
|
||
|
||
<p>Help text below inputs can be styled with <code class="highlighter-rouge">.form-text</code>. This class includes <code class="highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<p>Inline text can use any typical inline HTML element (be it a <code class="highlighter-rouge"><small></code>, <code class="highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<h2 id="disabled-forms">Disabled forms</h2>
|
||
|
||
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||
|
||
<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>
|
||
|
||
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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="checkbox">
|
||
<label>
|
||
<input type="checkbox" /> Can't check this
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
<div 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">"checkbox"</span><span class="nt">></span>
|
||
<span class="nt"><label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Can't check this
|
||
<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"></fieldset></span>
|
||
<span class="nt"></form></span></code></pre></div>
|
||
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h4 id="caveat-with-anchors">Caveat with anchors</h4>
|
||
|
||
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and <code class="highlighter-rouge"><button></code> elements) inside a <code class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn btn-*"></code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/bootstrap-material-design/docs/4.0/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’t fully supported in Opera 18 and below, or in Internet Explorer 11, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||
</div>
|
||
|
||
<div class="bd-callout bd-callout-danger">
|
||
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
|
||
|
||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||
</div>
|
||
|
||
<h2 id="validation">Validation</h2>
|
||
|
||
<p>Provide valuable, actionable feedback to your users with HTML5 form validation–<a href="http://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">
|
||
<p>We <strong>highly recommend</strong> custom validation styles as native browser defaults are not announced to screen readers.</p>
|
||
</div>
|
||
|
||
<h3 id="how-it-works">How it works</h3>
|
||
|
||
<p>Here’s how form validation works with Bootstrap:</p>
|
||
|
||
<ul>
|
||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>. It applies to <code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code>, and <code class="highlighter-rouge"><textarea></code> elements.</li>
|
||
<li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles to parent <code class="highlighter-rouge">.was-validated</code> class, usually applied to the <code class="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>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code class="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="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="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/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-default">browser defaults</a> (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li>
|
||
<li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||
</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>
|
||
|
||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="highlighter-rouge">novalidate</code> boolean attribute to your <code class="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.</p>
|
||
|
||
<p>When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form class="container" id="needs-validation" novalidate="">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationCustom01">First name</label>
|
||
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required="" />
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationCustom02">Last name</label>
|
||
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required="" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationCustom03">City</label>
|
||
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid city.
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="validationCustom04">State</label>
|
||
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide 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" placeholder="Zip" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid zip.
|
||
</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() {
|
||
var form = document.getElementById("needs-validation");
|
||
form.addEventListener("submit", function(event) {
|
||
if (form.checkValidity() == false) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}
|
||
form.classList.add("was-validated");
|
||
}, false);
|
||
}, false);
|
||
}());
|
||
</script>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"container"</span> <span class="na">id=</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">"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">placeholder=</span><span class="s">"First name"</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">"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">placeholder=</span><span class="s">"Last name"</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">"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">placeholder=</span><span class="s">"City"</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"><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">"validationCustom04"</span> <span class="na">placeholder=</span><span class="s">"State"</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 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">placeholder=</span><span class="s">"Zip"</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"><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="s2">"use strict"</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="s2">"load"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="kd">var</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"needs-validation"</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="s2">"submit"</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="s2">"was-validated"</span><span class="p">);</span>
|
||
<span class="p">},</span> <span class="kc">false</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></div>
|
||
|
||
<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’ll see a slightly different style of feedback.</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" data-example-id="">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationDefault01">First name</label>
|
||
<input type="text" class="form-control" id="validationDefault01" placeholder="First name" 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" placeholder="Last name" value="Otto" required="" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationDefault03">City</label>
|
||
<input type="text" class="form-control" id="validationDefault03" placeholder="City" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid city.
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="validationDefault04">State</label>
|
||
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid state.
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="validationDefault05">Zip</label>
|
||
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid zip.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||
</form>
|
||
</div>
|
||
<div 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-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">placeholder=</span><span class="s">"First name"</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">placeholder=</span><span class="s">"Last name"</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">"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">placeholder=</span><span class="s">"City"</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">"validationDefault04"</span><span class="nt">></span>State<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">"validationDefault04"</span> <span class="na">placeholder=</span><span class="s">"State"</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 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">"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">placeholder=</span><span class="s">"Zip"</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"><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></div>
|
||
|
||
<h3 id="server-side">Server side</h3>
|
||
|
||
<p>We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code>. Note that <code class="highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationServer01">First name</label>
|
||
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required="" />
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationServer02">Last name</label>
|
||
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required="" />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="validationServer03">City</label>
|
||
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid city.
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="validationServer04">State</label>
|
||
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid state.
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="validationServer05">Zip</label>
|
||
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required="" />
|
||
<div class="invalid-feedback">
|
||
Please provide a valid zip.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||
</form>
|
||
</div>
|
||
<div 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-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">placeholder=</span><span class="s">"First name"</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">"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">placeholder=</span><span class="s">"Last name"</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">"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>
|
||
<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">placeholder=</span><span class="s">"City"</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">"validationServer04"</span><span class="nt">></span>State<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-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">placeholder=</span><span class="s">"State"</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 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>
|
||
<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">placeholder=</span><span class="s">"Zip"</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"><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></div>
|
||
|
||
<h3 id="supported-elements">Supported elements</h3>
|
||
|
||
<p>Our example forms show native textual <code class="highlighter-rouge"><input></code>s above, but form validation styles are available for our custom form controls, too.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<form class="was-validated">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" required="" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Check this custom checkbox</span>
|
||
</label>
|
||
|
||
<div class="custom-controls-stacked d-block my-3">
|
||
<label class="custom-control custom-radio">
|
||
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required="" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Toggle this custom radio</span>
|
||
</label>
|
||
<label class="custom-control custom-radio">
|
||
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required="" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||
</label>
|
||
</div>
|
||
|
||
<select class="custom-select d-block my-3" required="">
|
||
<option value="">Open this select menu</option>
|
||
<option value="1">One</option>
|
||
<option value="2">Two</option>
|
||
<option value="3">Three</option>
|
||
</select>
|
||
|
||
<label class="custom-file">
|
||
<input type="file" id="file" class="custom-file-input" required="" />
|
||
<span class="custom-file-control"></span>
|
||
</label>
|
||
</form>
|
||
</div>
|
||
<div 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"><label</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">required</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-controls-stacked d-block my-3"</span><span class="nt">></span>
|
||
<span class="nt"><label</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">id=</span><span class="s">"radioStacked1"</span> <span class="na">name=</span><span class="s">"radio-stacked"</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">required</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"><label</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">id=</span><span class="s">"radioStacked2"</span> <span class="na">name=</span><span class="s">"radio-stacked"</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">required</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></span></span>
|
||
<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 d-block my-3"</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>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"><label</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">id=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">required</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></form></span></code></pre></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’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.</p>
|
||
|
||
<h3 id="checkboxes-and-radios-1">Checkboxes and radios</h3>
|
||
|
||
<p>Each checkbox and radio is wrapped in a <code class="highlighter-rouge"><label></code> for three reasons:</p>
|
||
|
||
<ul>
|
||
<li>It provides a larger hit areas for checking the control.</li>
|
||
<li>It provides a helpful and semantic wrapper to help us replace the default <code class="highlighter-rouge"><input></code>s.</li>
|
||
<li>It triggers the state of the <code class="highlighter-rouge"><input></code> automatically, meaning no JavaScript is required.</li>
|
||
</ul>
|
||
|
||
<p>We hide the default <code class="highlighter-rouge"><input></code> with <code class="highlighter-rouge">opacity</code> and use the <code class="highlighter-rouge">.custom-control-indicator</code> to build a new custom form indicator in its place. Unfortunately we can’t build a custom one from just the <code class="highlighter-rouge"><input></code> because CSS’s <code class="highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||
|
||
<p>We use the sibling selector (<code class="highlighter-rouge">~</code>) for all our <code class="highlighter-rouge"><input></code> states—like <code class="highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="highlighter-rouge">.custom-control-description</code> class, we can also style the text for each item based on the <code class="highlighter-rouge"><input></code>’s state.</p>
|
||
|
||
<p>In the checked states, we use <strong>base64 embedded SVG icons</strong> from <a href="https://useiconic.com/open">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" data-example-id="">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Check this custom checkbox</span>
|
||
</label>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></span></span>
|
||
<span class="nt"></label></span></code></pre></div>
|
||
|
||
<p>Custom checkboxes can also utilize the <code class="highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||
|
||
<div class="bd-example bd-example-indeterminate">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Check this custom checkbox</span>
|
||
</label>
|
||
</div>
|
||
|
||
<p>If you’re using jQuery, something like this should suffice:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.your-checkbox'</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">'indeterminate'</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" data-example-id="">
|
||
<label class="custom-control custom-radio">
|
||
<input id="radio1" name="radio" type="radio" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Toggle this custom radio</span>
|
||
</label>
|
||
<label class="custom-control custom-radio">
|
||
<input id="radio2" name="radio" type="radio" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||
</label>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</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">id=</span><span class="s">"radio1"</span> <span class="na">name=</span><span class="s">"radio"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"><label</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">id=</span><span class="s">"radio2"</span> <span class="na">name=</span><span class="s">"radio"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span></code></pre></div>
|
||
|
||
<h4 id="disabled">Disabled</h4>
|
||
|
||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="highlighter-rouge">disabled</code> boolean attribute to the <code class="highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" disabled="" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Check this custom checkbox</span>
|
||
</label>
|
||
|
||
<label class="custom-control custom-radio">
|
||
<input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled="" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Toggle this custom radio</span>
|
||
</label>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</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">disabled</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
|
||
<span class="nt"><label</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">id=</span><span class="s">"radio3"</span> <span class="na">name=</span><span class="s">"radioDisabled"</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">disabled</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span></code></pre></div>
|
||
|
||
<h4 id="stacked">Stacked</h4>
|
||
|
||
<p>Custom checkboxes and radios are inline to start. Add a parent with class <code class="highlighter-rouge">.custom-controls-stacked</code> to ensure each form control is on separate lines.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="custom-controls-stacked">
|
||
<label class="custom-control custom-radio">
|
||
<input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Toggle this custom radio</span>
|
||
</label>
|
||
<label class="custom-control custom-radio">
|
||
<input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input" />
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-controls-stacked"</span><span class="nt">></span>
|
||
<span class="nt"><label</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">id=</span><span class="s">"radioStacked3"</span> <span class="na">name=</span><span class="s">"radio-stacked"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"><label</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">id=</span><span class="s">"radioStacked4"</span> <span class="na">name=</span><span class="s">"radio-stacked"</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="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-indicator"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-control-description"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h3 id="select-menu">Select menu</h3>
|
||
|
||
<p>Custom <code class="highlighter-rouge"><select></code> menus need only a custom class, <code class="highlighter-rouge">.custom-select</code> to trigger the custom styles.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<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>
|
||
<div 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></div>
|
||
|
||
<h3 id="file-browser">File browser</h3>
|
||
|
||
<p>The file input is the most gnarly of the bunch and require additional JavaScript if you’d like to hook them up with functional <em>Choose file…</em> and selected file name text.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<label class="custom-file">
|
||
<input type="file" id="file2" class="custom-file-input" />
|
||
<span class="custom-file-control"></span>
|
||
</label>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</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">id=</span><span class="s">"file2"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span></code></pre></div>
|
||
|
||
<p>Here’s how it works:</p>
|
||
|
||
<ul>
|
||
<li>We wrap the <code class="highlighter-rouge"><input></code> in a <code class="highlighter-rouge"><label></code> so the custom control properly triggers the file browser.</li>
|
||
<li>We hide the default file <code class="highlighter-rouge"><input></code> via <code class="highlighter-rouge">opacity</code>.</li>
|
||
<li>We use <code class="highlighter-rouge">:after</code> to generate a custom background and directive (<em>Choose file…</em>).</li>
|
||
<li>We use <code class="highlighter-rouge">:before</code> to generate and position the <em>Browse</em> button.</li>
|
||
<li>We declare a <code class="highlighter-rouge">height</code> on the <code class="highlighter-rouge"><input></code> for proper spacing for surrounding content.</li>
|
||
</ul>
|
||
|
||
<p>In other words, it’s an entirely custom element, all generated via CSS.</p>
|
||
|
||
<h4 id="translating-or-customizing-the-strings">Translating or customizing the strings</h4>
|
||
|
||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for easy translation of the “Browse” and “Choose file…” text into other languages. Simply override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> SCSS 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’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||
|
||
<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">placeholder</span><span class="o">:</span> <span class="p">(</span>
|
||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Choose file..."</span><span class="o">,</span>
|
||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Seleccionar archivo..."</span>
|
||
<span class="p">)</span><span class="o">,</span>
|
||
<span class="n">button-label</span><span class="o">:</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">"Navegar"</span>
|
||
<span class="p">)</span>
|
||
<span class="p">);</span></code></pre></figure>
|
||
|
||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
|
||
|
||
|
||
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
|
||
|
||
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
|
||
|
||
|
||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
|
||
|
||
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||
<script type="text/javascript">
|
||
var docsearch = docsearch({
|
||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||
indexName: 'bootstrap-v4',
|
||
inputSelector: '#search-input',
|
||
handleSelected: function (input, event, suggestion) {
|
||
var url = suggestion.url;
|
||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||
// If it's a title we remove the anchor so it does not jump.
|
||
window.location.href = url;
|
||
},
|
||
transformData: function (hits) {
|
||
return hits.map(function (hit) {
|
||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||
return hit;
|
||
});
|
||
},
|
||
debug: false // Set debug to true if you want to inspect the dropdown
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|