@ttskch/select2-bootstrap4-theme
Version:
Select2 v4 theme for Bootstrap4
158 lines (144 loc) • 5.99 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- select2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
<!-- select2-bootstrap4-theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css" integrity="sha256-UfmOIikh6kg5BkHZRS0JbrlxjUKLY0uSgUt+4KJPw1M=" crossorigin="anonymous"> <!-- for live demo page -->
<link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->
</head>
<body class="pt-5" style="min-height:90vh">
<div class="container">
<h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
<hr>
<form>
<div class="form-group">
<label>Example of select</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Example of multiple select</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
<option>Tommy Yount</option>
<option>Hye Panter</option>
<option>Vi Yohe</option>
<option>Keva Bandy</option>
<option>Hannelore Corning</option>
<option>Delorse Whitcher</option>
<option>Katharyn Marrinan</option>
<option>Jeannine Tope</option>
<option>Jamila Braggs</option>
<option>Eden Cunniff</option>
<option>Suzy Schoen</option>
<option>Elza Mccook</option>
<option>Liana Goris</option>
<option>Pauletta Schlabach</option>
<option>Synthia Dupuis</option>
<option>Scarlett Kestler</option>
<option>Magdalen Mele</option>
<option>Susanna Schenk</option>
<option>Else Stupka</option>
<option>Pennie Khang</option>
</select>
</div>
<div class="form-group">
<label>Example of disabled select</label>
<select disabled data-placeholder="Cannot choose" data-allow-clear="1">
</select>
</div>
<div class="form-group">
<label>Example of disabled multiple select with selected items</label>
<select disabled multiple>
<option selected>Tommy Yount</option>
<option selected>Hye Panter</option>
<option selected>Vi Yohe</option>
</select>
</div>
<div class="form-group">
<label>Example of select with optgroup</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<optgroup label="Group A">
<option>A1</option>
<option>A2</option>
<option>A3</option>
</optgroup>
<optgroup label="Group B">
<option>B1</option>
<option>B2</option>
<option>B3</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label>Example of input-group</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Prepend</span>
</div>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="input-group mt-2">
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div class="input-group-append">
<span class="input-group-text">Append</span>
</div>
</div>
<div class="input-group mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Prepend</span>
</div>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div class="input-group-append">
<span class="input-group-text">Append</span>
</div>
</div>
</div>
<div class="form-group">
<label>Example of validated select</label>
<select data-placeholder="Invalid example" class="form-control is-invalid" data-allow-clear="1">
<option></option>
</select>
<div class="invalid-feedback">
Something is wrong.
</div>
</div>
</form>
</div>
<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<!-- select2-bootstrap4-theme -->
<script src="script.js"></script>
</body>
</html>