Dream weaver aligning grid

2 replies
162 views
Translate

I am trying to edit a grid of images in dream weaver. I can insert am image and edit the size but I cannot get all the squares to align. I do t. To understand tables.

This topic is closed to new replies. Start a new post to keep the conversation going.

BenPleysier

Community Expert

Copy and paste the following code into a new document and expreience the ease with which you can accomplish this without using tables.

(Code created by Wappler)

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 gx-3 gy-3">
            <div class="col">
                <img class="img-fluid" src="https://www.stevensegallery.com/640/360" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="https://placebear.com/640/360" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="https://www.fillmurray.com/640/360" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="https://placekitten.com/640/360" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="http://lorempixel.com/640/360/sports/" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="http://lorempixel.com/640/360/food/" alt="My Image">
            </div>
            <div class="col">
                <img class="img-fluid" src="http://lorempixel.com/640/360/nature/" alt="My Image">
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

The result for mobile: