How to override bootstrap styles

---

Let’s just give an example directly, about how to override bootstrap styles:

The original code:

 <img src="…" class="img-rounded img-responsive" >

Now we need to have custom style for the image, some people just change Bootstrap style files directly, but that is a bad way. We should keep all Bootstrap styles, and find a way to override part of them.

For our case, we add a custom class name like below, our custom class name is in red color.

<img src="…" class="img-rounded img-responsive my-img-responsive" >

Now we can write our own CSS style for "my-img-responsive", for example:

img.my-img-responsive
{
    display: inline-block;
    max-width: 20%;
}