Text next to brand

Question

How do I get the Bootstrap Brand and any accompanying text to be treated together as the brand?

I have tried this:

Answer 1

Wrap the image in a span

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span><img src="#"/></span>
            Ultimate Trade Sizer
        </a>
    </div>
</nav>

span defaults to display: inline

Answer 2

Not sure if this is correct html but I wrapped the image and text in a new div class and floated that left. Also changed the img to the new class with some padding on the right to space it from the text. Seemed to work for me but I am pretty new to bootstrap so it might not be exactly right. Your code would look like this.

html

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <div class="navbar-brand-name">
                <img src="#"/>
                     Ultimate Trade Sizer
            </div>
        </a>
    </div>
</nav>

add the new css class under the .navbar-brand class

.navbar-brand-name > {

  display: inline-block;
  float: left;

}

.navbar-brand-name > img {
  display: inline-block;
  float: left;
  padding: 0 15px 0 0;
}

Answer 3

This is happening because the img-responsive class has display:block. In this case I'm not sure you need that class for the image you are displaying since it is already quite small and not likely to run into issues with needing to be responsive.

Alternatively, you could override img-responsive in this instance to display:inline-block and also have your h3 be have display:inline-block as well.

Answer 4

The correct solution would be to use navbar-text on the h3 and not to use any additional div or span elements:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="...">
                <img class="img-responsive" src="/brand.png">">
            </a>
            <h3 class="navbar-text">Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

See http://getbootstrap.com/components/#navbar-text for the proper documentation of navbar-text.