Code
.rounded
.rounded-circle
.img-thumbnail
.float-start
.float-end
.d-block .mx-auto
.img-fluid
Definitions
- Rounded
- ▪ Adds rounded corners (border-radius) to an image.
- Circle
- ▪ Shapes the image in a circle.
- Thumbnail
- ▪ Makes the image a thumbnail with a border.
- Float Start
- ▪ Aligns the image to the left.
- Float End
- ▪ Aligns the image to the right.
- Center
- ▪ Center an image by using changing the display to block and setting the horizontal margin to auto.
- Image Fluid
- ▪ Creates a responsive image that scales to the parent.
Key Points
-
.img-fluidsets the Max Width to 100% and the Height to Auto. - Remember to set the Width, Height and Alternate Text inside the <img> tag.
- For centering: make sure to add a Width; maybe use a Sizing Helper Class.
-
You can also use Text Alignment Classes, like
.text-center, on an images parent container to align images. -
Remember to use
.clearfixon the container when floating images.
Float Left
Left alignment is default. If you want to float the image due to other images,
add .float-start to your <img> element.
Center
Add d-block, .mx-auto and set a Width to your <img> element.
Alternatively, add .text-center to the parent container.
Align Right
Add .float-end to your <img> element.
Alternatively, add .text-end to the parent container.
Responsive Images