What's the correct way to size an iframe in a Twitter bootstrap fluid layout?

Question

I have a 2-column fluid Twitter bootstrap layout, and want an iframe in one of the panes (it will contain the Google tasks widget -- https://mail.google.com/tasks/ig). How do I set the width properly? I figured out how to set the style so it has a border (to distinguish it as external page content), but I can't make it fill one of the columns properly. This is what I currently have:

      <iframe class="container well well-small"
          style="width: 80%; height: 400px; background-color: #f5e5c5;"
          src="https://mail.google.com/tasks/ig">
      </iframe>

Full example (save as an HTML file): http://pastebin.com/1u2QeuZk

Answer 1

Use the row-fluid class to define a row, and spanX classes to define columns. Like so:

<div class="row-fluid">
   <iframe class="container well well-small span6"
           style="height: 400px; background-color: #f5e5c5;"
           src="https://mail.google.com/tasks/ig">
   </iframe>
</div>

However: The Xs in the spanX need to add up to 12 for each row. So in the above example you would need to wrap the content of the other column in a tag with a span6 class as well, or you can use the offset6 class on the iframe if it is the only content on that particular row in order to make it align to the right.

To have one column be wider than the other you can change it up by changing the X in spanX, just make sure they add up to 12 for a row.

In case you were wondering how to make a column a specific width: The whole point of a fluid grid is to not use specific widths. You set the width of the container (preferably with relative units as well, in order for the content to adapt to the size of the viewport), and each column will be 1/12th the width of the container. So if you do want to control the width exactly, then you could always make the container a specific width so that the column you want can have a width that's a multiple of 1/12th the container's width. I.e. if you want the column to be 400px wide you could make the container 800px wide and use the class span6 on the column. Or use span3 to make it 200px wide etc.

I's all explained very well in the docs: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem