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]
[link rel="stylesheet" href="css/bootstrap.min.css"]
[/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--]
[script src="js/jquery-3.4.1.min.js"][/script]
[!-- Popper Library --]
[script src="js/popper.min.js"][/script]
[script src="js/bootstrap.bundle.js"][/script]
[script src="js/bootstrap.bundle.min.js"][/script]
[!-- Latest compiled JavaScript --]
[script src="js/bootstrap.min.js"][/script]
[script]
$(document).on('change', '.custom-file-input', function (event) {
$(this).next('.custom-file-label').html(event.target.files[0].name);
})
[/script]
[/body]
[/html]
On this page of the site you can watch the video online Drop down Button Custom Select File Upload Input Groups |Part 22 - Bootstrap 4 Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Safdar Dogar 27 July 2019, share the link with friends and acquaintances, this video has already been watched 856 times on youtube and it was liked by 8 viewers. Enjoy your viewing!
