title: How to implement Bootstrap styling into dynamically created elements?
body: <p><strong>Question:</strong> I am trying to create new HTML elements dynamically, but the 'pre-made' bootstrap styling isn't rendering on the elements. Why would this be the case?</p>
  
  <p>The elements are loading on the page, but they are just bland HTML elements. </p>
  
  <p><strong>ATTEMPTS:</strong> I have read the other forums, but surely there are other ways that don't involve hard-coding the actual bootstrap style attributes as CSS? Otherwise, I have seen some solutions that simply '.append()' the whole element they want, but I would like to know why my code doesn't work. </p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/album/"&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="dashboard.css" rel="stylesheet"&gt;
      &lt;link href="tail.select-default.css" rel="stylesheet"&gt;
  
      &lt;style&gt;
          .bd-placeholder-img {
              font-size: 1.125rem;
              text-anchor: middle;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
          }
  
          @media (min-width: 768px) {
              .bd-placeholder-img-lg {
                  font-size: 3.5rem;
              }
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;main role="main"&gt;
          &lt;div class="album py-5 bg-light"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row" id = "row"&gt;
    &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/main&gt;
  
      &lt;footer class="text-muted"&gt;
          &lt;div class="container"&gt;
              &lt;p class="float-right"&gt;
                  &lt;a href="#"&gt;Back to top&lt;/a&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          window.jQuery || document.write('&lt;script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"&gt;&lt;\/script&gt;')
  
      &lt;/script&gt;
      &lt;script src="dashboard.js"&gt;&lt;/script&gt;
      &lt;script src="tail.select-full.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          tail.select('#select2', {
              search: true,
              descriptions: true,
              hideSelected: true,
              hideDisabled: true,
              multiShowCount: false,
              multiContainer: true
          });
      &lt;/script&gt;
  
      &lt;script src="bootstrap.bundle.min.js"&gt;&lt;/script&gt;   
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>An example of the HTML I want to implement:</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
      &lt;div class="card mb-4 shadow-sm"&gt;
          &lt;svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"&gt;
              &lt;title&gt;Placeholder&lt;/title&gt;
              &lt;rect class='rect' width="100%" height="100%" fill="#55595c" /&gt;
              &lt;text x="50%" y="50%" fill="#eceeef" dy=".3em"&gt;Thumbnail&lt;/text&gt;
          &lt;/svg&gt;
          &lt;div class="card-body"&gt;
              &lt;p class="card-text"&gt;Project1&lt;/p&gt;
              &lt;div class="d-flex justify-content-between align-items-center"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript file: (I first grab some info from a database before creating the new elements, so you can skip over the first bits)</p>
  
  <pre><code>var svg_width = '100%';
  var svg_height = '225';
  var svg_xmlns = "http://www.w3.org/2000/svg";
  var svg_AspectRatio = "xMidYMid slice";
  var svg_focusable = "false";
  var svg_role = "img";
  var svg_label= "Placeholder: Thumbnail";
  
  $(document).ready(function() {
      console.log("ready!")
  
      //getting all of the data from the index
      $.getJSON("http://localhost:9200/demo/_search?q=*", function(data){
  
          //getting the total number of hits
          var totalHits = data.hits.total;
          var arrayHits = data.hits.hits;
  
          //console.log(data)
          //console.log(arrayHits)
  
          console.log(totalHits)
          if (totalHits != 0 ) {
  
              //getting the length of the arrat for the for loop
              var arrayLength = arrayHits.length;
  
              //starting the for loop
              for (var i = 0; i &lt; arrayLength; i++) {
                  console.log(arrayHits[i])
  
                  //getting the required variables
                  var uuid = arrayHits[i]['_id'];
                  var title = arrayHits[i]['_source']['title'];
                  var firstName = arrayHits[i]['_source']['firstName'];
                  var lastName = arrayHits[i]['_source']['lastName'];
                  var importance = arrayHits[i]['_source']['importance'];
                  var description = arrayHits[i]['_source']['description'];
  
                  // creating the actual elements now
                  var d2 = document.createElement('div');
                  d2.className= 'col-md-4';
  
                  //appending what we have made to the pre-existing HTML
                  document.getElementById("row").appendChild(d2);
  
                  var d3 = document.createElement('div');
                  d3.className = 'card mb-4 shadow-sm';
  
                  var svg1 = document.createElement('svg');
                  svg1.className = 'bd-placeholder-img card-img-top';
                  svg1.setAttribute('width',svg_width);
                  svg1.setAttribute('height',svg_height);
                  svg1.setAttribute('xmlns',svg_xmlns);
                  svg1.setAttribute("preserveAspectRatio",svg_AspectRatio);
                  svg1.setAttribute('focusable',svg_focusable);
                  svg1.setAttribute('role',svg_role);
                  svg1.setAttribute('aria-label',svg_label);
  
                  var t1 = document.createElement('title');
                  t1_text = document.createTextNode('Placeholder');
  
                  var rect_text_group = document.createElement('g');
  
                  var rect = document.createElement('rect');
                  rect.setAttribute('width','100%');
                  rect.setAttribute('height','100%');
                  rect.setAttribute('fill','#55595c');
  
                  var rect_text = document.createElement('text');
                  rect_text.setAttribute('x','50%');
                  rect_text.setAttribute('y','50%');
                  rect_text.setAttribute('fill','#eceeef');
                  rect_text.setAttribute('dy','.3em');
  
                  var rect_text_text = document.createTextNode("Thumbnail");
  
                  var d4 = document.createElement('div');
                  d4.className = "card-body";
  
                  var p1 = document.createElement('p');
                  p1.className = 'card-text';
                  var p1_text = document.createTextNode(title)
  
                  var d5 = document.createElement('div');
                  d5.className = "d-flex justify-content-between align-items-center";
  
                  var d6 = document.createElement('div');
                  d6.className = "btn-group";
  
                  //defining the two buttons
                  var btn1 = document.createElement("button");
                  btn1.className = "btn btn-sm btn-outline-secondary";
                  btn1.setAttribute('type','button');
                  var btn1_text = document.createTextNode('View');
  
                  var btn2 = document.createElement("button");
                  btn2.className = "btn btn-sm btn-outline-secondary";
                  btn2.setAttribute('type','button');
                  var btn2_text = document.createTextNode('Edit');
  
                  var small = document.createElement('small');
                  small.className = 'text-muted';
                  var small_text = document.createTextNode('9 mins');
  
                  //append child bits
  
                  d2.appendChild(d3);
  
                  d3.appendChild(svg1);
                  svg1.appendChild(t1);
                  t1.appendChild(t1_text);
                  svg1.appendChild(rect_text_group);
                  rect_text_group.appendChild(rect);
                  rect_text_group.appendChild(rect_text);
                  rect_text.appendChild(rect_text_text);
                  //rect_text.appendChild(rect_text_text);
  
                  d3.appendChild(d4);
                  d4.appendChild(p1);
                  p1.appendChild(p1_text);
  
                  d4.appendChild(d5);
                  d5.appendChild(d6);
  
                  d6.appendChild(btn1);
                  btn1.appendChild(btn1_text);
                  d6.appendChild(btn2);
                  btn2.appendChild(btn2_text);
  
                  d4.appendChild(small);
                  small.appendChild(small_text);
  
              }   
          } else {
              console.log('Nothing in the database')
          }
      });
  });
  </code></pre>
  
  <p>Expected: styled
  Reality: just bare-bones HTML</p>