Ever wonder how to get an image to display as a circular shape rather than a square or rectangle?
Get the Bootstrap Framework Here
Here’s how!
We’re using the bootstrap “.img-circle” class: class = “img-circle”
In your HTML:
1. Put the path to your image where you want it to appear, and remember to add the bootstrap class “img-circle”:
<img src=”your_image_name.jpg” alt=”description here” class = “img-circle” class=”yourclassname”>
2. Download and save the bootstrap stylesheet- bootstrap.min.css -to your root directory.
3. Use CSS to make it circular and add other styling:
- Create a class name that makes sense to you and add that class to the image as well.
- Add some additional css to style it (border, margin, width, height). You can make the image more or less transparent, by using the “opacity” property and changing its’ value. See below-
.yourclassname {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
4. Using the same class, add other styling, for exampe, make a light gray border appear when the image is hovered.
.yourclassname:hover {
border-color: #f1f1f1;
}
n your HTML:
1. Put the path to your image where you want it to appear, and remember to add the bootstrap class “img-circle”:
<img src=”your_image_name.jpg” alt=”description here” class = “img-circle” class=”yourclassname”>
Other articles you might like:
-How your personal brand makes the difference
-Using images: Tips to improve your SEO rankings
-5 Tips to Stay Sane when Working from Home
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
