Struggling to edit margin's between Divs (bootstrap)

HTML-CSS
1

So I’ve been trying to finally put together a personal site to host projects, and I’ve got a grid going with Bootstrap 5, and I’d like to reduce the space between my div’s, but I can’t get rid of or edit the margins / space between. The div itself that hosts the content is a certain width, but the container (col) div adds space between them.

I’m at a bit of a loss, here is the JSFiddle link

also here is the code, just CSS and HTML:


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CDN -->
    <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>test</title>
</head>

<body>
    <div class="container pt-5">
        <div class="row">
            <div class="col">
                <div id="container-migraine-dentistry">
                    <h5 id="site-description-header" class="text-light lead text-center">Put your chronic headaches
                        behind with
                        the
                        help of
                        the right
                        dentist.</h5>
                    <button id="view-website" class="btn btn-outline-primary">View Website</button>
                    <div id='migraine-dentistry' class="top"></div>
                </div>
            </div>

            <div class="col">
                <div id="container-migraine-dentistry">
                    <h5 id="site-description-header" class="text-light lead text-center">Put your chronic headaches
                        behind with
                        the
                        help of
                        the right
                        dentist.</h5>
                    <button id="view-website" class="btn btn-outline-primary">View Website</button>
                    <div id='migraine-dentistry' class="top"></div>
                </div>
            </div>

            <div class="col ">
                <div id="container-migraine-dentistry">
                    <h5 id="site-description-header" class="text-light lead text-center">Put your chronic headaches
                        behind with
                        the
                        help of
                        the right
                        dentist.</h5>
                    <button id="view-website" class="btn btn-outline-primary">View Website</button>
                    <div id='migraine-dentistry' class="top"></div>
                </div>
            </div>

        </div>
    </div>


</body>



#container-migraine-dentistry {
  border-radius: 10px;
  width: 384px;
  height: 255px;
  overflow: hidden;
  position: relative;
  background: #15253c;
  z-index: 2;
}

#container-migraine-dentistry:hover #migraine-dentistry {
  opacity: 0;
  transform: scale(1.2);
}

#container-migraine-dentistry:hover #view-website {
  opacity: 100;
}

#container-migraine-dentistry:hover #site-description-header {
  opacity: 100;
}

#migraine-dentistry {
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
  position: absolute;
  background: grey;
}

#view-website {
  color: white;
  border-radius: 20px;
  opacity: 0;
  position: absolute;
  top: 75%;
  left: 50%;
  transition: 0.3s ease-in-out;
  z-index: 1;
  transform: translate(-50%, -50%);
}

#site-description-header {
  font-size: 1.6rem;
  opacity: 0;
  width: 20rem;
  position: absolute;
  top: 35%;
  left: 50%;
  transition: 0.3s ease-in-out;
  z-index: 1;
  transform: translate(-50%, -50%);
}

I appreciate any help, usually I try not to post to often with questions I should be able to find online, but it’s been a few days and I’m very stuck!

2

I don’t think I’m understanding your problem correctly. Can you give a very specific description of what you are trying to do?

3

Using fixed-width elements and absolutely position elements is very likely to mess with the Bootstrap grid. Try to work with the grid, not against it. BTW, your ids should be classes.

Here is an example with some changes.
https://jsfiddle.net/3rd4wvp8/

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.