title: Bootstrap navbar brand can't place text on two lines and be responsive
body: <p>I have designed a responsive bootstrap page, but when I tried to make it with code at the start (the navbar) I stucked. I have placed two lined text in the "a.navbar-brand", but it wouldn't center vertically and responsively. As I was searching for an answer there seemed to be nobody making it in a way, that it would work for me. I am looking for an answer, which is not made with paddings and margins, but with some responsive code. Please if anyone could tell me how to do that.</p>
  
  <p>Here is my .png version of the navbar:
  <a href="http://prikachi.com/images/513/8126513m.png" rel="nofollow">Initial one</a></p>
  
  <p>And here is what I get with my code:
  <a href="http://prikachi.com/images/515/8126515p.png" rel="nofollow">Made with code</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;nav class="navbar navbar-default"&gt;
     &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
       &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;a class="navbar-brand" href="#"&gt;KrasiStoyanov &lt;small&gt;Front End Developer&lt;/small&gt;&lt;/a&gt;
      &lt;/div&gt;
      
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;    
       &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/nav&gt;
   &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
    font-family: 'jaapokki_enchanceregular';
    src: url('type/jaapokkienchance-regular-webfont.eot');
    src: url('type/jaapokkienchance-regular-webfont.eot?#iefix') format('embedded-opentype'), url('type/jaapokkienchance-regular-webfont.woff2') format('woff2'), url('type/jaapokkienchance-regular-webfont.woff') format('woff'), url('type/jaapokkienchance-regular-webfont.ttf') format('truetype'), url('type/jaapokkienchance-regular-webfont.svg#jaapokki_enchanceregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    background-color: #f2f2f2;
    font-family: 'Century Gothic';
    font-size: 16px;
  }
  header {
    width: 100%;
  }
  header nav.navbar {
    width: 100%;
    height: 100px;
    border: 0;
    border-radius: 0;
    background-color: #54c0b0;
  }
  header nav.navbar div.container-fluid {
    width: 72%;
    height: 100%;
  }
  header nav.navbar div.container-fluid div.navbar-header {
    font-family: 'jaapokki_enchanceregular';
  }
  header nav.navbar div.container-fluid div.navbar-header a.navbar-brand {
    line-height: 1;
    color: #ffffff;
    font-size: 1.500em;
    text-transform: uppercase;
  }
  header nav.navbar div.container-fluid div.navbar-header a.navbar-brand small {
    display: block;
    font-size: 0.650em;
    font-family: 'Century Gothic';
    text-transform: capitalize;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code. Please anyone.. help me.</p>