Why bootstrap .img-circle, .img-rounded not working on codepan?

Why bootstrap .img-circle, .img-rounded not working on codepan?
0

#1

I am making my portfolio page on codepan. I am using bootstrap to make my image shape circle.

But it’s not working on codepan. Why?

<img src="https://i.imgur.com/w5umW2V.jpg" class="img-circle" width="260px" height="260px" alt="M Nazrul Islam">

Note: Codepan uses very recent version of bootstrap, bootstrap 4.

Please tell me if there’s any change in the framework or it is a problem inside codepan.


#2

@mnisalam, try using http instead of https, to prevent the mix content error or 403 status code from imgur.com site.

Try to leave out the protocol ( http / https)
<img src="//i.imgur.com/w5umW2V.jpg" class="img-circle" width="260px" height="260px" alt="M Nazrul Islam">
or
Try using http
<img src="http://i.imgur.com/w5umW2V.jpg" class="img-circle" width="260px" height="260px" alt="M Nazrul Islam">


#3

It is not working


#4

Can you share the link to your pen, so that I can have a look.


#5

have a look at your address bar of your browser - do you load http or https ? And you should not specify protocol. For example <img src='//wikipedia.org/someimage.jpg' />


#7

<img src="//i.imgur.com/w5umW2V.jpg" class="img-circle" alt="M Nazrul Islam"> at least the image displayed on codepen


#8

There is a very simple answer as to why .img-circle and .img-rounded aren’t working. It is because you are using Bootstrap 4, which changed a number of classes: https://v4-alpha.getbootstrap.com/migration/#images

Codepen recently switched to automatically adding Bootstrap 4 when you decide to add it through the dropdown.

.img-circle is now .rounded-circle.
.img-rounded is now .rounded.

I hope that helps!


#9

YES! this works…


#10

Hi, i had the same problem. I solved it changing in css configuration the url of bootstrap to : https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

Codepan uses bootstrap 4, has diferente sintaxys, and we’ve learned bootstrap 3.


#11

:slight_smile: I’ve set mine now. Thank you


#12

that just helped me so much, thank you!


#13

Why the PHUCK they change class name?