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:

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

However, I can't get them to be aligned (i.e. side by side). It produces the below effect:

Please note that I am using Bootstrap 3.

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

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.

Answer 3

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