Drop down Button Custom Select File Upload Input Groups |Part 22 - Bootstrap 4 Tutorial

Bootstrap input group
Bootstrap input group prepend
Bootstrap input group prepend example
Bootstrap input span add on prepend
Bootstrap input group append
Bootstrap input append checkbox
Bootstrap input group checkbox
Bootstrap input group radio
Bootstrap input group radio button
Bootstrap input group button
Bootstrap input group text
Bootstrap input group Drop down
Bootstrap input group file
Bootstrap input group file upload

In this video we Discuss drop down input groups in Bootstrap 4 Step by Step With Easy Examples

With
Prof: Muhammad Safdar Dogar

Example Code:

[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]Input Group Form Example[/title]
[/head]
[body]
[div class="container"]
[br][br]
[form]
[div class="row"]
[!-- input group with drop down button --]
[div class="input-group mb-3"]
[div class="input-group-prepend"]
[button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"]Dropdown[/button]
[div class="dropdown-menu"]
[a href="#" class="dropdown-item"]Action[/a]
[a href="#" class="dropdown-item"]Action 1[/a]
[a href="#" class="dropdown-item"]Action 2[/a]
[a href="#" class="dropdown-item"]Action 3[/a]
[a href="#" class="dropdown-item"]Action 4[/a]
[/div]
[/div]
[input type="text" class="form-control"]
[/div]
[!-- input group with drop down button right side --]
[div class="input-group mb-3"]
[input type="text" class="form-control"]
[div class="input-group-prepend"]
[button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"]Dropdown[/button]
[div class="dropdown-menu"]
[a href="#" class="dropdown-item"]Action[/a]
[a href="#" class="dropdown-item"]Action 1[/a]
[a href="#" class="dropdown-item"]Action 2[/a]
[a href="#" class="dropdown-item"]Action 3[/a]
[a href="#" class="dropdown-item"]Action 4[/a]
[/div]
[/div]
[/div]
[!-- input group with Segmented buttons drop dwon --]
[div class="input-group mb-3"]
[div class="input-group-prepend"]
[button class="btn btn-outline-secondary"]Action[/button]
[button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"]
[span class="sr-only"]
Toggle Dropdown
[/span]
[/button]
[div class="dropdown-menu"]
[a href="#" class="dropdown-item"]Action 1[/a]
[a href="#" class="dropdown-item"]Action 2[/a]
[a href="#" class="dropdown-item"]Action 3[/a]
[a href="#" class="dropdown-item"]Action 4[/a]
[/div]
[/div]
[input type="text" class="form-control"]
[/div]

[!-- input group with custom Select --]
[div class="input-group mb-3"]
[div class="input-group-prepend"]
[label for="inputselect" class="input-group-text"]City[/label]
[/div]
[select id="inputselect" class="custom-select"]
[option value="Lahore"]Lahore[/option]
[option value="Khanewal"]Khanewal[/option]
[option value="Karachi"]Karachi[/option]
[option value="Pashawer"]Pashawer[/option]
[/select]
[/div]
[!-- input group with custom Select right side--]
[div class="input-group mb-3"]
[select id="inputselect" class="custom-select"]
[option value="Lahore"]Lahore[/option]
[option value="Khanewal"]Khanewal[/option]
[option value="Karachi"]Karachi[/option]
[option value="Pashawer"]Pashawer[/option]
[/select]
[div class="input-group-prepend"]
[label for="inputselect" class="input-group-text"]City[/label]
[/div]
[/div]
[!-- input group with Custom file input --]
[div class="input-group mb-3"]
[div class="input-group-prepend"]
[span class="input-group-text" id="inputfile"]Upload[/span]
[/div]
[div class="custom-file"]
[input type="file" class="custom-file-input" id="inputfile"]
[label class="custom-file-label" for="inputfile"]Choose file[/label]
[/div]
[/div]
[/div]
[/form]
[/div]



[!-- Jquery Library--]
[!-- Popper Library --]
[!-- Latest compiled JavaScript --]

[script]
$(document).on('change', '.custom-file-input', function (event) {
})
[/script]
[/body]
[/html]