I have 3 divs that need to be displayed side-by-side and evenly distributed within the parent div width (which is set to 100% of the window). Whats the best way of doing it?

See example below which is just floating the 3 divs (which just places them one after the other to the left, not what I need).

PS: the list of options is dynamic, i.e. I might have more than 3 divs so the solution should ideally take that into account. Thanks! :)

PS 2: I am using bootstrap so if there is a good way of doing this using bootstrap I'm all for it.

```css
.row {
  width: 100%;
  background-color: #DDD;
}

.option {
  border: 1px solid #BBB;
  float: left;
  padding: 10px;
}
```

```html
<div class="row">

    <div class="option">
        Box A
    </div>
    <div class="option">
        Box B
    </div>
    <div class="option">
        Box C
    </div>

</div>
```