SOLVED - Why is this bootstrap card misaligned?

Question

The image and text of this bootstrap card are supposed to be side by side, with the combo title + text centralized in relation to the image. But they are somewhat above the image.

Image of how it looks:

HTML:

<div class="card bg-transparent border-0 text-white mb-3" >
        <div class="row g-0">
          <div class="col-md-6">
            <img src="../assets/images/cp/sobre-cid-1.jpg" class="img-fluid rounded-start img-esq" alt="cid-1">
          </div>
         <div class="col-md-6">
            <div class="card-body">
                <h3 class="card-title">TITLE</h3>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>
        </div>
    </div>

CSS:

.img-fluid.rounded-start {
    height: calc(120px + 10vw);
    width: 90vw;    
    object-fit: cover;
}

.img-esq {
    border-radius: 0px 30px 30px 0px;
}

.img-dir {
    border-radius: 30px 0px 0px 30px;
}

.card-title {
    font-family: 'Martel';
    font-size: 22px;
    padding: 20px;
    text-align: left;
    font-weight: 600;
}

.card-title-right {
    font-family: 'Martel';
    font-size: 22px;
    padding: 20px;
    text-align: right;
    font-weight: 600;
}

.card-text {
    font-family: 'Martel';
    font-size: 14px;
    padding-left: 20px;
    padding-right: 30px;
    text-align: left;
}

.card-text-right {
    font-family: 'Martel';
    font-size: 14px;
    padding-left: 30px;
    padding-right: 20px;
    text-align: right;
}

Additional info: The card is inside a div that gets the entire page, this is it's CSS:

.bg {
    background-image: url(../images/cp/fundo.png);
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
    margin-top: 0px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

I mostly looked for margins and paddings. I tried changing padding-top and margin-top to zero, I even looked for this in the item above the bootstrap card, but nothing helped, there was only a br tag between the item above the card and the card itself. I also looked for a margin in the card and everything seems right.

EDIT 1:

I added to .row a display: flex and align-items:center, it is not perfectly centered but maybe I can use it, but there's still a big space in between each card:

EDIT 2:

I added to .row a margin-top: -80px and now the space between cards is good. Not the perfect solution I think but works for now.

To make the text vertically centered in relation to the image, I added margin-top: 60px to the cards' titles, and it pushed them down. Again, not perfect but works for now.

EDIT 3:

I fixed it. The problem was in a part of the CSS code I didn't know influenced the whole page. It was like this:

img {
    width: 70%;
    height: auto;
    margin-top: 15%;
}

I thought it would only influence the class that was above it. Turns out, it influenced all the img tags.

I found out by deleting part by part of the CSS code in Codepen.

if .row is display:flex. add style align-items: center to class row to make it align center vertically. — ahmed moeed, Jan 22 '23 at 03:39
Thank you! It's not perfectly centered as I imagined but maybe I can use it. I added an image of the result to the end of the question. There's still a big space between cards. Any ideas? — user92837, Jan 22 '23 at 04:36
I added to `.row` a `margin-top: -80px` and now it's good. Not perfect but works for now — user92837, Jan 22 '23 at 04:46
you should add code in Codepen or somewhere so people here can help you better. — ahmed moeed, Jan 22 '23 at 04:47
Add margin is not a good way. you should look for better approach — ahmed moeed, Jan 22 '23 at 04:48
I tried to put the code in Codepen but the code appeared fixed in there, without big spaces. So I figured the problem was in another part of the code. I pasted the entire page in there and deleted part by part to figure out which one was causing the problem, and was finally able to find it. Thanks to your idea. Thank you, have a great day! — user92837, Jan 22 '23 at 06:30

score 1 · Answer 1 · answered Jan 22 '23 at 04:11

1

The problem may be caused by the calc() function in the height property for the img-fluid.rounded-start class. This function calculates the height of the image based on the size of the viewport, which could be causing the image to be larger or smaller than expected. Try to set fixed values to it.

Also, you can try and use align-items: center in the .bg class, this should align the elements at the center of the div.

answered Jan 22 '23 at 04:11

Jeffuy

36
3

I really appreciate it, but I tried and it didn't work. I figured the issue was in another part of the code that I didn't even post in here by using Codepen. – user92837 Jan 22 '23 at 06:32

SOLVED - Why is this bootstrap card misaligned?

1 Answers1