Bootstrap - nav tag

Bootstrap - nav tag
0.0 0

#1

Why aren’t the navigation elements displayed horizontally instead of vertically? Here is the code:

<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Skillfare</h1>
    <nav class="col-sm-8 text-right">
      <p>newest</p>
      <p>catalogue</p>
      <p>contact</p>
    </nav>
  </div>
</header>

#2

You did not post your CSS, but newest, catalogue, and contact will be on separate lines, because the default style for a p element has the display property set to block. You could change that by creating specifying a value of inline-block for the display property in your CSS.

P.S. - I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

thank you…i tried making them links and they are displayed in one line…

<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Skillfare</h1>
    <nav class="col-sm-8 text-right">
      <a href="#">newest</a>
      <a href="#">catalogue</a>
      <a href="#">contact</a>
    </nav>
  </div>
</header>

#4

That will work also.


#5

thank you also for the explanation on how to paste the code…