Ana SayfaBootstrap Membuat Form di Bootstrap 4 YazarHamdiPhone3/05/2020 Pada Bootstrap, Form akan secara otomatis mendapatkan Styling Global. Semua elemen Kontekstual seperti , , dan <select> yang menggunakan class .form-control memiliki lebar 100%.<br /><br /><br />Daftar Isi [Sembunyikan] <br /><br />Layout Form pada Bootstrap 4Membuat Form Stacked pada Bootstrap 4Membuat Form Inline pada Bootstrap 4Membuat Form Inline dengan Utilities pada Bootstrap 4Mengatur Form Row</div><div id='after-ad'></div><div class='entry-labels'><span class='labels-label btn'>Kategori</span><a class='label-link btn' href='https://www.elma.eu.org/search/label/Bootstrap' rel='tag'>Bootstrap</a><a class='label-link btn' href='https://www.elma.eu.org/search/label/CSS' rel='tag'>CSS</a><a class='label-link btn' href='https://www.elma.eu.org/search/label/HTML' rel='tag'>HTML</a><a class='label-link btn' href='https://www.elma.eu.org/search/label/JavaScript' rel='tag'>JavaScript</a><a class='label-link btn' href='https://www.elma.eu.org/search/label/jQuery' rel='tag'>jQuery</a></div></div><div class='post-share'><ul class='share-a social sb-a'><li class='share-label'><span class='sl-btn btn'><i class='sl-ico'></i></span></li><li class='facebook has-span'><a class='fa-facebook btn pbt-window' data-height='500' data-url='https://www.facebook.com/sharer.php?u=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='520' href='#' rel='noopener noreferrer' title='Facebook'><span>Facebook</span></a></li><li class='twitter has-span'><a class='fa-twitter btn pbt-window' data-height='520' data-url='https://twitter.com/intent/tweet?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&text=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Twitter'><span>Twitter</span></a></li><li class='whatsapp'><a class='fa-whatsapp btn pbt-window' data-height='520' data-url='https://api.whatsapp.com/send?text=Membuat Form di Bootstrap 4 | https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='860' href='#' rel='noopener noreferrer' title='WhatsApp'></a></li><li class='email'><a class='fa-email btn pbt-window' data-height='500' data-url='mailto:?subject=Membuat Form di Bootstrap 4&body=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='520' href='#' rel='noopener noreferrer' title='Email'></a></li><li class='show-more'><button aria-label='Daha fazla göster' class='btn'></button></li></ul><div class='share-modal'><div class='modal-inner'><div class='modal-header'><span class='modal-thumb entry-thumbnail'><span class='entry-thumbnail' data-src='https://resources.blogblog.com/img/blank.gif'></span> </span><span class='modal-title'><span class='strong'>Paylaş:</span><span class='title'>Membuat Form di Bootstrap 4</span></span></div><ul class='share-b social sb-a'><li class='facebook'><a class='fa-facebook btn pbt-window' data-height='500' data-url='https://www.facebook.com/sharer.php?u=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='520' href='#' rel='noopener noreferrer' title='Facebook'><span>Facebook</span></a></li><li class='twitter'><a class='fa-twitter btn pbt-window' data-height='520' data-url='https://twitter.com/intent/tweet?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&text=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Twitter'><span>Twitter</span></a></li><li class='whatsapp'><a class='fa-whatsapp btn pbt-window' data-height='520' data-url='https://api.whatsapp.com/send?text=Membuat Form di Bootstrap 4 | https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='860' href='#' rel='noopener noreferrer' title='WhatsApp'><span>WhatsApp</span></a></li><li class='pinterest-p'><a class='fa-pinterest-p btn pbt-window' data-height='520' data-url='https://www.pinterest.com/pin/create/button/?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&media=&description=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Pinterest'><span>Pinterest</span></a></li><li class='linkedin'><a class='fa-linkedin-in btn pbt-window' data-height='520' data-url='https://www.linkedin.com/shareArticle?mini=true&url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&title=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='LinkedIn'><span>LinkedIn</span></a></li><li class='reddit'><a class='fa-reddit-alien btn pbt-window' data-height='520' data-url='https://reddit.com/submit?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&title=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Reddit'><span>Reddit</span></a></li><li class='tumblr'><a class='fa-tumblr btn pbt-window' data-height='520' data-url='https://www.tumblr.com/share/link?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&name=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Tumblr'><span>Tumblr</span></a></li><li class='telegram'><a class='fa-telegram-plane btn pbt-window' data-height='520' data-url='https://telegram.me/share/url?url=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html&text=Membuat Form di Bootstrap 4' data-width='860' href='#' rel='noopener noreferrer' title='Telegram'><span>Telegram</span></a></li><li class='email'><a class='fa-email btn pbt-window' data-height='500' data-url='mailto:?subject=Membuat Form di Bootstrap 4&body=https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html' data-width='520' href='#' rel='noopener noreferrer' title='Email'><span>Email</span></a></li></ul></div><button aria-label='Daha az göster' class='hide-modal'></button></div><div class='overlay' id='share-overlay'></div></div></div> <footer class='post-footer flex-col'> <div class='post-widget' id='related-wrap'><div class='main-title-wrap related-title'><h3 class='title'>Önerilen Yayınlar</h3><a class='title-link' href='https://www.elma.eu.org/search/label/Bootstrap'>Tümünü göster</a></div><div class='related-content'><div class='related-tag' data-id='4792357626303494859' data-label='Bootstrap'></div></div></div><div class='post-widget' id='post-footer-ads'></div> </footer> </article><div class='buzzspot-pro-blog-post-comments post-widget' data-shortcode='$type={blogger}'> <script type='text/javascript'>var disqus_shortname="probloggertemplates";var disqus_blogger_current_url="https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html";if(!disqus_blogger_current_url.length){disqus_blogger_current_url="https://www.elma.eu.org/2020/03/membuat-form-di-bootstrap-4.html"}var disqus_blogger_homepage_url="https://www.elma.eu.org/";var disqus_blogger_canonical_homepage_url="https://www.elma.eu.org/";</script><a name='comments'></a><section class='comments threaded flex-col no-comments' data-embed='true' data-num-comments='0' id='comments'> <div class='main-title-wrap comments-title no-message'> <h3 class='title'>Yorum Gönder</h3></div> <div class='comment-form'><a name='comment-form'></a><a href='https://www.blogger.com/comment/frame/1992510471342201167?po=4792357626303494859&hl=tr&skin=soho' id='comment-editor-src' rel='noopener noreferrer' title='Comment Form Link'></a><iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='90px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe><script src='https://www.blogger.com/static/v1/jsbin/4269703388-comment_from_post_iframe.js' type='text/javascript'></script><script type='text/javascript'>BLOG_CMT_createIframe("https://www.blogger.com/rpc_relay.html");</script></div> </section></div> <div class='post-nav post-widget'><a class='post-nav-link post-nav-newer-link' href='https://www.elma.eu.org/2020/03/10-cliches-about-ecommerce-seo-mistakes.html'>Daha yeni </a> <a class='post-nav-link post-nav-older-link' href='https://www.elma.eu.org/2020/03/vue-memahami-lifecycle-hook-pada-vuejs.html'>Daha eski </a></div> </div> </div></div> <div id='custom-ads'><div class='section' id='buzzspot-pro-main-before-ad' name='Post ADS 1'><div class='widget HTML' data-version='2' id='HTML1'> <div class='widget-content'><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9079489449422243" crossorigin="anonymous"></script> </div></div></div> <div class='section' id='buzzspot-pro-main-after-ad' name='Post ADS 2'><div class='widget HTML' data-version='2' id='HTML2'> <div class='widget-content'><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9079489449422243" crossorigin="anonymous"></script> </div></div></div></div> <div class='section' id='buzzspot-pro-related-posts' name='Related Posts'><div class='widget HTML' data-shortcode='$title={Önerilen Yayınlar} $results={6}' data-version='2' id='HTML51'> </div></div><div class='section' id='buzzspot-pro-post-footer-ads' name='Post ADS 3'><div class='widget HTML' data-version='2' id='HTML3'> <div class='widget-content'><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9079489449422243" crossorigin="anonymous"></script> </div></div></div></main><aside id='sidebar-wrapper'><div class='sidebar pbt-section section' id='sidebar' name='Kenar Çubuğu'><div class='widget LinkList' data-version='2' id='LinkList1'> <div class='title-wrap widget-title'><h3 class='title'>Sosyal Medya</h3></div> <div class='widget-content'> <ul class='social-icons social sb-a'><li class='facebook'><a alt='facebook' class='fa-facebook btn' data-side='true' href='https://www.facebook.com/dilekhamdiuludag # 1k' rel='noopener noreferrer' target='_blank' title='facebook'></a></li><li class='twitter'><a alt='twitter' class='fa-twitter btn' data-side='true' href='https://twitter.com/dilekhamdiuludag # 1k' rel='noopener noreferrer' target='_blank' title='twitter'></a></li><li class='youtube'><a alt='youtube' class='fa-youtube btn' data-side='true' href='https://www.youtube.com/channel/dilekhamdiuludag # 1k' rel='noopener noreferrer' target='_blank' title='youtube'></a></li><li class='instagram'><a alt='instagram' class='fa-instagram btn' data-side='true' href='https://instagram.com/dilekhamdiuludag # 1k' rel='noopener noreferrer' target='_blank' title='instagram'></a></li></ul></div> </div><div class='widget HTML' data-version='2' id='HTML5'> <div class='title-wrap widget-title'><h3 class='title'>Son Yorumlar</h3></div> <div class='widget-content' data-shortcode='{getPosts} $results={6} $type={comments}'> </div> </div><div class='widget Label' data-version='2' id='Label1'> <div class='title-wrap widget-title'><h3 class='title'>Kategoriler</h3></div> <div class='widget-content cloud-label'> <ul class='cloud-style'><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Teknoloji'>Teknoloji</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Video'>Video</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Haberler'>Haberler</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Televizyon'>Televizyon</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Spor'>Spor</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Hatay'>Hatay</a></li><li><a class='label-name btn' href='https://www.elma.eu.org/search/label/Do%C4%9Frula'>Doğrula</a></li></ul></div></div><div class='widget HTML' data-version='2' id='HTML6'> <div class='title-wrap widget-title'><h3 class='title'>Bağlantılar</h3></div> <div class='widget-content'><div class='widget-content cloud-label2'> <ul> <li><a href="https://www.elma.eu.org/" target="_blank" title="Elma">Elma</a></li> <li><a href="https://www.hamdiphone.com.tr/" target="_blank" title="HamdiPhone">HamdiPhone</a></li> <li><a href="https://hamdiphone.dukkan.im/" target="_blank" title="hamdiphone">HamdiPhone Dükkan</a></li> <li><a href="https://www.payastelefontamiri.tk/" target="_blank" title="payastelefontamiri">Payas Telefoncu</a></li> </ul> </div> </div></div></div></aside></div></div><footer class='flex-col' id='footer-wrapper'><div class='primary-footer flex-c'><div class='container row-x1'><div class='about-section flex-sb section' id='buzzspot-pro-about-section' name='About Section'><div class='widget Image' data-version='2' id='Image51'> <a class='footer-logo custom-image' href='https://www.elma.eu.org/' rel='home'><img alt='E L M A' data-src='https://blogger.googleusercontent.com/img/a/AVvXsEhfEQt-WihXJsiz1NMUlk6WMzXnyyouFpKHbHF4rtt6gAE_oW6rJ58qgAJkEOX5nDr7PFYf3yMB2Pem1XF9OR9tV-DAtFa8KMJcHOlYDRO89gzKxRBR_hnWCy5NmOPBnZlO0XcQ7BnnpFeo3WRaK56-R36Fh4bCwavF6LMc2ODLHbZDG3stPxrUPus=s586' height='373' id='Image51_img' src='https://blogger.googleusercontent.com/img/a/AVvXsEhfEQt-WihXJsiz1NMUlk6WMzXnyyouFpKHbHF4rtt6gAE_oW6rJ58qgAJkEOX5nDr7PFYf3yMB2Pem1XF9OR9tV-DAtFa8KMJcHOlYDRO89gzKxRBR_hnWCy5NmOPBnZlO0XcQ7BnnpFeo3WRaK56-R36Fh4bCwavF6LMc2ODLHbZDG3stPxrUPus=s586' width='586'> </img></a><div class='footer-info'><h3 class='title'>HamdiPhone</h3><p class='image-caption excerpt'>Gelişen Teknolojiye Ayak Uydurmaya Yardımcı Olma Çabasında Bir Blogtur. Gördüğü Beğendiği Ve İşinize Yarayacağını Düşündüğü Her Türlü içeriği Paylaşır.</p></div> </div><div class='widget LinkList' data-version='2' id='LinkList203'> <ul class='social-icons social sb-h'><li class='facebook'><a alt='facebook' class='fa-facebook btn' href='#hamdiphone' rel='noopener noreferrer' target='_blank' title='facebook'></a></li><li class='twitter'><a alt='twitter' class='fa-twitter btn' href='#hamdiphone' rel='noopener noreferrer' target='_blank' title='twitter'></a></li><li class='youtube'><a alt='youtube' class='fa-youtube btn' href='#hamdiphone' rel='noopener noreferrer' target='_blank' title='youtube'></a></li><li class='instagram'><a alt='instagram' class='fa-instagram btn' href='#hamdiphone' rel='noopener noreferrer' target='_blank' title='instagram'></a></li><li class='pinterest'><a alt='pinterest' class='fa-pinterest btn' href='#hamdiphone' rel='noopener noreferrer' target='_blank' title='pinterest'></a></li></ul> </div></div></div></div><div class='footer-bar flex-c'> <div class='container row-x1 flex-sb'><div class='footer-copyright section' id='footer-copyright' name='Footer Copyright'><div class='widget Text' data-version='2' id='Text50'> Design - <a href="https://elma.eu.org/" title="Elma">E L M A</a> </div></div><div class='footer-menu section' id='footer-menu' name='Footer Menu'><div class='widget LinkList' data-version='2' id='LinkList204'> <ul class='link-list'><li><a href='/'>Anasayfa</a></li><li><a href='/p/hakkimizda.html'>Hakımızda</a></li><li><a href='/p/kullanim-kosullari.html'>Koşullar</a></li><li><a href='/p/reklam.html'>Reklam</a></li></ul> </div></div></div></div></footer></div><div id='fixed-elements'><div id='slide-menu'><div class='slide-menu-header'><div class='mobile-logo'></div><button aria-label='Hide Menu' class='hide-mobile-menu'></button></div><div class='slide-menu-flex'><div class='mobile-menu' id='mobile-menu'></div><div class='mm-footer'></div></div></div><div class='overlay' id='overlay'></div><button aria-label='Back To Top' class='btn' id='back-top'></button></div><div class='hidden-widgets section' id='hidden-widgets'><div class='widget ContactForm' data-version='2' id='ContactForm1'> <div class='widget-title'><h3 class='title'>İletişim</h3></div> <div class='widget-content contact-form-widget'><form class='contact-form-form' name='contact-form'><input ariby='Ad' class='contact-form-name cf-s' id='ContactForm1_contact-form-name' name='name' placeholder='Ad' size='30' type='text' value=''/><input ariby='E-posta *' class='contact-form-email cf-s' id='ContactForm1_contact-form-email' name='email' placeholder='E-posta *' size='30' type='text' value=''/><textarea ariby='Mesaj *' class='contact-form-email-message cf-s' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Mesaj *' rows='5'>