Bootstrap 5 Images Aligning Images
Last Updated :
18 Nov, 2022
Bootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images.
Aligning Images used Classes:
- .float-start: This class is used to set the position of an element to left.
- .float-end: This class is used to set the position of an element to right.
- .float-none: This class is used to set the position of an element to none.
- .text-start: This class is used to set the position of the text element to left.
- .text-center: This class is used to set the position of the text element to the center.
- .text-end: This class is used to set the position of the text element to right.
- .mx-auto: This class is used with .d-block class to set the position of the element to the center.
Syntax:
// Float utility class
<img src="..." class="rounded float-*" alt="...">
// Text align utility class
<div class="text-*">
<img src="..." class="rounded" alt="...">
</div>
// mx-auto margin utility class
<img src="..." class="rounded mx-auto d-block" alt="...">
Example 1: In this example, we will use .float-start and .float-end classes to set the image alignment.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images Aligning Images</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Images Aligning Images</h2>
<img src=
class="rounded float-start" alt="GFG">
<img src=
class="rounded float-end" alt="GFG">
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use .text-start, .text-center, and .text-end classes to set the image alignment.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images Aligning Images</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Images Aligning Images</h2>
</div>
<div class="text-start">
<img src=
class="rounded" alt="GFG">
</div>
<div class="text-center">
<img src=
class="rounded text-end" alt="GFG">
</div>
<div class="text-end">
<img src=
class="rounded text-end" alt="GFG">
</div>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will use .mx-auto and .d-block classes to set the image alignment.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images Aligning Images</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Images Aligning Images</h2>
</div>
<img src=
class="rounded mx-auto d-block" alt="GFG">
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/content/images/#aligning-images
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...