Posted September 10, 2013 by Gregory Guttmann
I'm a big fan Twitter Bootstrap and in September 2013, I converted the Sutro Software's existing blog posts to be compatible with Bootstrap. If you've already gotten your feet wet with Bootstrap, you probably already know of
the img-responsive class for image tags. It's a very nifty class that nicely resizes images for you depending on the screen width.
The problem is when you want to have some text flowing around the images and not use a grid layout. For an example take a look at Portals are Operating Systems and you see how the
text nicely flows around the images. In the original version of this site, we simply used
align="right" or align="left" on the image tag. Everything worked hunky dory until I inserted class="img-responsive". The img-responsive class would cause line breaks.
The simplest solution that I found was to create 2 simple CSS classes and then to have a <div> wrapper. First the CSS:
.figure-left {
max-width: 100%;
float: left !important;
}
.figure-right {
max-width: 100%;
float: right !important;
}
I also created a class for centering - it's a little more involved but feel free to check the source to for details.
You might be wondering why the CSS classes are using figure as part of their names, and the reason is that our blog posts now use the HTML5 figure tags. The HTML code that uses the CSS classes is simply:
<div class="figure-right">
<figure>
<a href=
"/content/blog/castles-in-the-air/assets/portal-magic-quadrant-2009.png"><img alt="Portal Magic Quadrant"
class="img-responsive" src=
"/content/blog/castles-in-the-air/assets/portal-magic-quadrant-2009.png"></a>
<figcaption>
Source: <a href=
"http://www.gartner.com/technology/media-products/reprints/microsoft/vol10/article2/article2.html">
Gartner</a>
</figcaption>
</figure>
</div>
We're expecting that search engines are going to start analyzing HTML5 tags like <figure> and Microdata to present search results in new creative ways, so preparing for the
future made sense as we refreshed our site.
If you're not ready for the <figure> tag yet, just leave it out and the CSS should still work fine. Hopefully this example will help you out whether you're creating a static site with Twitter Bootstrap or you're looking to create a brand new Bootstrap based theme for OpenText Portal / Web Experience Management / Tempo Social.
Happy coding!
-Greg