title: Name generator (JS) and Bootstrap
body: <p>I am working on a small website for me and some friends and want to put a name generator in it.
  I am using :</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;head&gt;
          &lt;title&gt;Donjons et Lardons&lt;/title&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet"&gt;
          &lt;meta charset="utf8"/&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;script src="script/script.js"&gt;&lt;/script&gt;
          &lt;script src="script/generator.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- HEADER --&gt;
  
      &lt;header&gt;
          &lt;h1&gt;Donjons et Lardons&lt;/h1&gt;
      &lt;/header&gt;
      &lt;p class="big"&gt;Parce que tout est bon dans un donjon&lt;/p&gt;
  
  
  &lt;!-- NAV --&gt;
  
  
  &lt;nav role="navigation" class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- The Collapsing items  --&gt;
      &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;&lt;span class="glyphicon glyphicon-fire"&gt; &lt;/span&gt; Héros&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="ludum.html"&gt;&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;  Ludum Chronologia&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="lardon.html"&gt;&lt;span class="glyphicon glyphicon-piggy-bank"&gt;&lt;/span&gt;  L'art du Lardon&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="coffre.html"&gt;&lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;/span&gt;  Le coffre à jouets&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;!-- SECTION --&gt;
  
  
   &lt;!-- &lt;p id="placeholder"&gt;
  
    &lt;/p&gt;
    &lt;button type="button" class="btn btn-warning"&gt;Rollin'&lt;/button&gt;
    &lt;script src="script/script.js"&gt;&lt;/script&gt;
    &lt;script src="css/style.css"&gt;&lt;/script&gt;
  --&gt;
  &lt;div class="container-fluid"&gt;
    &lt;section class="row form-group"&gt;
      &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-1"&gt;&lt;/div&gt; 
      &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"&gt;
        &lt;button type="button" class="dice-roll btn btn-danger"&gt;roll dice&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"&gt;      
        &lt;div id="dice-side-1" class="dice"&gt;0&lt;/div&gt;
        &lt;div id="dice-side-2" class="dice"&gt;0&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-md-3 col-sm-2 col-xs-1"&gt;&lt;/div&gt;  
    &lt;/section&gt;
  
    &lt;section class="row form-group"&gt;
        &lt;div class="col-md-4"&gt;&lt;/div&gt;  
        &lt;div class="col-md-4"&gt;
          &lt;h2 id="status"&gt;&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;/div&gt;
    &lt;/section&gt;
  
     &lt;section class="row form-group"&gt;
        &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-3"&gt;&lt;/div&gt;  
        &lt;div class="col-lg-4 col-md-5 col-sm-6 col-xs-6 text-center"&gt;
                &lt;button type="button" class="btn btn-danger"&gt;Besoin d'un nom ?&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="h2" class="col-lg-5 col-md-4 col-sm-4 col-xs-3"&gt;
          &lt;h2&gt;&lt;/h2&gt;
  
        &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- FOOTER --&gt;
   &lt;div class="footer navbar-fixed-bottom"&gt;
      &lt;footer&gt;
          &lt;p class="big"&gt;Surtout les moines ronchons&lt;/p&gt;
      &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The JS code of the name generator is from here: 
  <a href="https://jsfiddle.net/katowulf/3gtDf/" rel="nofollow noreferrer">https://jsfiddle.net/katowulf/3gtDf/</a></p>
  
  <p>I managed to put the button to ask a name, but nothing happen.</p>
  
  <p>The html content is in the last section in the "container-fluid".
  I linked to two JS files because I also have a dice generator and if I put both codes into the same file, the dice don't work.</p>
  
  <p>Is the code working or Bootstrap making it bug?
  Thank you for your help ;)</p>