YouTip
Home
JavaScript
PHP
Python3
HTML
C#
Python
Java
PyTorch
Linux
C
jQuery
CSS
XML
jQuery UI
Bootstrap
C++
Angular
HTML DOM
Redis
Web Building
Home
>
Bootstrap
>
Bootstrap4 Forms
Bootstrap4 Forms
π 2026-06-20 | π Bootstrap
In this chapter, we will learn how to create forms using Bootstrap. Bootstrap allows you to create different styles of forms with some simple HTML tags and extended classes. Form elements like ``, `
`, and `` elements, when using the `.form-control` class, have their width set to 100%. ### Bootstrap4 Form Layouts * Stacked Form (full-width): Vertical * Inline Form: Horizontal Bootstrap provides two types of form layouts: * * * ## Stacked Form The following example uses two input fields, a checkbox, and a submit button to create a stacked form: ## Example
Email address:
Password:
Remember me
Submit
[Try it Β»](#) Display effect: !(#) * * * ## Inline Form All elements in an inline form are left-aligned. **Note: When the screen width is less than 576px, they will stack vertically. If the screen width is greater than or equal to 576px, the form elements will appear on the same horizontal line.** Inline forms require adding the `.form-inline` class to the `` element. The following example uses two input fields, a checkbox, and a submit button to create an inline form: ## Example
Email address:
Password:
Remember me
Submit
[Try it Β»](#) Display effect: !(#) The elements in the example above look tightly packed. You can use the `.mr-sm-2` class to set right margin and the `.mb-2` class to set bottom margin: ## Example
Email address:
Password:
Remember me
Submit
[Try it Β»](#) Display effect: !(#) ## Form Row / Grid We can also use the `.col` class to control the width and alignment of form elements without using spacing classes. Form elements controlled by the `.col` class need to be placed inside a `.row` container. The following example displays two columns side by side: ## Example
[Try it Β»](#) Display effect: !(#) If you want smaller spacing in the grid, you can use `.form-row` instead of `.row`: ## Example
[Try it Β»](#) * * * ## Form Validation We can use different validation classes to set up form validation functionality. Adding `.was-validated` or `.needs-validation` to the `` element will give input fields a green (valid) or red (invalid) border effect, indicating whether the form needs input. The `.valid-feedback` or `.invalid-feedback` classes are used to tell the user what information is missing or what needs to be completed before submitting the form. ## Example Using the `.was-validated` class to show what needs to be filled in before form submission:
Username:
Validation successful!
Please enter a username!
Password:
Validation successful!
Please enter a password!
Agree to terms
Validation successful!
You must agree before submitting.
Submit
[Try it Β»](#) ## Example Using `.needs-validation`, it will validate missing information after form submission. Some JavaScript code is needed here to make it work:
Username:
Validation successful!
Please enter a username!
Password:
Validation successful!
Please enter a password!
Agree to terms
Validation successful!
You must agree before submitting.
Submit
// Prevent form submission if validation fails (function() { 'use strict'; window.addEventListener('load', function() { // Fetch 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); })(); [Try it Β»](#)
β Bootstrap4 Tooltip
Bootstrap4 Dropdowns β
π Categories
β‘ JavaScript
(1589)
π PHP
(872)
π Python3
(810)
π HTML
(691)
βοΈ C#
(650)
π Python
(594)
β Java
(552)
βοΈ PyTorch
(534)
π§ Linux
(472)
βοΈ C
(432)
π¦ jQuery
(406)
π¨ CSS
(377)
π XML
(259)
π¦ jQuery UI
(231)
π― Bootstrap
(220)
βοΈ C++
(215)
π °οΈ Angular
(205)
π HTML DOM
(201)
π΄ Redis
(188)
π Web Building
(142)
π Vue.js
(141)
π R
(131)
πΌ Pandas
(124)
ποΈ SQL
(105)
βοΈ Docker
(86)
βοΈ TypeScript
(73)
βοΈ Highcharts
(70)
π AI Agent
(70)
βοΈ React
(68)
π Node.js
(65)
βοΈ Machine Learning
(60)
π Git
(59)
π΅ Go
(58)
π Markdown
(58)
π’ NumPy
(55)
π§ͺ Flask
(54)
βοΈ Scala
(53)
ποΈ SQLite
(52)
π JSTL
(52)
βοΈ VS Code
(51)
π MongoDB
(49)
π Perl
(48)
π Ruby
(47)
π Matplotlib
(47)
βοΈ Uncategorized
(46)
π Swift
(46)
ποΈ PostgreSQL
(46)
βοΈ Data Structures
(46)
π Playwright
(46)
π iOS
(45)
ποΈ MySQL
(44)
βοΈ LangChain
(43)
π FastAPI
(40)
βοΈ Ionic
(38)
π Design Patterns
(37)
βοΈ Eclipse
(37)
π¨ CSS3
(34)
π Lua
(34)
βοΈ Codex
(34)
πΈ Django
(32)
βοΈ OpenCV
(32)
π Rust
(31)
π JSP
(31)
βοΈ Claude Code
(31)
π Pillow
(30)
βοΈ OpenCode
(28)
π AI Skills
(27)
π Flutter
(26)
π Maven
(26)
π¨ Tailwind CSS
(25)
π§ TensorFlow
(25)
π Servlet
(24)
π Dart
(23)
π Assembly
(23)
βοΈ Memcached
(22)
βοΈ SVG
(22)
βοΈ Electron
(22)
π NLP
(22)
π Regex
(21)
π Android
(20)
π£ Kotlin
(19)
π Julia
(19)
π SOAP
(17)
π Selenium
(17)
π PowerShell
(17)
π Sass
(16)
π HTTP
(16)
π Zig
(15)
π AI
(15)
π AJAX
(14)
π Swagger
(14)
βοΈ Scikit-learn
(13)
βοΈ ECharts
(13)
βοΈ Chart.js
(13)
βοΈ Cursor
(13)
βοΈ SciPy
(12)
π RDF
(12)
π Ollama
(12)
π Next.js
(12)
π Plotly Dash
(12)
π JSON
(11)
π RESTful API
(11)
π WSDL
(9)
βοΈ CMake
(8)
π Firebug
(7)
π Nginx
(6)
βΈοΈ Kubernetes
(6)
π Jupyter
(6)
π LaTeX
(4)
π UniApp
(4)
ποΈ SQL Server
(1)