1

mislignmentI have an alignment issue on a small screen. As you can see in the following code, on A SMALL SCREEN, the first row "anti cavity" fails to align because the contents have different lengths ("Regular with natural ingredients" takes two rows). Is there a way to resolves this?

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- Customized -->
    <link rel="stylesheet" href="style.css">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


<title>Choice</title>
</head>

<body>

<main role="main">

<div class="container" style="margin-top:30px; margin-bottom:30px">


<!--    <h4 align="center">Toothpaste 3 of 5</h4> -->

<p>Which of the following would you choose?</p>

<form name="cbc" method="post" action="">

<div class="container"><div class="row"><div class="col d-none d-md-block"><div class="container"><div class="row">&nbsp;<div class="col"></div></div><div class="row"><div class="col bg-light pt-1 pb-1">Anti-cavity</div></div><div class="row"><div class="col pt-1 pb-1">Tartar Protection</div></div><div class="row"><div class="col bg-light pt-1 pb-1">Sensitive Teeth</div></div><div class="row"><div class="col pt-1 pb-1">Whitening</div></div><div class="row"><div class="col bg-light pt-1 pb-1">Brand</div></div><div class="row"><div class="col pt-1 pb-1">Price</div></div><div class="row">&nbsp;<div class="col"></div></div></div></div><div class="col"><div class="container"><div class="row"><div class="col text-center">Toothpaste 1</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Anti-cavity</div>Extra with Fluoride</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Tartar Protection</div>No</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Whitening</div>Regular</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Brand</div>Sensodyne</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Price</div> $5</div></div><div class="row"><div class="col"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons"><label class="btn btn-outline-primary">
          <input type="radio" name="c" id="c" value="1" autocomplete="off" onclick="this.form.submit();"> CHOOSE
        </label></div></div></div></div></div><div class="col"><div class="container"><div class="row"><div class="col text-center">Toothpaste 2</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Anti-cavity</div>Regular with Natural Ingredients</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Tartar Protection</div>Yes</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Whitening</div>Extra Strength</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Brand</div>Arm & Hammer</div></div><div class="row"><div class="col  pt-1 pb-1"><div class="small text-secondary d-md-none">Price</div> $2</div></div><div class="row"><div class="col"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons"><label class="btn btn-outline-primary">
          <input type="radio" name="c" id="c" value="2" autocomplete="off" onclick="this.form.submit();"> CHOOSE
        </label></div></div></div></div></div></div></div><div class="mt-4"></div><div class="container"><div class="d-flex flex-row-reverse"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons" style="width:50%;"><label class="btn btn-outline-primary"><input type="radio" name="c" id="c" value="3" autocomplete="off" onclick="this.form.submit();"> NONE OF THE ABOVE
</label></div></div></div>
</form>
</div>
</main>

<!-- Footer -->
<div class="container top-margin:10px">
<footer>
</footer>
</div>
<!-- Footer -->

</body>
</html>

5
  • You might need to hack it with a media query. Find that div and add padding-bottom: 28px !important;. Otherwise, some sort of special grid/flex. Someone else will have to advise on that.
    – wazz
    Sep 20, 2020 at 16:24
  • I can think of one no-so-elegant solution by adding a bunch of &nbsp; to the short content. But I'm hoping for a better solution so that I don't have to tinker with content each time. Sep 20, 2020 at 16:35
  • Yeah don't do that. I think the only way is with a different kind of grid, but not my specialty. I think there might be something built-in to bootstrap for this. (?) Or make those 2 divs have a minimum height of whatever is needed for 2 lines. It will mean extra space for several entries, but it will fix it.
    – wazz
    Sep 20, 2020 at 16:38
  • Without completely redoing the html structure, I don't think there's a clean way without using js. Here's plugin you could use github.com/liabru/jquery-match-height
    – dantheman
    Sep 20, 2020 at 16:42
  • As far as the HTML and CSS is concerned they are two totally unrelated elements, so there is no easy way to match their heights. Without changing your structure the most common way would be to to use a short js script to make them equal heights. Sep 20, 2020 at 17:04

1 Answer 1

2

You cannot do that by placing 3 groups of rows side by side. They have no relation to each other. You must use a single group of rows with each row containing 3 columns.

Here's a working snippet. See in full page mode.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- Customized -->
    <link rel="stylesheet" href="style.css">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>


    <title>Choice</title>
</head>

<body>

    <main role="main">

        <div class="container" style="margin-top:30px; margin-bottom:30px">


            <!--    <h4 align="center">Toothpaste 3 of 5</h4> -->

            <p>Which of the following would you choose?</p>

            <form name="cbc" method="post" action="">

                <div class="container">
                    <div class="row">
                        <div class="col d-none d-md-block"></div>
                        <div class="col text-center">Toothpaste 1</div>
                        <div class="col text-center">Toothpaste 2</div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block bg-light pt-1 pb-1">Anti-cavity</div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Anti-cavity</div>Extra with Fluoride
                        </div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Anti-cavity</div>Regular with
                            Natural Ingredients
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block pt-1 pb-1">Tartar Protection</div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Tartar Protection</div>No
                        </div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Tartar Protection</div>Yes
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block bg-light pt-1 pb-1">Sensitive Teeth</div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes
                        </div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block pt-1 pb-1">Whitening</div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Whitening</div>Regular
                        </div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Whitening</div>Extra Strength
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block bg-light pt-1 pb-1">Brand</div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Brand</div>Sensodyne
                        </div>
                        <div class="col bg-light pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Brand</div>Arm & Hammer
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block pt-1 pb-1">Price</div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Price</div> $5
                        </div>
                        <div class="col  pt-1 pb-1">
                            <div class="small text-secondary d-md-none">Price</div> $2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-none d-md-block"></div>
                        <div class="col">
                            <div class="btn-group btn-group-toggle d-flex justify-content-center"
                                data-toggle="buttons"><label class="btn btn-outline-primary">
                                    <input type="radio" name="c" id="c" value="1" autocomplete="off"
                                        onclick="this.form.submit();"> CHOOSE
                                </label></div>
                        </div>
                        <div class="col">
                            <div class="btn-group btn-group-toggle d-flex justify-content-center"
                                data-toggle="buttons"><label class="btn btn-outline-primary">
                                    <input type="radio" name="c" id="c" value="2" autocomplete="off"
                                        onclick="this.form.submit();"> CHOOSE
                                </label></div>
                        </div>
                    </div>
                </div>
                <div class="mt-4"></div>
                <div class="container">
                    <div class="d-flex flex-row-reverse">
                        <div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons"
                            style="width:50%;"><label class="btn btn-outline-primary"><input type="radio" name="c"
                                    id="c" value="3" autocomplete="off" onclick="this.form.submit();"> NONE OF THE ABOVE
                            </label></div>
                    </div>
                </div>
            </form>
        </div>
    </main>

    <!-- Footer -->
    <div class="container top-margin:10px">
        <footer>
        </footer>
    </div>
    <!-- Footer -->

</body>

</html>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.