title: Adding list item using jQuery and Bootstrap
body: <p>I had a simple to-do list app that worked fine, recently I overhauled the app using Bootstrap, before I wasnt using any css framework. Now the jQuery is not working properly... Why is this?</p>
  
  <p>Here is the relevent HTML:</p>
  
  <pre><code>&lt;div id="to-do"&gt;
      &lt;form class="form-inline"&gt;
          &lt;input class="form-control" type="text" id ="input" placeholder ="I need to..."&gt;
          &lt;button class="btn btn-primary" id ="add" type="submit"&gt;Add Item&lt;/button&gt;
  
      &lt;/form&gt;
  
      &lt;ul id="list"&gt;&lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my Javascript code: </p>
  
  <pre><code>$(function() {
  
  // configuration
  
  // button
  var add = $('#add');
  
  // list container
  var listContainer = $('#list');
  
  
  
  // click event for button
  
  add.on('click', function() {
  
  
      // value of input
      inputValue = $('#input').val();
  
      // add new list item
      listContainer.prepend('&lt;li&gt; ' + inputValue + '&lt;/li&gt;');
      // clear value input
      $('#input').val('');
  
  
  
  });
  </code></pre>
  
  <p>});</p>