Show text without link in navbar

0

According to the bootstrap documentation in the Text section, it says that you can display text in the navbar. I want to show two texts, but they are shown together, how can I give them a space?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
<span class="navbar-text">
	Año
</span>

</nav>
    
asked by Piropeator 08.05.2018 в 05:52
source

2 answers

1

You add between <span> and <span> a "Non-breaking space" also known as "Hard Space":

&nbsp;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
&nbsp;
<span class="navbar-text">
	Año
</span>

</nav>
    
answered by 08.05.2018 / 06:04
source
1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span class="navbar-text">
	Año
</span>

</nav>
    
answered by 08.05.2018 в 06:11