Topic: Fluid class for .svgs?

MWCCredit priority asked 5 years ago

Hello! I was wondering what the best practices were to replace a .jpg with a .svg using the 'fluid' class img-fluid class does not work with .svg. So replacing a img-fluid image results in the .svg parenting the to the upper-left hand corner and not scaling with   Thank you for your assistance

MWCCredit priority answered 5 years ago

Thank you Ollie.   The following style worked for me   .svg-container { display: inline block; position: relative height: 100%; width: 60%; padding-bottom: 20px vertical-align: middle; overflow: hidden; margin: auto; }    

Jakub Strebeyko staff answered 5 years ago

Hi there MWCCreadit, Did Ollie's answer help you? Best, Kuba

Ollie Vincent pro answered 5 years ago


The image-fluid class is


so could you not do something similar for svg's?

I have never tried it, I just use FontAwesome 5 :) (which are tehcnically svg's anyway).

I have also found that

svg{display:flex; justify-content:center; align-items:center;}

helps to centre them.




Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No