@import url('https://myfonts.com/css?family=Roboto&display=swap');
body {
background: #f1f2fa;
font-family: 'Roboto', sans-serif;
}
hr {
border: 2px solid #0b5ed7
}
.crd {
background: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.3s;
}
.card img {
margin: auto;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to Your Website</title>
<meta name="description" content="Create an amazing description for your site here." />
<link rel="stylesheet" href="/css/styles.css" />
<link href="https://cdn.example.com/bootstrap.css" rel="stylesheet">
<script src="https://cdn.example.com/bootstrap.js"></script>
<script src="/js/scripts.js" defer></script>
</head>
<body>
<!-- CLIENTS SECTION START -->
<section class="bg-dark text-center">
<div class="container">
<div class="row text-white py-5">
<h2 class="display-6">Join Our Community Today!</h2>
<div class="col-12">
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4">
<div class="card bg-light text-dark">
<img src="./images/profile.jpg" class="img-fluid rounded-circle mt-4" />
<div class="card-body">
<p class="lead text-center text-muted mt-4">Alice Smith</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS SECTION END -->
</body>
</html>
If you are experiencing trouble with applying a rounded circle around images in Bootstrap 5, ensure that the image source link and classes are correctly specified. Additionally, double-check the CSS styling for any conflicting rules that may affect the appearance.
For reference:
Current Image Look https://example.com/current-image.png
Desired Image Appearance https://example.com/desired-image.png
Code Snippets
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/styles/main.css" />
<link href="https://cdn.jsdelivr.net/npm/example/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/example/bootstrap.bundle.min.js"></script>
<script src="/scripts/main.js" defer></script>
</head>
[...]
Styles.css
@import url('https://fonts.myfont.com/css?family=Roboto&display=swap');
body {
background: #f1f2fa;
font-family: 'Roboto', sans-serif;
}
hr {
border: 2px solid #0b5ed7
}
.crd {
background-color: #f1f2fa;
transition: all 0.3s ease-in-out;
}
.crd:hover {
background-color: #0b5ed7;
color: white;
}
.card img {
display: block;
width: 50%;
height: auto;
}