<br> in HTML - can't remove

Bootstrap Studio Help
1

So, I introduced a pesky line break into a Navigation section. I can see it in the HTML, and that area does not let me delete it. In the work area of Bootstrap Studio, it deletes the first link on the following line.

Ideas - I see this was discussed in the forum in 2021 (Windows issue?) I should be able to delete a Shft-Enter during the creation process.

2

Correction - it is a Paragraph item with links added.

3

From that other discussion, I used the add SPAN in the area I had the
and was able to remove it - but this has to be a bug - right?

4

Sorry - I probably should have started the conversation with this:

I am trying to control a series of links in a navigation (paragraph with link items) bar so that when it is seen at XS or SM the paragraph has two lines to control the layout of the links. And then on a single line for all other sizes.

How is this done - Media Query seems to not allow this, or does it? Or is there a better component for this?

Thanks
-K

5

You can use a single list and leverage Bootstrap’s grid or flex utilities to adjust the layout based on screen size.

For example, if your goal is to display two links per row on small screens and four links in one row on larger screens, you can do something like this:

<nav>
	<ul class="list-unstyled row">
		<li class="col-6 col-md-3">
			<a class="m-1" href="#">Link2</a>
		</li>
		<li class="col-6 col-md-3">
			<a class="m-1" href="#">Link2</a>
		</li>
		<li class="col-6 col-md-3">
			<a class="m-1" href="#">Link3</a>
		</li>
		<li class="col-6 col-md-3">
			<a class="m-1" href="#">Link4</a>
		</li>
	</ul>
</nav>

Bootstrap’s grid system is based on 12 columns, so the idea is to divide 12 by the number of items you want per row. In the example above with 4 links, we used col-md-3 since 12 ÷ 4 = 3.

For 6 Links
One Row on Larger Screens:
If you want all 6 links in a single row on medium screens and up, each link should take up 12 ÷ 6 = 2 columns. For example:

<nav>
  <ul class="list-unstyled row">
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link1</a></li>
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link2</a></li>
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link3</a></li>
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link4</a></li>
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link5</a></li>
    <li class="col-6 col-md-2"><a class="m-1" href="#">Link6</a></li>
  </ul>
</nav>

If you’d prefer the 6 links to wrap into 2 rows on larger screens (say, 3 links per row), then each link should span 12 ÷ 3 = 4 columns:

<nav>
  <ul class="list-unstyled row">
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link1</a></li>
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link2</a></li>
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link3</a></li>
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link4</a></li>
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link5</a></li>
    <li class="col-6 col-md-4"><a class="m-1" href="#">Link6</a></li>
  </ul>
</nav>

You do the math for other counts of links

6

Thank you for this solution - I am going to give it a try. I will report back either way, works or I hit a wall. BTW math is not my favorite thing in the world, Photoshop, now that is more my jam!

7

Is it possible to use this same technique for two lines of text on a smaller screen that becomes a single line on larger screens? I have a notice that is breaking at an inappropriate location on the phone sized screen. If so, quick comment as to process?

8

Block-level elements, such as the <h1>–<h6> elements or <p>, will span two or more lines when their content does not fit within the parent element. Therefore, no additional technique is required.