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

Question

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?

Would you mind adding some code? http://bootply.com/new – Surjith S M Jan 16 '14 at 07:36 — Surjith S M, Jan 16 '14 at 07:36

score 5 · Answer 1 · answered Jan 16 '14 at 15:33

5

@cab's solution works, but here's another option that will not impact the height of the default navbar (due to increased padding):

.navbar-brand {
  line-height:12px;
  padding-top:20px;
  padding-bottom:5px;
}

.navbar-brand small {
  display:block;
  font-size:10px;
}

http://bootply.com/106312

answered Jan 16 '14 at 15:33

Carol Skelly

351,302
90
710
624

1

Keep _.navbar-brand_ with default configs and apply _.navbar-brand small_ style worked to me. – Nowdeen Aug 07 '16 at 13:34

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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;
  }

}

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

2 Answers2

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

Linked