Aligning Image
The .float-left and .float-right class is used to set the left and right alignment of the image.
Syntax:
<img src="image_source" class="float-left/float-right" ...>
Example: In this example we are using Bootstrap 4’s float-left and float-right classes to align images to the left and right sides, respectively, within the container.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Aligning Image</h2>
<!-- Bootstrap float-left class -->
<img class="float-left"
src=
"https://media.w3wiki.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
width="250"
height="250" />
<!-- Bootstrap float-right class -->
<img class="float-right"
src=
"https://media.w3wiki.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
width="250"
height="250" />
</div>
</body>
</html>
Output:
Aligning Image Example Output
Bootstrap 4 Images
Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts.
The different classes available in Bootstrap for images are explained below:
Table of Content
- Responsive Images
- Rounded Corners Image
- Circle Image
- Thumbnail Image
- Aligning Image
- Centered Image