HTML Bootstrap Start a new line - html

Question

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php"><span class="logo_main">test1</span>
<span class="logo_sub d-none d-md-block ">test2</span>
<span class="logo_main d-none d-md-block ">Test3</span></a>
</nav>
</header>
Now, I'm doing web design using bootstrap4. But, there's a mysterious bug.
I want to put test2 part and test3 part right after test1 and test2.
But Starting a new line occurs.
How should i do that?

Answer 1

First, note that you have the .d-none class on your test2 and Test3 elements, which hides their display. I assume you'll want to remove this, so I've done so in my examples.
Simply removing .d-none from these two elements causes all three elements to display next to each other, which sounds like what you want:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php">
<span class="logo_main">test1</span>
<span class="logo_sub d-md-block ">test2</span>
<span class="logo_main d-md-block ">Test3</span>
</a>
</nav>
</header>
If instead you actually want to 'create' a new line, so that test2 is below test1, simply make use of <div> elements instead of <span> elements:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php">
<div class="logo_main">test1</div>
<div class="logo_sub d-md-block ">test2</div>
<div class="logo_main d-md-block ">Test3</div>
</a>
</nav>
</header>
Also note that your <a> tag wraps all three elements in your example. This will cause all three elements to point to the same location. If you want them to point to different locations, you'll want to close the tag after each element, and open a new <a> tag for the proceeding elements.

Answer 2

Try closing the test1 class after test 3