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

Forum|Forum|7 months ago
June 20, 2025
2 replies
201 views

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.

Nancy OShea

Community Expert

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

R

rachel_7068Author

Participant

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

BenPleysier

Community Expert

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded