Handling Images in Bootstrap
Responsive image
Responsive images are crucial. Bootstrap's img-fluid class makes it easy. Apply it to any <img> element, and it will adjust to the viewport size, ensuring perfect scaling and consistent layouts across all devices and screen sizes.
Image thumbnails
Thumbnail images add a polished and elegant touch to your webpage's appearance. Bootstrap's img-thumbnail class provides rounded corners and subtle borders to ensure a clean and uniform look.
Image shapes
Why settle for boring rectangular images when you can add a dash of personality? Bootstrap offers classes for shaping images, including:
rounded: Soften the edges with rounded corners for a gentle touch;rounded-circle: Embrace the circle of life with perfectly rounded images;rounded-pill: Take things up a notch with pill-shaped images for a sleek and modern look.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Images Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Responsive Image -->
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-4/example-image.png"
class="img-fluid"
alt="Responsive Image"
/>
<!-- Thumbnail Image -->
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-4/example-image.png"
class="img-thumbnail"
alt="Thumbnail Image"
/>
<!-- Circular Image -->
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-4/example-image.png"
class="rounded-circle"
alt="Circular Image"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 4. Kapitel 2
