form advanced
Bootstrap Select boxes
Just add bootstrap-select-min.js and same css & add class .selectpicker
Select 2
Select2 for custom search and select
Bootstrap Select boxes with colored button
Just add button class in data-style like data-style="btn-warning btn-outline"
Switchery (Basic)
add the following line class="js-switch" data-color="#13dafe" to your input element.
Switchery (sizes)
You can add data-size="small",data-size="large" to your input element for different sizes.
Switchery (secondary color)
add the following line class="js-switch" data-color="#13dafe" to your input element.
Checkbox Square
Bootstrap brand colors, use checkbox
Checkbox Circle
Add simple checkbox-circle class
Checkbox Disable
use disabled in input tag for disable state
Radio Buttons
With bootstrap colors, use radio class.
Radio Clickable
All buttons clickable
Radio Disable
use disabled in input tag for disable state
Bootstrap Switches
Input Tags
Add data-role="tagsinput" to your input field & its automatically change it to a tags input.
Select Tags
You can also use select multiple to your input field.
Input Group Tags
You can also use group tag data-role="tagsinput" to your input field.
Bootstrap TouchSpin
Use the data-plugin="touchSpin" to create a Bootstrap style spinner.
Multiple Select (Pre-selected options)
Use a select multiple as your input element.
- elem 1
- elem 2
- elem 3
- elem 6
- elem 7
- elem 8
- elem 9
- elem 10
- elem 11
- elem 12
- elem 13
- elem 14
- elem 15
- elem 16
- elem 17
- elem 18
- elem 19
- elem 20
- elem 4
- elem 5
Multiple Select (Optgroup)
Use a select multiple as your input element.
- Friends
- Yoda
- Enemies
- Palpatine
- Darth Vader
- Friends
- Obiwan
Multiple Select (Public methods)
Use a select multiple as your input element.
- elem 1
- elem 2
- elem 3
- elem 4
- elem 5
- elem 6
- elem 7
- elem 8
- elem 9
- elem 10
- elem 11
- elem 12
- elem 13
- elem 14
- elem 15
- elem 16
- elem 17
- elem 18
- elem 19
- elem 20
- elem 21
- elem 22
- elem 23
- elem 24
- elem 25
- elem 26
- elem 27
- elem 28
- elem 29
- elem 30
- elem 31
- elem 32
- elem 33
- elem 34
- elem 35
- elem 36
- elem 37
- elem 38
- elem 39
- elem 40
- elem 41
- elem 42
- elem 43
- elem 44
- elem 45
- elem 46
- elem 47
- elem 48
- elem 49
- elem 50
- elem 51
- elem 52
- elem 53
- elem 54
- elem 55
- elem 56
- elem 57
- elem 58
- elem 59
- elem 60
- elem 61
- elem 62
- elem 63
- elem 64
- elem 65
- elem 66
- elem 67
- elem 68
- elem 69
- elem 70
- elem 71
- elem 72
- elem 73
- elem 74
- elem 75
- elem 76
- elem 77
- elem 78
- elem 79
- elem 80
- elem 81
- elem 82
- elem 83
- elem 84
- elem 85
- elem 86
- elem 87
- elem 88
- elem 89
- elem 90
- elem 91
- elem 92
- elem 93
- elem 94
- elem 95
- elem 96
- elem 97
- elem 98
- elem 99
- elem 100
- elem 101
- elem 102
- elem 103
- elem 104
- elem 105
- elem 106
- elem 107
- elem 108
- elem 109
- elem 110
- elem 111
- elem 112
- elem 113
- elem 114
- elem 115
- elem 116
- elem 117
- elem 118
- elem 119
- elem 120
- elem 121
- elem 122
- elem 123
- elem 124
- elem 125
- elem 126
- elem 127
- elem 128
- elem 129
- elem 130
- elem 131
- elem 132
- elem 133
- elem 134
- elem 135
- elem 136
- elem 137
- elem 138
- elem 139
- elem 140
- elem 141
- elem 142
- elem 143
- elem 144
- elem 145
- elem 146
- elem 147
- elem 148
- elem 149
- elem 150
- elem 151
- elem 152
- elem 153
- elem 154
- elem 155
- elem 156
- elem 157
- elem 158
- elem 159
- elem 160
- elem 161
- elem 162
- elem 163
- elem 164
- elem 165
- elem 166
- elem 167
- elem 168
- elem 169
- elem 170
- elem 171
- elem 172
- elem 173
- elem 174
- elem 175
- elem 176
- elem 177
- elem 178
- elem 179
- elem 180
- elem 181
- elem 182
- elem 183
- elem 184
- elem 185
- elem 186
- elem 187
- elem 188
- elem 189
- elem 190
- elem 191
- elem 192
- elem 193
- elem 194
- elem 195
- elem 196
- elem 197
- elem 198
- elem 199
- elem 200