How to round the corners of a card (body and image) in Bootstrap 4?

user_10261928 0
Viewed 34097

I'm trying to build a responsive web interface for a mock "recipe app". Currently im using bootstrap 4 and i'm having trouble with customizing my card element to match my wireframe.

Wireframe card: https://imgur.com/a/XQHaltk

Current card in browser: https://imgur.com/a/kqmBGq4

I've managed to "fix" the border radius of my card image with a custom css

.img-rounded{
    border-radius: 20%;
}

However, I still need to make my card element rounded (like the picture of the wireframe). What's the best way of doing this?

Card HTML:

<div class="card" style="width: 18rem;">
                <img src="./assets/img/1.jpg" class="card-img-top " alt="Jelo 1">
                <div class="card-body">
                    <h5 class="card-title text-center">Recipe name</h5>
                    <p class="card-text mb-4">Some quick example text to build on the Recipe name and make up the bulk of the card's content.</p>
                    <div class="container mb-2">
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Open</a>
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Edit</a>
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Delete</a>
                    </div>
                </div>
            </div>
css html
4 Answers

It is simple and can be achieved by simple CSS only. Just as you have added border-radius to the image you have to add the same to the parent element also which holds the content and images...

Let's say you have <div class="card">, inside it you have <div class="content">, and then you have your image, So kindly try adding the same border-radius to <div class="content"> as well. It should solve the problem for you.

user_136990270

You can just add the same rule border-radius: 20% to the card element.

user_107913910

Thank you! Adding border-radius: 20% helped!

user_102619280

Just add the same CSS border to both the classes i.e. <div class="card"> and <div class="content">

user_139821470
Related