How to left -align navbar-text? - twitter

Question

I am attempting to build a small page with BS4 (beta2).
<nav id="TOP" class="navbar navbar-light">
<span id="banner-logo" class="navbar-brand">
<span class="fa fa-bath fa-5x"></span>
</span>
<span id="banner-heading" class="navbar-text"><h1>
Wonderful page-title
</h1>
</span>
</nav>
(There also is a fiddle here)
Somehow I am missing something in the construction of the nav: I'd like to the #banner-heading-element to be left-aligned, next to the icon. Why is that not working?
EDIT: I noticed that it works if I put the nav into a - but the BS-Examples all do not do that, so something else must be wrong...

Answer 1

I haven't work much with bootstrap 4 beta before but I don't believe you are doing it right, just took a quick look at the documentation here,
Navbar are formatted like:
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<span class="fa fa-bath fa-3x"></span>
Wonderful page-title
</a>
</nav>
And you can but your menu and content in a container.
<div class="container">
<div class="row">
<div class="col-md-3">
My little menu
</div>
<div class="col-md-9">
Main content area, 9 cols wide
</div>
</div>
</div>
See fiddle
EDIT
To #Mbaas's comment, if you want the icon to be the link and not the text, use li and put the anchor tags around the icon.
<nav class="navbar navbar-light bg-light">
<li class="navbar-brand">
<a href="#">
<span class="fa fa-bath fa-3x"></span>
</a>
Wonderful page-title
</li>
</nav>
You can remove the underline hover of the link by applying css like:
.navbar-brand a{
text-decoration: none;
}
To make the text large as a h1 tag you can put it in a span with a class and apply css to it like:
<span class="bold-text">
Wonderful page-title
</span>
And the css for bold-text could be something like:
.bold-text{
font-weight:bold;
font-size: 40px;
}
fiddle