<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/bootstrap.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
	<!-- InstanceBeginEditable name="doctitle" -->
    <title>How to Create Form Layouts with Bootstrap 5 - Tutorial Republic</title>
    <meta name="description" content="Learn how to create different types of form layouts such as vertical form, horizontal form and inline from quickly and easily with the Bootstrap framework." />
    <!-- InstanceEndEditable -->
    	<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="fb:admins" content="100001054961582" />
<meta property="fb:app_id" content="1404574483159557" />
<meta property="og:image" content="/lib/images/signature.png" />
<link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
<style>
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html,body{min-height:100%}
p{margin:0 0 12px}
ol,ul{margin:0 0 12px}
a,a:active,a:visited{outline:none;color:#1db79f;text-decoration:none}
a img{border:none;outline:none}
p code,table td:last-child code,.content ul li code,code.mark{padding:2px 4px;color:#333;background-color:#f1f1f1;border-radius:4px}
a code{color:inherit;background:none;padding:0}
table{border-collapse:collapse;border-spacing:0}
table td{vertical-align:top}
body{min-width:1300px;color:#414141;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;font-size:17px;line-height:1.7}
input,select,textarea,button,div,span,a{box-sizing:border-box}
h1,h2,h3,h4{color:#262626;margin:20px 0 10px;line-height:1.5;font-weight:600}
h1{font-size:34px;margin-top:17px}
h2{font-size:28px}
h3{font-size:22px}
.space{margin-bottom:25px!important}
.break{margin-bottom:15px!important}
.text-center{text-align:center!important}
.scroll{height:195px;overflow-y:scroll}
.scroll.large{height:245px}
.scroll.xlarge{height:290px}
.scroll.xxlarge{height:340px}
sup{font-size:13px}
h1 sup{background:#ec0000;border-radius:3px;padding:5px 10px;font-size:15px;color:#fff;position:relative;top:5px}
.leaderboard{padding-top:14px;position:relative;height:105px;overflow:hidden}
.intro-image img{display:block;padding:10px 0 25px;max-width:100%}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
code,.code,.syntax,.green-box,.sky-box,.gray-box,.pink-box,.red-box,.at-rule,.codebox pre,.console-output,.command{font-size:16px;font-family:Consolas,Monaco,Courier,monospace}
.console-output{margin:15px 0}
.command{background:#f2f2f2;padding:16px 18px;margin:15px 0 25px;border-radius:3px}
hr{border:none;border-bottom:1px solid #e7e9ed;height:1px;margin:30px 0}
.summary,.topic{border:1px solid #eaeaea;border-width:1px 0;margin:20px 0;padding:10px 0;color:#8e9aa6;line-height:1.5}
h2.section-title span{display:inline-block;border-bottom:4px solid #c9d7e0;padding:0 50px 12px 0}
.wrapper{width:1300px;padding:0 15px;margin:0 auto}
.header{background:#23384e;padding:16px 0}
input.search{background:#fff;border:0 none;color:#807E7E;float:left;height:38px;line-height:26px;font-size:14px;margin:0 0 0 12px;outline:medium none;padding:6px 14px;width:500px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,0.6);font-family:inherit}
.search-btn{color:rgba(0,0,0,.6);background:#ebebeb;border:none;outline:none;cursor:pointer;float:left;height:38px;line-height:46px;width:44px;display:block;margin-left:-2px;border-radius:0 2px 2px 0;box-shadow:0 0 1px rgba(0,0,0,0.7)}
.logo{width:304px}
.logo img{height:44px;margin:-3px 0;display:block}
.site-search{float:left;margin-left:100px}
.menu{background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.15);position:relative;z-index:9}
.menu a{color:#666;display:inline-block;padding:0 10px;text-decoration:none;font-size:14px;font-weight:600;height:48px;line-height:48px}
.menu a:first-child{margin-left:-10px}
.menu a.tool-link{float:right;display:block;border-radius:30px;line-height:28px;position:relative;height:auto;top:9px;padding:0 12px;color:#1ebba3;border:1px double #1ebba3}
.fl,.logo{float:left}
.leftcolumn{width:240px;float:left;font-size:16px;color:#4f4f4f}
.centercolumn{width:850px;float:left}
.rightcolumn{width:180px;float:left}
.content{background:#fff;padding:15px 40px 20px;border:1px solid #dedede;border-top:none;border-radius:1px}
.sidebar{width:160px;float:left;padding-top:28px;margin-left:20px;position:relative}
.leftcolumn .segment{margin:16px 0 12px;position:relative;font-size:18px;font-weight:600;line-height:normal}
.leftcolumn a{color:#4f4f4f;font-size:16px;line-height:26px;display:block;border-bottom:1px solid transparent}
.leftcolumn ul{list-style:none;padding:0;margin:0}
.segment,.chapters,.chapters a{float:left;clear:both}
h1 code,h2 code,h3 code{font:inherit}
.color-box{margin:15px 0;padding-left:20px}
.note-box,.warning-box,.tip-box{padding:8px 8px 3px 26px}
.info-tab{float:left;margin-left:-23px}
.content ul li{margin-top:7px}
.extra{padding-top:5px}
.green-box,.sky-box,.gray-box,.red-box,.pink-box{color:#000;margin-top:15px;padding:10px;background-color:#f6f8fa;border:1px solid #d7e2ec}
.example{background:#f4f5f6;padding:3px;margin:15px 0}
.codebox{background:#fff;border:1px solid #ddd}
.codebox-title{height:41px;padding-left:12px;border-bottom:1px solid #ddd;background:#f5f5f5}
.codebox-title h4{margin:0;font-size:18px;line-height:40px;float:left;font-weight:600}
a.try-btn,a.download-btn{width:140px;height:40px;color:#333;font-size:15px;line-height:41px;font-weight:600;text-align:center;text-decoration:none;float:right;display:block;border-left:1px solid #ddd;background:rgba(27,31,35,0.08);box-sizing:border-box;font-family:Arial,sans-serif}
a.try-btn span{font-size:18px;line-height:normal}
.hide,.code-style,.box-size,.bottom-link,.footer,.code-style,.snippets,.report-error,.badge,.social,.ad-label,.mobile-only,ul.tree-menu li ul{display:none}
.skyscraper{width:160px;height:600px;overflow:hidden;margin-bottom:20px;background:#ebecf0}
.bottom-ad{margin-top:46px;padding:24px;position:relative;background:url(../lib/images/smooth-line.png) no-repeat center #f9f9f9}
.rectangle-left,.rectangle-right{min-width:336px;min-height:280px;overflow:hidden}
.fr,a.previous-page,a.next-page,.rectangle-right,.topic-nav{float:right}
a.previous-page,a.next-page{width:32px;height:32px;line-height:30px}
.shadow{background:#F7F8F9;padding:3px;margin:10px 0}
.syntax{color:#2f4959;padding:13px 18px;background:#F9F9FA;border:1px solid #ddd;font-size:15px}
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}
pre[class*="language-"]{position:relative;margin:.5em 0;overflow:visible;padding:0}
pre[class*="language-"]>code{position:relative;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}
code[class*="language"]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);display:inline;white-space:normal}
pre[class*="language-"].line-numbers{padding-left:0}
pre[class*="language-"].line-numbers code{padding-left:3.8em}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0}
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}
pre[data-line] code{position:relative;padding-left:4em}
pre .line-highlight{margin-top:0}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;white-space:pre-wrap!important}
pre.line-numbers > code{position:relative;white-space:inherit}
.line-numbers-rows,.codebox pre.inactive{display:none}
.codebox pre.syntax-highlighter{margin:0;padding:0;overflow:auto}
pre.line-numbers .line-numbers-rows{border-right:3px solid #6CE26C}
.codebox pre.syntax-highlighter > code{box-shadow:none!important;padding-left:3.8em;background-image:linear-gradient(transparent 50%,#F8F8F8 50%);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;font-size:16px;line-height:1.5;overflow-wrap:break-word}
.codebox pre.syntax-highlighter,.codebox pre.syntax-highlighter code{border:none;width:100%;box-sizing:border-box}
pre.line-numbers code,pre.line-numbers .line-numbers-rows{padding-top:2px;padding-bottom:2px}
.preview-box{padding:15px;text-align:center;cursor:pointer;overflow:hidden;background:#FFF;border:1px solid #e6e6e6}
.preview-box a,.preview-box img{display:block;margin:0 auto}
.download-box{text-align:center;padding:20px 0;margin:20px 0 10px}
.output-box{border-color:#d4d4d4;border-style:solid;border-width:1px 0;padding:5px 15px;overflow:hidden;background:#fff;margin:10px 0}
.demo-box{margin-top:15px}
.subhead{border-bottom:3px solid #DCE3EB;margin-bottom:15px;padding-bottom:10px}
table.data,table.description{width:100%;font-size:92%}
table.data th{color:#000;padding:8px 7px;text-align:left;font-size:15px;background:#F8F8F8}
table.data td{color:#484848;padding:5px 7px;background:#fff}
table.data th,table.data td{vertical-align:top;border:1px solid #DCE3EB}
table.data tr.section th,table.data td.section{font-size:15px;background:#f0f4f7}
table.description th{width:150px}
table.no-wrap tr td:first-child{white-space:nowrap}
.topic-nav{padding-right:5px;color:#d0d0d0}
.topic-nav a{padding:0 15px;margin:0 0 0 5px;position:relative;display:inline-block}
.topic-nav a::after{font-size:24px;position:absolute;line-height:22px}
.topic-nav a:first-child{margin:0 5px 0 0}
.topic-nav a:first-child::after{content:'\00AB';left:-5px}
.topic-nav a:last-child::after{content:'\00BB';right:-5px}
@media screen and (max-width: 1280px) {
body{min-width:1260px}
.wrapper{width:1260px}
.leftcolumn{width:230px}
.centercolumn{width:820px}
.preview-box img{max-width:100%;height:auto}
}
@media screen and (max-width: 800px) {
body{min-width:100%;max-width:100%;padding-top:46px}
.wrapper{width:100%;padding:0}
.header{height:46px;padding:5px 0;position:fixed;top:0;left:0;right:0;width:100%;z-index:99}
.logo{width:auto;display:block;padding:6px 0 0 60px;position:absolute;left:0;z-index:100}
.logo img{height:30px}
.menu{width:100%;padding-left:12px;padding-right:12px;overflow-x:auto;white-space:nowrap}
.centercolumn{width:100%;float:none}
.content{padding:10px;border-width:0 0 1px 0}
.content img{max-width:100%;height:auto}
.skyscraper{display:inline-block}
.shadow,.example,.console-output,.content pre{max-width:100%;overflow-x:auto}
.codebox-title{position:relative}
.codebox.multi-style-mode pre{padding-top:7px;margin-top:36px;border-top:1px solid #ddd}
.bottom-ad{height:auto;background:none;padding:30px 0 0;margin:40px 0 0;text-align:center;position:relative}
.rectangle-left,.rectangle-right{float:none;display:inline-block;margin:10px auto;background:#EDEEF2}
.leftcolumn,.footer,.social,.site-search,.code-style,.menu a.tool-link,.backdrop{display:none}
.summary,.topic{padding:5px 0;margin:10px 0}
.leftcolumn,.centercolumn,.rightcolumn,.sidebar{float:none}
.header,.menu,.centercolumn,.footer,.appeal-text{width:100%}
a.try-btn,a.download-btn{width:130px}
.native-unit{margin-bottom:30px}
.rightcolumn,.sidebar{margin: 25px auto 0}
.overview{padding-right:0}
.scroll-pane{overflow-x:auto}
table.data{min-width:480px}
table.data pre{display:inline;white-space:normal}
table tr th,table tr td{width:auto!important}
.preview-box{padding:6px}
.leaderboard{margin:20px 0}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
.codebox pre.syntax-highlighter{overflow-x:auto}
.codebox pre.syntax-highlighter > code{min-width:614px;height:auto;overflow-x:hidden}
}
@media screen and (min-width: 801px) {
.site-search,.leftcolumn,.social{display:block!important}
.backdrop{display:none!important}
.hide-scroll{overflow-x:hidden!important}
}
.menu a.old-version{height:21px;font-size:13px;line-height:17px;border:1px double;border-radius:40px;margin-right:10px}</style>
<script>
    (function(){
        var bsa_optimize=document.createElement('script');
        bsa_optimize.type='text/javascript';
        bsa_optimize.async=true;
        bsa_optimize.src='https://cdn4.buysellads.net/pub/tutorialrepublic.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
    })();
</script>
    
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40117907-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-40117907-1');
</script></head>
<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
    <!--Header-->
    
<div class="header">
    <div class="wrapper clearfix">
        <button type="button" class="open-menu mobile-only"><i class="icon-menu"></i></button>
        <div class="logo">
            <a href="../index.html"><img src="../lib/images/logo.svg" alt="TutorialRepublic" /></a>
        </div>
        <div class="site-search">
            <form inert action="https://www.google.com/search" method="get" target="_blank" class="clearfix">
                <input type="hidden" value="www.tutorialrepublic.com" name="sitesearch"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <input type="text" name="q" placeholder="disabled" id="searchInput" class="search"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <button type="submit" class="search-btn"><span class="icon-search"></span></button>
            </form>
        </div>
        <div class="social">                
            <a href="https://www.facebook.com/tutorialrepublic" target="_blank" title="Join us on Facebook"><i class="icon-facebook"></i></a>
            <a href="https://twitter.com/tutrepublic" target="_blank" title="Follow us on Twitter"><i class="icon-twitter"></i></a>
            <a href="../contact-us.php.html" target="_blank" title="Send us an Email"><i class="icon-mail"></i></a>
        </div>
        <button type="button" class="open-search mobile-only">
            <i class="icon-search"></i>
        </button>
    </div>    
</div>
<div class="menu">
    <div class="wrapper">
        <a href="../index.html" title="Home Page">HOME</a>
        <a href="../html-tutorial/html-introduction.php.html" title="HTML Tutorial">HTML5</a>            
        <a href="../css-tutorial/index.html" title="CSS Tutorial">CSS3</a>
        <a href="../javascript-tutorial/index.html" title="JavaScript Tutorial">JAVASCRIPT</a>
        <a href="../jquery-tutorial/index.html" title="jQuery Tutorial">JQUERY</a>
        <a href="index.html" title="Bootstrap 5 Tutorial">BOOTSTRAP5</a>
		<a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/" class="old-version" title="Bootstrap 4.6 Tutorial">v4.6</a>
        <a href="../php-tutorial/index.html" title="PHP Tutorial">PHP7</a> 
        <a href="../sql-tutorial/index.html" title="SQL Tutorial">SQL</a>
        <a href="../references.php.html" title="Web References">REFERENCES</a>
        <a href="../practice-examples.php.html" title="Practice Examples and Demos">EXAMPLES</a>
        <a href="../faq.php.html" title="Frequently Asked Questions and Answers">FAQ</a>
        <a href="../snippets/gallery.php.html" title="Bootstrap Code Snippets" target="_blank">SNIPPETS</a>
        <a href="../codelab.php.html" class="tool-link" target="_blank">Online HTML Editor</a>
    </div>        
</div>    <!--End:Header-->
    <div class="wrapper clearfix">
        <div class="leftcolumn" id="myNav">
		
        <div class="segment"><span>BOOTSTRAP</span> BASIC</div>
<div class="chapters">
    <a href="index.html">Bootstrap Introduction</a>
    <a href="bootstrap-get-started.php.html">Bootstrap Getting Started</a>
	<a href="bootstrap-containers.php.html">Bootstrap Containers</a>
    <a href="bootstrap-grid-system.php.html">Bootstrap Grid System</a>
    <a href="bootstrap-fixed-layout.php.html">Bootstrap Fixed Layout</a>
    <a href="bootstrap-fluid-layout.php.html">Bootstrap Fluid Layout</a>
    <a href="bootstrap-responsive-layout.php.html">Bootstrap Responsive Layout</a>
    <a href="bootstrap-typography.php.html">Bootstrap Typography</a>
    <a href="bootstrap-tables.php.html">Bootstrap Tables</a>
    <a href="bootstrap-lists.php.html">Bootstrap Lists</a>
	<a href="bootstrap-list-groups.php.html">Bootstrap List Groups</a>
    <a href="bootstrap-forms.php.html">Bootstrap Forms</a>
	<a href="bootstrap-custom-forms.php.html">Bootstrap Custom Forms</a>
	<a href="bootstrap-input-groups.php.html">Bootstrap Input Groups</a>
	<a href="bootstrap-buttons.php.html">Bootstrap Buttons</a>
	<a href="bootstrap-button-groups.php.html">Bootstrap Button Groups</a>
    <a href="bootstrap-images.php.html">Bootstrap Images</a>
	<a href="bootstrap-cards.php.html">Bootstrap Cards</a>
	<a href="bootstrap-media-objects.php.html">Bootstrap Media Objects</a>
    <a href="bootstrap-icons.php.html">Bootstrap Icons</a>
    <a href="bootstrap-navs.php.html">Bootstrap Navs</a>
    <a href="bootstrap-navbar.php.html">Bootstrap Navbar</a>
    <a href="bootstrap-accordion.php.html">Bootstrap Accordion</a>
    <a href="bootstrap-breadcrumbs.php.html">Bootstrap Breadcrumbs</a>
    <a href="bootstrap-pagination.php.html">Bootstrap Pagination</a>
    <a href="bootstrap-labels-and-badges.php.html">Bootstrap Badges</a>
    <a href="bootstrap-progress-bars.php.html">Bootstrap Progress Bars</a>
	<a href="bootstrap-spinners.php.html">Bootstrap Spinners</a>
	<a href="bootstrap-jumbotron.php.html">Bootstrap Jumbotron</a>
	<a href="bootstrap-helper-classes.php.html">Bootstrap Helper Classes</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ADVANCED</div>
<div class="chapters">
	<a href="bootstrap-modals.php.html">Bootstrap Modals</a>
    <a href="bootstrap-dropdowns.php.html">Bootstrap Dropdowns</a>
	<a href="bootstrap-tabs.php.html">Bootstrap Tabs</a>
    <a href="bootstrap-collapse.php.html">Bootstrap Collapse</a>
    <a href="bootstrap-tooltips.php.html">Bootstrap Tooltips</a>
    <a href="bootstrap-popovers.php.html">Bootstrap Popovers</a>
    <a href="bootstrap-alerts.php.html">Bootstrap Alerts</a>
	<a href="bootstrap-stateful-buttons.php.html">Bootstrap Stateful Buttons</a>    
    <a href="bootstrap-carousel.php.html">Bootstrap Carousel</a>
    <a href="bootstrap-typeahead.php.html">Bootstrap Typeahead</a>
    <a href="bootstrap-scrollspy.php.html">Bootstrap ScrollSpy</a>
	<a href="bootstrap-toasts.php.html">Bootstrap Toasts</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> EXAMPLES</div>
<div class="chapters">
    <a href="../twitter-bootstrap-examples.php.html">Bootstrap Practice Examples</a>
	<a href="../faq.php.html#bootstrap-sass">Bootstrap FAQ's Answers</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ARCHIVE</div>
<div class="chapters">
    <a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/">Bootstrap 4 Tutorial</a>
	<a href="../twitter-bootstrap-4-examples.php.html">Bootstrap 4 Practice Examples</a>
</div>        
                </div>
        <div class="centercolumn">
            <!--Text Content-->
            <div class="content">
                <div class="leaderboard">

    <div class="ad-label">Advertisements</div>

    <div class="ad-container">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Responsive Leaderboard -->
        <ins class="adsbygoogle"
                style="display:block;max-width:728px;width:100%;height:90px"
                data-ad-client="ca-pub-9107540490929984"
                data-ad-slot="4302666817"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <!-- ABR Leaderboard -->
    <div id="bsa-zone_1579648332258-0_123456"></div>

</div>                <!-- InstanceBeginEditable name="main_content" -->
                <a href="bootstrap-list-groups.php.html" class="previous-page" title="Go to Previous Page"></a>
                <a href="bootstrap-custom-forms.php.html" class="next-page" title="Go to Next Page"></a>
                <h1>Bootstrap <span>Forms</span></h1>
                <p class="summary">In this tutorial you will learn how to create elegant form layouts with Bootstrap.</p>
                <h2>Creating Forms with Bootstrap</h2>
                <p>HTML forms are an integral part of the web pages and applications, but creating the form layouts or styling the form controls manually one by one using CSS are often boring and tedious. Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.</p>
                <p>Bootstrap provides three different types of form layouts:</p>
                <ul>
                    <li>Vertical Form (default form layout)</li>
                    <li>Horizontal Form</li>
                    <li>Inline Form</li>
                </ul>
				<p class="space">The following section will give you the detailed overview of all these form layouts as well as the various form related Bootstrap components one by one. Well let's get started.</p>
                <h2>Creating Vertical Form Layout</h2>
                <p>To create vertical form layouts simply use the predefined <a href="bootstrap-helper-classes.php.html#spacing-classes">margin utility classes</a> for grouping the labels, form controls, optional form text, and form validation messages.</p>
                <p>Here's an example in which form controls are vertically stacked with labels on the top.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=vertical-form-layout.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputEmail"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled"&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputPassword"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
            &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=vertical-form-layout.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-vertical-from-layout.png" width="760" height="270" alt="Bootstrap Vertical Form Layout" />
                        </a>
                    </div>
                </div>
                <!--Note box-->
                <p>You will learn about custom checkboxes and other <a href="bootstrap-custom-forms.php.html">custom form controls</a> in the next chapter.</p>
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab note-icon" title="Important Notes"><i></i></div>
                        <div class="note-box">
                            <p><strong>Note:</strong> All textual form controls, such as <code><a href="../html-reference/html-input-tag.php.html">&lt;input&gt;</a></code> and <code><a href="../html-reference/html-textarea-tag.php.html">&lt;textarea&gt;</a></code> requires the class <br /><code>.form-control</code>, while <code><a href="../html-reference/html-select-tag.php.html">&lt;select&gt;</a></code> requires the class <code>.form-select</code> for general styling. These classes also makes the forms controls 100% wide. To change their width or use them inline, you can utilize the <a href="bootstrap-grid-system.php.html">Bootstrap's predefined grid classes</a>.</p>
                        </div>
                    </div>
                </div>
                <!--End:Note box-->
                <!--Tip Box-->
                <div class="color-box break">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> It is recommend to use margin-bottom utility classes (e.g., <code>mb-2</code>, <code>mb-3</code>, etc.) to add vertical spacing between the form groups. As, using single direction margin throughout in the form prevent margin collapsing and create more consist form.</p>
                        </div>
                    </div>
                </div>
                <!--End:Tip Box-->
                <hr />
                <h2>Creating Horizontal Form Layout</h2>
                <p>You can also create horizontal form layouts where labels and form controls are aligned side-by-side using the Bootstrap grid classes. To create a horizontal form layout add the class <code>.row</code> on form groups and use the <code>.col-*-*</code> grid classes to specify the width of your labels and controls.</p>
                <p>Also, be sure to apply the class <code>.col-form-label</code> on the <a href="../html-reference/html-label-tag.php.html"><code>&lt;label&gt;</code></a> elements, so that they're vertically centered with their associated form controls. Let's check out an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=horizontal-form-layout.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label for="inputEmail" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label for="inputPassword" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;div class="col-sm-10 offset-sm-2"&gt;
            &lt;div class="form-check"&gt;
                    &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
                    &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-10 offset-sm-2"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=horizontal-form-layout.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-horizontal-form-layout.png" width="760" height="208" alt="Bootstrap Horizontal Form Layout" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Creating Inline Form Layout</h2>
                <p>Sometimes you may want to display a series of form controls, and buttons in a single horizontal row to compact the layout. You can do this easily by using the <a href="bootstrap-grid-system.php.html">Bootstrap's grid classes</a>.</p>
                <p>Let's take a look at following example and see how it actually works:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=inline-form-layout.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="row align-items-center g-3"&gt;
        &lt;div class="col-auto"&gt;
            &lt;label class="visually-hidden" for="inputEmail"&gt;Email&lt;/label&gt;
            &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled"&gt;
        &lt;/div&gt;
        &lt;div class="col-auto"&gt;
            &lt;label class="visually-hidden" for="inputPassword"&gt;Password&lt;/label&gt;
            &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
        &lt;/div&gt;
        &lt;div class="col-auto"&gt;
            &lt;div class="form-check"&gt;
                &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
                &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-auto"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=inline-form-layout.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-inline-form-layout.png" width="760" height="58" alt="Bootstrap Inline Form Layout" />
                        </a>
                    </div>
                </div>
                <p>Check out the snippets section for examples of some <a href="../snippets/gallery.php%3Ftag=form.html" target="_blank">beautifully designed Bootstrap forms</a>.</p>
                <!--Tip Box-->
                <div class="color-box break">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> It is recommended to include a label for every form inputs otherwise screen readers will have trouble with your forms. However, in case of inline form layouts you can hide the labels using the <code>.visually-hidden</code> class, so that only screen readers can read it.</p>
                        </div>
                    </div>
                </div>
                <!--End:Tip Box-->
                <hr />
                <h2>Creating Responsive Form Layout</h2>
                <p>You can also make your forms responsive through using the grid classes with specific breakpoints.</p>
                <p>The following example will create a form which laid out inline on medium devices and up (i.e., viewport width &ge;768px), but will become vertically stacked on smaller viewports.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=responsive-form-layout.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="row align-items-center g-3"&gt;
        &lt;div class="col-md-auto col-12"&gt;
            &lt;label class="form-label d-md-none" for="inputEmail"&gt;Email&lt;/label&gt;
            &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-auto col-12"&gt;
            &lt;label class="form-label d-md-none" for="inputPassword"&gt;Password&lt;/label&gt;
            &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-auto col-12"&gt;
            &lt;div class="form-check"&gt;
                &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
                &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-auto col-12"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <hr />
				<h2>Creating Static Form Control</h2>
                <p>There might be a situation when you just want to display a plain text value next to a form label instead of a working form control. You can do this easily by replacing the class <code>.form-control</code> with the <code>.form-control-plaintext</code> and applying the attribute <code>readonly</code>.</p>
                <p>The <code>.form-control-plaintext</code> class removes the default styling from the form field, but preserves the correct margin and padding. Let's take a look at an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=static-form-control.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label for="inputEmail" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="email" readonly class="form-control-plaintext" id="inputEmail" value="peterparker@example.com"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label for="inputPassword" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;div class="col-sm-10 offset-sm-2"&gt;
            &lt;div class="form-check"&gt;
                    &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
                    &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-10 offset-sm-2"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=static-form-control.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-static-form-control.png" width="760" height="208" alt="Bootstrap Static Form Control" />
                        </a>
                    </div>
                </div>
                <hr />                          
                <h2>Column Sizing of Form Controls</h2>
                <p>You can also match the size of your inputs, textareas and select boxes to the Bootstrap grid column sizes. Simply, place your form controls (i.e. <a href="../html-reference/html-input-tag.php.html"><code>&lt;input&gt;</code></a>, <a href="../html-reference/html-textarea-tag.php.html"><code>&lt;textarea&gt;</code></a>, and <a href="../html-reference/html-select-tag.php.html"><code>&lt;select&gt;</code></a>) in grid columns.</p>
                <p>Let's try out the following example to understand how it basically works:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=grid-sizing-of-form-controls.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="row g-3"&gt;
    &lt;div class="col-6"&gt;
        &lt;input type="text" class="form-control" placeholder="disabled"&gt;
    &lt;/div&gt;
    &lt;div class="col-4"&gt;
        &lt;select class="form-select"&gt;
            &lt;option&gt;State&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="col-2"&gt;
        &lt;input type="text" class="form-control" placeholder="disabled"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=grid-sizing-of-form-controls.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-grid-sizing-of-form-controls.png" width="760" height="58" alt="Bootstrap Grid Sizing of Form Controls" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Placing Checkboxes and Radio Buttons Inline</h2>
                <p>By default, any number of custom checkboxes and radio buttons that are immediate sibling will be vertically stacked and appropriately spaced with <code>.form-check</code> class.</p>
                <p>But, you can also place these custom checkboxes and radio buttons inline (i.e., in the same line) by simply adding the class <code>.form-check-inline</code> to <code>.form-check</code> element, like this:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=placing-checkboxes-inline.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="row"&gt;
    &lt;div class="col-12"&gt;
        &lt;div class="form-check form-check-inline"&gt;
            &lt;input type="checkbox" class="form-check-input" name="hobbies" id="checkMusic"&gt;
            &lt;label class="form-check-label" for="checkMusic"&gt;Music&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-check form-check-inline ms-3"&gt;
            &lt;input type="checkbox" class="form-check-input" name="hobbies" id="checkTravel" checked&gt;
            &lt;label class="form-check-label" for="checkTravel"&gt;Travel&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-check form-check-inline ms-3"&gt;
            &lt;input type="checkbox" class="form-check-input" name="hobbies" id="checkReading" checked&gt;
            &lt;label class="form-check-label" for="checkReading"&gt;Reading&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow space">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=placing-checkboxes-inline.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-placing-checkboxes-inline.png" width="760" height="46" alt="Bootstrap Placing Checkboxes Inline" />
                        </a>
                    </div>
                </div>  
                <p>Similarly, you can place the radio buttons inline, as shown in the following example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=placing-radio-buttons-inline.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="row"&gt;
    &lt;div class="col-12"&gt;
        &lt;div class="form-check form-check-inline"&gt;
            &lt;input type="radio" class="form-check-input" name="gender" id="radioMale" checked&gt;
            &lt;label class="form-check-label" for="radioMale"&gt;Male&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-check form-check-inline ms-3"&gt;
            &lt;input type="radio" class="form-check-input" name="gender" id="radioFemale"&gt;
            &lt;label class="form-check-label" for="radioFemale"&gt;Female&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow space">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=placing-radio-buttons-inline.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-placing-radio-buttons-inline.png" width="760" height="46" alt="Bootstrap Placing Radio Buttons Inline" />
                        </a>
                    </div>
                </div>
				<hr />
                <h2>Adding Help Text to Form Controls</h2>
                <p>Placing help text for the form controls in an efficient way to guide users to enter the correct data in a form. You can place block level help text for a form control using the class <code>.form-text</code>. The block help text is typically displayed at the bottom of the control. Here's an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=block-help-text.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;label class="form-label" for="inputPassword"&gt;Password&lt;/label&gt;
&lt;input type="password" class="form-control" id="inputPassword"&gt;
&lt;div class="form-text"&gt;
    Must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=block-help-text.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-block-help-text.png" width="760" height="115" alt="Bootstrap Block Help Text" />
                        </a>
                    </div>
                </div>
                <p>Similarly, you can also place inline help text using the <code>&lt;small&gt;</code> element. No need to use <code>.form-text</code> in this case. The following example shows how to implement this:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=inline-help-text.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="row align-items-center g-3"&gt;
    &lt;div class="col-auto"&gt;
        &lt;label class="col-form-label" for="inputPassword"&gt;Password&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col-auto"&gt;
        &lt;input type="password" class="form-control" id="inputPassword"&gt;
    &lt;/div&gt;
    &lt;div class="col-auto"&gt;
        &lt;span class="form-text"&gt;Must be 8-20 characters long.&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=inline-help-text.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-inline-help-text.png" width="760" height="58" alt="Bootstrap Inline Help Text" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Creating Disabled Form Controls</h2>
                <p>To disable individual form controls such as <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code> just add the attributes <code>disabled</code> to them and Bootstrap will do the rest. Here's an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=disabled-form-controls.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;input type="text" class="form-control mb-3" placeholder="disabled" disabled&gt;
&lt;textarea class="form-control mb-3" placeholder="disabled" disabled&gt;&lt;/textarea&gt;
&lt;select class="form-select" disabled&gt;
    &lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=disabled-form-controls.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-disabled-form-controls.png" width="760" height="190" alt="Bootstrap Disabled Form Controls" />
                        </a>
                    </div>
                </div>
                <p>However, if you want to disable all controls within a <a href="../html-reference/html-form-tag.php.html"><code>&lt;form&gt;</code></a> at once, place them inside a <a href="../html-reference/html-fieldset-tag.php.html"><code>&lt;fieldset&gt;</code></a> element and apply the attribute <code>disabled</code> on it, as shown in the following example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=disabled-forms.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;form&gt;
    &lt;fieldset disabled&gt;
        &lt;div class="row mb-3"&gt;
            &lt;label for="inputEmail" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
            &lt;div class="col-sm-10"&gt;
                &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row mb-3"&gt;
            &lt;label for="inputPassword" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
            &lt;div class="col-sm-10"&gt;
                &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row mb-3"&gt;
            &lt;div class="col-sm-10 offset-sm-2"&gt;
                &lt;div class="form-check"&gt;
                        &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
                        &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-10 offset-sm-2"&gt;
                &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=horizontal-form-layout.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-disabled-forms.png" width="760" height="208" alt="Bootstrap Disabled Forms" />
                        </a>
                    </div>
                </div>
				<hr />
				<h2>Creating Readonly Inputs</h2>
                <p>You can also add the <code>readonly</code> boolean attribute on an input or textarea to prevent the modification of its value. Read-only inputs appear in lighter background (just like disabled inputs), but it retain the standard text cursor. Check out the following example to see how it works:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=read-only-input-and-textarea.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;input type="text" class="form-control mb-2" value="This input value cannot be changed." readonly&gt;
&lt;textarea rows="3" class="form-control" readonly&gt;This textarea value cannot be changed.&lt;/textarea&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=read-only-input-and-textarea.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-read-only-input-and-textarea.png" width="760" height="152" alt="Bootstrap Read-only Input and Textarea" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Height Sizing of Form Controls</h2>
                <p>You can easily change the height of your text inputs and select boxes to match the <a href="bootstrap-buttons.php.html">button sizes</a>.</p>
                <p>Use the form control height sizing classes such as <code>.form-control-lg</code> and <code>.form-control-sm</code> on the text inputs to create it's larger or smaller sizes. Here's an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=text-input-height-sizing.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;div class="row mb-3"&gt;
    &lt;label class="col-sm-2 col-form-label col-form-label-lg"&gt;Email&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control form-control-lg" placeholder="disabled"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="row mb-3"&gt;
    &lt;label class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control" placeholder="disabled"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
    &lt;label class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control form-control-sm" placeholder="disabled"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=text-input-height-sizing.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-text-input-height-sizing.png" width="760" height="176" alt="Bootstrap Text Input Height Sizing" />
                        </a>
                    </div>
                </div>
                <!--Tip Box-->
				<div class="color-box">
					<div class="shadow">
						<div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
						<div class="tip-box">
							<p><strong>Tip:</strong> Be sure to apply the class <code>.col-form-label-lg</code> or <code>.col-form-label-sm</code> on the <a href="../html-reference/html-label-tag.php.html"><code>&lt;label&gt;</code></a> or <a href="../html-reference/html-legend-tag.php.html"><code>&lt;legend&gt;</code></a> elements to correctly resize the label according to the form controls.</p>
						</div>
					</div>
				</div>
				<!--End:Tip Box-->
                <p>Similarly, you can create larger and smaller variants of the select boxes using the <code>.form-select-lg</code> and <code>.form-select-sm</code> classes on the <a href="../html-reference/html-select-tag.php.html"><code>&lt;select&gt;</code></a> element, like this:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=select-box-height-sizing.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;div class="row mb-3"&gt;
    &lt;label class="col-sm-2 col-form-label col-form-label-lg"&gt;State&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;select class="form-select form-select-lg"&gt;
            &lt;option&gt;Large select&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;    
&lt;div class="row mb-3"&gt;
    &lt;label class="col-sm-2 col-form-label"&gt;State&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;select class="form-select"&gt;
            &lt;option&gt;Default select&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;    
&lt;div class="row"&gt;
    &lt;label class="col-sm-2 col-form-label col-form-label-sm"&gt;State&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;select class="form-select form-select-sm"&gt;
            &lt;option&gt;Small select&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=select-box-height-sizing.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-select-box-height-sizing.png" width="760" height="169" alt="Bootstrap Select Box Height Sizing" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Bootstrap Form Validation</h2>
                <p>Bootstrap provides an easy and quick way to validate web forms on client-side. It uses browser's native form validation API to validate the form. Form validation styles are applied via CSS <code>:invalid</code> and <code>:valid</code> pseudo-classes. It applies to <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code> elements.</p>
                <p>Let's try out the following example and see how it actually works:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=form-validation.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form class="needs-validation" novalidate&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputEmail"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control" id="inputEmail" placeholder="disabled" required&gt;
        &lt;div class="invalid-feedback"&gt;Please enter a valid email address.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputPassword"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control" id="inputPassword" placeholder="disabled" required&gt;
        &lt;div class="invalid-feedback"&gt;Please enter your password to continue.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
            &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->                
                <!--Note box-->
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab note-icon" title="Important Notes"><i></i></div>
                        <div class="note-box">
                            <p><strong>Note:</strong> For custom Bootstrap form validation messages, you'll need to disables the browser default feedback tooltips by adding the <code>novalidate</code> boolean attribute to the <code>&lt;form&gt;</code> element. However, it still provides access to the form validation APIs in JavaScript.</p>
                        </div>
                    </div>
                </div>
                <!--End:Note box-->               
                <p>Here's the custom JavaScript code that displays error messages and disables form submission if there are invalid fields. See the <a href="../javascript-tutorial/javascript-closures.php.html">JavaScript closures</a> chapter to learn about self-executing function.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=form-validation.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
    // Self-executing function
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');

            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
&lt;/script&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=form-validation.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-form-validation.png" width="760" height="295" alt="Bootstrap Form Validation" />
                        </a>
                    </div>
                </div>
                <!--Tip Box-->
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> To reset the appearance of the form programmatically, remove the <code>.was-validated</code> class from the <code>&lt;form&gt;</code> element after submission. This class is applied automatically on the form by the Bootstrap when you click the submit button.</p>
                        </div>
                    </div>
                </div>
                <!--End:Tip Box-->
                <p>If you require server-side validation, you can alternatively use the <code>.is-invalid</code> and <code>.is-valid</code> classes to indicate invalid and valid form fields. The <code>.invalid-feedback</code> and <code>.valid-feedback</code> are also supported with these classes. Let's take a look at the following example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=server-side-form-validation.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputEmail"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control is-valid" id="inputEmail" placeholder="disabled" value="peterparker@example.com" required&gt;
        &lt;div class="valid-feedback"&gt;Good! Your email address looks valid.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;label class="form-label" for="inputPassword"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control is-invalid" id="inputPassword" placeholder="disabled" required&gt;
        &lt;div class="invalid-feedback"&gt;Opps! You have entered an invalid password.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
            &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=form-validation.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-server-side-form-validation.png" width="760" height="320" alt="Bootstrap Server Side Form Validation" />
                        </a>
                    </div>
                </div>
                <p>You can alternatively swap the <code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code> classes to display the validation feedback text in a tooltip style.</p>
                <p>Also, be sure to apply the style <code>position: relative</code> or class <code>.position-relative</code> on the parent element for proper feedback tooltip positioning. Here's an example:</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=display-validation-feedback-in-tooltip-style.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;form&gt;
    &lt;div class="mb-3 position-relative"&gt;
        &lt;label class="form-label" for="inputEmail"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control is-valid" id="inputEmail" placeholder="disabled" value="peterparker@example.com" required&gt;
        &lt;div class="valid-tooltip"&gt;Good! Your email address looks valid.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3 position-relative"&gt;
        &lt;label class="form-label" for="inputPassword"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control is-invalid" id="inputPassword" placeholder="disabled" required&gt;
        &lt;div class="invalid-tooltip"&gt;Opps! You have entered an invalid password.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="checkbox" id="checkRemember"&gt;
            &lt;label class="form-check-label" for="checkRemember"&gt;Remember me&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=display-validation-feedback-in-tooltip-style.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-form-validation-feedback-in-styled-tooltip.png" width="760" height="270" alt="Bootstrap Form Validation Feedback in Styled Tooltip" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Supported Form Controls in Bootstrap</h2>
                <p>Bootstrap includes support for all standard HTML form controls as well as <a href="../html-tutorial/html5-new-input-types.php.html">new HTML5 input types</a> such as datetime, number, email, url, search, range, color, url, and so on. The following example will show you the usages of standard form controls with Bootstrap.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=supported-from-controls.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;form&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="firstName"&gt;First Name:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="text" class="form-control" id="firstName" placeholder="disabled" required&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="lastName"&gt;Last Name:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="text" class="form-control" id="lastName" placeholder="disabled" required&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="emailAddress"&gt;Email Address:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="email" class="form-control" id="emailAddress" placeholder="disabled" required&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="phoneNumber"&gt;Mobile Number:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="number" class="form-control" id="phoneNumber" placeholder="disabled" required&gt;
        &lt;/div&gt;
    &lt;/div&gt;        
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label"&gt;Date of Birth:&lt;/label&gt;
        &lt;div class="col-sm-3"&gt;
            &lt;select class="form-select" required&gt;
                &lt;option&gt;Date&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
            &lt;select class="form-select" required&gt;
                &lt;option&gt;Month&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
            &lt;select class="form-select"&gt;
                &lt;option&gt;Year&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="postalAddress"&gt;Postal Address:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;textarea rows="3" class="form-control" id="postalAddress" placeholder="disabled" required&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="ZipCode"&gt;Zip Code:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="text" class="form-control" id="ZipCode" placeholder="disabled" required&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label" for="uploadImage"&gt;Upload Image:&lt;/label&gt;
        &lt;div class="col-sm-9"&gt;
            &lt;input type="file" class="form-control" id="uploadImage"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;label class="col-sm-3 col-form-label"&gt;Gender:&lt;/label&gt;
        &lt;div class="col-sm-9 mt-2"&gt;
            &lt;div class="form-check form-check-inline"&gt;
                &lt;input type="radio" class="form-check-input" name="gender" id="radioMale"&gt;
                &lt;label class="form-check-label" for="radioMale"&gt;Male&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-check form-check-inline"&gt;
                &lt;input type="radio" class="form-check-input" name="gender" id="radioFemale"&gt;
                &lt;label class="form-check-label" for="radioFemale"&gt;Female&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;div class="col-sm-9 offset-sm-3"&gt;
            &lt;div class="form-check"&gt;
                &lt;input class="form-check-input" type="checkbox" id="checkAgree" value="agree"&gt;
                &lt;label class="form-check-label" for="checkAgree"&gt;I agree to the &lt;a href="#"&gt;Terms and Conditions&lt;/a&gt;&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row mb-3"&gt;
        &lt;div class="col-sm-9 offset-sm-3"&gt;
            &lt;input type="submit" class="btn btn-primary" value="Submit"&gt;
            &lt;input type="reset" class="btn btn-secondary ms-2" value="Reset"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->				
                <!--Bottom Navigation-->
                <div class="bottom-link clearfix">
                    <a href="bootstrap-list-groups.php.html" class="previous-page-bottom">Previous Page</a>
                    <a href="bootstrap-custom-forms.php.html" class="next-page-bottom">Next Page</a>
                </div>
                <!--End:Bottom Navigation-->
                <!-- InstanceEndEditable -->
                <div class="bottom-ad clearfix">

     <div class="ad-label">Advertisements</div>

     <!--Rectangle Left-->
     <div class="rectangle-left fl">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Left -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="8162953958"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Left-->

     <!--Rectangle Right-->
     <div class="rectangle-right fr">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Right -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="3324015654"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Right-->

</div>

            </div>
            <!--End:Text Content-->
            <!--Feedback Form-->
			<div class="snippets">
	<a href="../snippets/gallery.php.html" target="_blank"><img src="../lib/images/bootstrap-code-snippets.png" alt="Bootstrap UI Design Templates" /></a>
</div>            <!--End:Feedback Form-->
        </div>        
        <div class="rightcolumn">
            <div class="sidebar">
    
    <div class="ad-label">Advertisements</div>

    <div class="skyscraper primary">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Premium Skyscraper -->
        <ins class="adsbygoogle"
            style="display:inline-block;width:160px;height:600px"
            data-ad-client="ca-pub-9107540490929984"
            data-ad-slot="4376141825"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="skyscraper">
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- Bottom Skyscraper -->
     <ins class="adsbygoogle"
          style="display:inline-block;width:160px;height:600px"
          data-ad-client="ca-pub-9107540490929984"
          data-ad-slot="3387984471"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
</div>
</div>        </div>
    </div>
    <!--Footer-->
	<!--Footer-->
<div class="footer">
    <div class="appeal">
        <div class="wrapper">
            <p>Is this website helpful to you? Please give us a
            <a href="../like.php.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=250,width=600,top=150, left='+((screen.width/2)-300));return false;">like</a>,
            or share your <a href="../contact-us.php.html" target="_blank">feedback</a><em> to help us improve</em>.
            Connect with us on <a href="https://www.facebook.com/tutorialrepublic" target="_blank">Facebook</a> and <a href="https://twitter.com/tutrepublic" target="_blank">Twitter</a> for the latest updates.</p>               
        </div>
    </div>
    <div class="footer-inner">
        <div class="wrapper clearfix">                
            <div class="link-box">
                <h4>About Us</h4>
                <div class="clearfix">
                    <a href="../about-us.php.html">Our Story</a>                    
                    <a href="../terms-of-use.php.html">Terms of Use</a>
                    <a href="../privacy-policy.php.html">Privacy Policy</a>                    
                </div>
            </div>
            <div class="link-box">
                <h4>Contact</h4>
                <div class="clearfix">
                    <a href="../contact-us.php.html">Contact Us</a>                    
                    <a href="../contact-us.php.html" target="_blank">Report Error</a>
                    <a href="../advertise-with-us.php.html">Advertise</a>                    
                </div>
            </div>
            <div class="tool-box">
                <h4>Interactive Tools</h4>
                <div class="tools-list clearfix" id="tools">
                    <a href="../font-awesome-icons-classes.php.html" target="_blank">Font Awesome Icon Search Utility</a>
                    <a href="../html-formatter.php.html" target="_blank">HTML Formatter</a>
                    <a href="../faq/what-is-the-maximum-length-of-title-and-meta-description-tag.php.html">Title &amp; Meta Length Calculator</a>
                    <a href="../html-reference/html-color-picker.php.html">HTML Color Picker</a>
                    <a href="../twitter-bootstrap-button-generator.php.html" target="_blank">Bootstrap Button Generator</a>
                    <a href="../codelab.php%3Ftopic=sql&amp;file=select-all.html" target="_blank">SQL Playground</a>
                    <a href="../bootstrap-icons-classes.php.html" target="_blank">Bootstrap Icon Finder</a>
                    <a href="../codelab.php%3Ftopic=html&amp;file=hello-world.html" target="_blank">HTML Editor</a>
                </div>
            </div>
            <div class="footer-logo">
                <p><img src="../lib/images/logo.svg" alt="TutorialRepublic" /><p>
					<div>
						<a href="https://www.buymeacoffee.com/tutrepublic" class="bmc-btn" rel="nofollow" target="_blank">
    						<img src="../lib/images/bmc-btn.png" alt="BMC" />
						</a>
					</div>
            </div>
        </div>
    </div>           
        <div class="bottom-strip">
        <div class="wrapper">
            <div class="notice">Copyright &copy; 2022 Tutorial Republic. All Rights Reserved.</div>
            <div class="social-media">
                <em>Share This:</em>
                <a href="https://facebook.com/sharer.php?u=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-forms.php" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Facebook"><i class="icon-facebook"></i></a>
                <a href="bootstrap-forms.php.html#" id="tweet-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Twitter"><i class="icon-twitter"></i></a>
                <a href="bootstrap-forms.php.html#" id="email-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" rel="noreferrer" title="Gmail"><i class="icon-mail"></i></a>
            </div>
        </div>            
    </div>
    <script>
        var title = document.title.replace('- Tutorial Republic', '');
        document.getElementById('tweet-btn').href = 'https://twitter.com/share?text=' + title + '- &url=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-forms.php';
        document.getElementById('email-btn').href = 'https://mail.google.com/mail/?view=cm&fs=1&su=' + title + '&body=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-forms.php';
    </script>
</div>
<!--End:Footer-->
    
<div class="backdrop mobile-only"></div>

<!-- TutorialRepublic base script -->
<script>
// Adding CSS files
[	
	'/lib/styles/legacy/extended-1.1.css',
	'/lib/icomoon/style.css'
].forEach(function(href) {
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = href;
	(document.getElementsByTagName('head')[0]).appendChild(link);
});

// Adding JS files
[
	'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
	'/lib/js/prism.js',
	'/lib/js/default-1.3.js'
].forEach(function(src) {
	var script = document.createElement('script');
	script.async = false; // important
	script.src = src;
	(document.getElementsByTagName('body')[0]).appendChild(script);
});
</script>


    <!--End:Footer-->
</body>
<!-- InstanceEnd --></html>