The most common form text field is the input field. This is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime,datetime-local, date, month, time, week, number, email, url, search, tel, and color. The proper type declaration is required to make Inputs fully styled. You can try to run the following code to learn how to work with form input in BootstrapExampleLive Demo Bootstrap Form Input Player Rank
Use the class .form-control-static on a when you need to place plain text next to a form label within a horizontal form.You can try to run the following code to implement the .form-control-static class −ExampleLive Demo Bootstrap Example Email: amit@example.com Password:
Use radio class if you want to limit the user to just one selection i.e. adding radio buttons. Use.radio-inline class to a series of radios for controls appear on the same line.You can try to run the following code to implement Bootstrap Forms radio buttonExampleLive Demo Bootstrap Forms Favourite TV Series Suits House of Cards
To create a responsive table with Bootstrap, use the table-responsive class.You can try to run the following code to form a responsive table −ExampleLive Demo Bootstrap Table Subject Marks Type Java 90 Programming Language PHP 92 Scrpting Language jQuery 80 JavaScript Library
Use the nav-stacked class to set the pills vertically. Set the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.You can try to run the following code to set vertical pills in Bootstrap −ExampleLive Demo Bootstrap Example Subjects Java WordPress JavaScript
The following are the form layouts provided by Bootstrap −Vertical formThe basic form structure comes with Bootstrap; individual form controls automatically receive some global styling.In-line formTo create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the tagHorizontal formHorizontal forms stand apart from the others not only in the amount of markup but also in the presentation of the form
To create a form in Bootstrap,Add a role form to the parent element.Wrap labels and controls in a with class .form-group. This is needed for optimum spacing.Add a class of .form-control to all textual , , and elements.You can try to run the following code to create a form −ExampleLive Demo Bootstrap Forms Full Name Subject File input Example block-level help text here. Notification about our products Submit
To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the tag.You can try to run the following code to create an inline form in Bootstrap −ExampleLive Demo Bootstrap Example Full Name File input Check me out Submit
To indicate a successful action to a particular table row or cell with Bootstrap, use the .success class. You can try to run the following code to implement the .success class −ExampleLive Demo Bootstrap Table Subject Marks Type C 65 Programming Language PHP 92 Scripting Language jQuery 80 JavaScript Library
The Bootstrap warning contextual class indicates a warning action.You can try to run the following code to implement the .warning classExampleLive Demo Bootstrap Table Subject Marks Student Programming 90 Amit Web Dev 92 Yuvraj Science 95 Sachin
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP