Select2 / Bootstrap4-Issues

by Michael Baas

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css">
<body class="ml-2 mt-2">
  <h2>Hi</h2>
  <p>this is a sample form (non-functional) to illustrate a few formatting problems I'mstruggling with...</p>
  <p>
    Some details:
    <ul>
      <li>https://github.com/angel-vladov/select2-bootstrap-theme says to refer to "select2-bootstrap-theme" from CDNJS (which I did here) - but the description at CDNJS said it was for Bootstrap3 (not 4!)</li>
      <li>how to fix the formatting of #var2 - the only select that uses select2 with "select2-bootstrap-theme":</li>
      <ul>
      <li>same width as controls above and below</li>
      <li>can we use the double-arrows that Botostrap's "custom-select" gives us?</li>
      <li>same height and other selects</li>
      </ul>
    </ul>
  </p>
  <form style="flex:1;max-width:100%;">
    <div class="row" style="flex:1;max-width:100%;">
      <div class="col-xl-3 col-md-6">
        <div class="input-group col-12">
          <div class="input-group-prepend w-50">
            <span class="input-group-text w-100">Significance (%)</span>
          </div><input id="sig" class="text-right w-50 form-control" name="sig" type="number" value="5">
        </div>
      </div>
      <div class="input-group-prepend stats1 col-xl-1 col-md-2">
        <span id="tit1" class="input-group-text w-100">Sample Size</span>
      </div>
...

JavaScript

$(function() {
  $("#var").select2({
    tags: true,
    theme: "bootstrap"
  });
})