How can I place three buttons in the same row at the left, middle and right in a fluid-width container?

Question

I'm using LESS in a Twitter Bootstrap environment, but I'd accept straight CSS answers as well.

| Fluid-width container                            |
|                                                  |
| [Btn1]               [Btn2]               [Btn3] |
|                                                  |

Another width:

| Fluid-width container                |
|                                      |
| [Btn1]         [Btn2]         [Btn3] |
|                                      |

Answer 1

In my opinion you can do this with a stock bootstrap environment like this:

<div class="row-fluid">
  <div class="span4 text-left"><a href="#" class="btn">Btn1</a></div>
  <div class="span4 text-center"><a href="#" class="btn">Btn2</a></div>
  <div class="span4 text-right"><a href="#" class="btn">Btn3</a></div>
</div>

This makes three <div>'s that span4 columns that make up the twelve column grid for bootstrap.

You don't need to add any extra CSS as those .text-left, right and center classes ship with bootstrap.

Answer 2

http://jsfiddle.net/GNPpX/1/

You can do this using floats

<div class='container'>
    <button id="btn1">one</button>
    <button id="btn2">two</button>
    <button id="btn3">three</button>
</div>


.container{
    width: 100%;
    float: left;
    border: solid 1px blue;
    text-align: center;
}
.container button{
    display: inline-block;
}
#btn1{
    float:left;
}
#btn3{
    float:right;
}

Answer 3

I reckon this might be the simplest way...

HTML

Note that the nested elements are inline elements

<div>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
</div>

CSS

div
{
    border: 1px solid lime;
    text-align: center;
}

span
{
    background-color: #ff8;
}

span:first-child
{
    background-color: #f8f;
    float: left;
}

span:last-child
{
    background-color: #8ff;
    float: right;
}

JSFiddle

http://jsfiddle.net/TUwek/

Answer 4

I don't know if it is exactly what you want, but using display: table; on the parent and display: table-cell on the children gives you such a rendering :

HTML :

<ul>
    <li class="left"><button>BTN1</button></li>
    <li><button>BTN2</button></li>
    <li class="right"><button>BTN3</button></li>
</ul>

CSS :

ul {
    display: table;
    width: 60%;
}
li {
    display: table-cell;
}
li.left {text-align: left;}
li.right {text-align: right;}

The Fiddle

Answer 5

I got it to work with the following:

<style>
    .center { text-align: center; }
    .right { text-align: right; }
</style>

<div class="row-fluid">
    <div class="span4"><button>One</button></div>
    <div class="span4 center"><button>Two</button></div>
    <div class="span4 right"><button>Three</button></div>
</div>

Answer 6

http://jsfiddle.net/feitla/yvXdc/1/

Here you go:

<div class="container">
    <div class="container-fluid full-width">
        <div class="row-fluid">
            <button class="btn pull-left">button 1</button>
            <button class="btn">button 2</button>
            <button class="btn pull-right">button 3</button>
        </div>
    </div>
</div>

.container {
   text-align:center;
} 
 button {
     display:inline-block;
}