hidden attribute not working in bootstrap

Question

Code block originally...

<div class="content row">
  <img width="33%"  class="img-thumbnail img-rounded" src="foo">
  <img width="33%"  class=" img-thumbnail img-rounded" src="bar" >
  <img width="33%"  class=" img-thumbnail img-rounded" src="baz" >
</div>

Some Page DOM events after user requests change the HTML code block to...

<div class="content row">
  <img width="33%" class="img-thumbnail img-rounded center-block" src="foo">
  <img width="33%" class=" img-thumbnail img-rounded" src="bar"  hidden="">
  <img width="33%" class=" img-thumbnail img-rounded" src="baz" hidden="">
</div>

When the The page renders the hidden images are still displayed ? The images marked to be hidden don't get displayed, as expected, if img- classes are removed. But, I want the img- bootstrap classes.

How do I hide the images that are supposed to be hidden ?

PS- I am using Bootstrap 3.1.0

Answer 1

It would be

<div class="content row">
  <img width="33%" class="img-thumbnail img-rounded center-block" src="foo">
  <img width="33%" class=" img-thumbnail img-rounded hidden" src="bar">
  <img width="33%" class=" img-thumbnail img-rounded hidden" src="baz">
</div>

You may also refer to the Helper Class of Bootstrap to know about more similar classes