htmlbootstrap-5gutter

Bootstrap 5: Add gutter between rows

I'm trying to add a vertical gutter between two rows using Bootstrap 5. But as you can see in the jsfiddle, there is no gutter. Does somebody know what is wrong here?

https://jsfiddle.net/re4879wt/

As far as I understand gutters (https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters) can be added to a .row using g-* or gy-*. None of both works in my case.

Solution

  • You have two div with gy-3 that is needed. put them together:

     <div class="row gy-3">
        <div class="col-12">
            First part
        </div>
        <div class="col-12">
            second part
        </div>
    </div>


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

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

    <title>Hello, world!</title>
</head>
<body>
    <h1>Devices Demo!</h1>

    <div class="container overflow-hidden">
        <div class="row gy-3">
            <div class="col-12">
                <ul id="device-list" class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>

            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        Add new device
                    </div>
                    <div class="card-body">
                        <form>

                            <div class="row mb-3">
                                <label for="deviceName" class="form-label col-sm-2">Device Name</label>
                                <input type="name" class="form-control col-sm-10" id="deviceName" placeholder="Network Switch">
                            </div>

                            <button type="submit" class="btn btn-primary">Sign in</button>

                        </form>
                    </div>
                </div>
            </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>