CODEWITHSUNDEEP
imagetwitter-bootstrap
Vahid Amiri
Vahid Amiri

Reputation: 11117

No img-responsive in Bootstrap 4

I just downloaded the source code for Bootstrap 4 alpha 2 and can't find the class img-responsive in it. It exists in Bootstrap 3 source code and I can find it with Notepad++ but in Bootstrap 4s bootstrap.css in dist folder it doesn't exist.

What happend to it??

Upvotes: 54

Views: 102567

Answers (7)

Alberto Favaro
Alberto Favaro

Reputation: 1842

You can also use .img-thumbnail that is the same of .img-fluid but also give an image a rounded 1px border appearance.

Look the result: Image thumbnails

Upvotes: 1

Anand Raja
Anand Raja

Reputation: 3108

Boostrap 4 is using .img-fluid class.

For more references Boostrap changes for image

Upvotes: 2

Tahir77667
Tahir77667

Reputation: 2512

Bootstrap 3: .img-responsive

Bootstrap 4: .img-fluid

As in Bootstrap 4 Images:

Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<img class="img-fluid" src="" alt=""> //This will make your image responsive

Upvotes: 22

Muhammadim Yusoff Jamaluddin
Muhammadim Yusoff Jamaluddin

Reputation: 55

In Bootstrap 4 you can use class="img-fluid".

This is the explaination:

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: >auto; are applied to the image so that it scales with the parent element.

This is the code as suggested: <img src="..." class="img-fluid" alt="Responsive image">

Upvotes: 3

Abdul Basit
Abdul Basit

Reputation: 84

Use img-fluid class instead of img-responsive

see docs

Upvotes: 2

Boxiom
Boxiom

Reputation: 2305

From the Bootstrap 4 documentation:

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Upvotes: 87

Arnab Chakraborty
Arnab Chakraborty

Reputation: 51

It seems you need to use a new class img-fluid instead of img-responsive if you are using Bootstrap 4 alpha 2. Have a look at : http://v4-alpha.getbootstrap.com/content/images/

Upvotes: 5

Related Questions