How to left -align navbar-text?

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...

Abdoulie Kassama · Answer 1 · 2017-10-24T13:14:25.463

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

Yea, but what if I only wanted to link the icon, but not the page-title? As soon as I take "Wonderful page title" out of the `a`-tag, I have the same problem again! — MBaas, Oct 24 '17 at 12:00
Yes, that worked. But in my question I had that title in an `h1`-tag...and that destroys the formatting again! :( Fiddle: https://jsfiddle.net/mbaas/utfv82u6/ — MBaas, Oct 24 '17 at 12:51
@MBaas Ok, you can put the text in a span and apply css to that span. See my updated answer :-) — Abdoulie Kassama, Oct 24 '17 at 13:01

How to left -align navbar-text?

1 Answers1