twitter-bootstraptwitter-bootstrap-3

How to put text underneath a navbar-brand in bootstrap?


Assuming I have a bootstrap 3 navbar with a navbar-brand containing text, how can I add a small subtitle that fits right underneath that navbar-brand?


Solution

  • This is one way of doing it:

    DEMO: http://jsbin.com/AFiNehIz/1/edit


    HTML

     <a class="navbar-brand" href="#">Project name<small>Tagline goes here</small></a>
    

    CSS

    .navbar-brand small {
      display:block;
      font-size:12px;
    }
    
    .navbar-toggle {top:10px}
    
    @media (min-width:768px) {
      
      .navbar-brand {
        padding-top:20px;
      }
      
      .nav.navbar-nav a {
        padding-top:30px;
        padding-bottom:30px;
      }
    
    }