How do I make this into 5 columns instead of 4 with one below?

Report · Jun 20, 2025

I am entirely self taught on the fly and trying to update part of our website. I need to make this section into either all 5 links on a single row or a into two rows with 3 in the first row and 2 on the second. I haven't the slightest clue what to do and googling blindly isn't working. Can someone please explain?

<p><a class="btn btn-sm btn-primary" href="#helenadistributor1">Distributors (A-E)</a></p>
					
								</aside>
							</div>
							<div class="col-md-3 col-sm-6">
								<aside class="aside-left">
					<p><a class="btn btn-sm btn-primary" href="international_distributor2.htm#helenadistributor2">Distributors (F-J)</a></p>
														<p><a class="btn btn-sm btn-primary" href="international_distributor5.htm#helenadistributor5">Distributors (T-Z)</a></p>
									
								</aside>
							</div>
							<div class="col-md-3 col-sm-6">
								<aside class="aside-right">
					<p><a class="btn btn-sm btn-primary" href="international_distributor3.htm#helenadistributor3">Distributors (K-P)</a></p>
									
								</aside>
							</div>
							<div class="col-md-3 col-sm-6">
								<aside class="aside-right">
					<p><a class="btn btn-sm btn-primary" href="international_distributor4.htm#helenadistributor4">Distributors (Q-S)</a></p>

I apologise in advance for how hideous this code is, as I said I know what I've figured out so far.

Report · Jun 20, 2025

I created the following without touching a single line of code:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
</head>

<body is="dmx-app" id="junk">
    <section>
        <div class="container">
            <div class="row row-cols-2 gy-3 gx-3 row-cols-sm-3 row-cols-lg-5 justify-content-around">
                <div class="col">
                    <a href="international_distributor2.htm#helenadistributor1" class="nav-link">Distributors (A-E)</a>
                </div>
                <div class="col">
                    <a href="international_distributor2.htm#helenadistributor2" class="nav-link">Distributors (F-J)</a>
                </div>
                <div class="col">
                    <a href="international_distributor2.htm#helenadistributor3" class="nav-link">Distributors (K-P)</a>
                </div>
                <div class="col">
                    <a href="international_distributor2.htm#helenadistributor4" class="nav-link">Distributors (Q-S)</a>
                </div>
                <div class="col">
                    <a href="international_distributor2.htm#helenadistributor5" class="nav-link">Distributors (T-Z)</a>
                </div>
            </div>
        </div>
    </section>
    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jun 21, 2025

You understand that <aside> is intended for ancillary content in sidebars.

There is a specific HTML tag to designate navigation menus -- <nav>.

Semantic HTML tags give meaning to content, which helps web browsers and screen readers correctly convey content to users.

For reference:

https://www.w3schools.com/html/html5_semantic_elements.asp

See Bootstrap <nav> menus below.

https://www.w3schools.com/bootstrap5/bootstrap_navs.php

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_nav&stacked=h

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 23, 2025

Thank you so much, I didn't understand that at all and was working from an existing webpage. Now I know where to start.