How to make footer responsive with images - html

Question

I am working on a footer where I did use some images but the problem is I can not make images responsive.
I don't have enough experience in frontend if anyone can give an idea or little help will really appreciate. I use bootstrap.
Here is what I've tried so far.
HTML:
<div className="clearfix" />
<footer className="footer">
<div className="container-fluid">
<div className="text-left">
<img src="https://tssg.org/wp-content/uploads/2018/01/Irelands_EU_ESIF_2014_2020_en.png"
alt="European Structural and Investment Funds" />
<img src="https://tssg.org/wp-content/uploads/2018/01/european-union-logo.png"
alt="European Regional Development Fund" />
<img src="https://tssg.org/wp-content/uploads/2018/01/HEA_Grey.png"
alt="Higher Education Authority Ireland" />
<img src="https://tssg.org/wp-content/uploads/2018/01/EI.png"
alt="Enterprise Ireland Logo" />
<img src="https://tssg.org/wp-content/uploads/2018/01/sfi-logo.png"
alt="Science Foundation Ireland Logo" />
<span className="text-right">Copyright © 2019</span>
</div>
</div>
</footer>
</div>
CSS:
.footer {
bottom: 0px;
color: #272727;
text-align: center;
padding: 12px 30px;
position: absolute;
right: 0;
left: 200px;
//background-color: #f9f9f9;
border-top: 1px solid rgb(223, 223, 255);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
background-color: #ede9e9;
// background:#33444a;ede9e9
}
.footer img {
border: none !important;
width: auto !important;
max-height: 28px !important;
cursor: pointer;
}
.footer img:not(:last-child) {
margin-right: 50px ;
}

Answer 1

Couple of things:
You should use class="classes here" instead of className="classes here" in your HTML.
In your CSS add height:auto and max-width:100% to your .footer img class like so:
.footer img {
border: none !important;
width: auto !important;
height:auto;
max-width:100%;
max-height: 28px !important;
cursor: pointer;
}
That should make the images responsive.

Answer 2

Add class "img-responsive" for BootStrap 3 and Add class "img-fluid" for BootStrap 4.
Example:
<img src="https://tssg.org/wp-content/uploads/2018/01/sfi-logo.png" alt="Science Foundation Ireland Logo" class="img-responsive" />
Hope this helps.