CODEWITHSUNDEEP
twitter-bootstrap
b85411
b85411

Reputation: 10010

Aligning buttons using Twitter Bootstrap

I'm trying to get alignment working properly in Bootstrap. I've been looking at http://getbootstrap.com/css/#type-emphasis and I've also tried http://getbootstrap.com/components/#navbar-component-alignment but I just can't get the effect that I'm thinking of.

This is the code I'm using:

<h1>{% trans %} x {% endtrans %} <small>{% trans %} yw {% endtrans %}</small></h1>

<input class="form-control" type="text">
<button type="button" class="btn btn-primary custom-button-width">{{ icon('plus') }} {% trans %} z1 {% endtrans %}</button>
<button type="button" class="btn btn-warning custom-button-width .navbar-right">{{ icon('edit') }} {% trans %} z2 {% endtrans %}</button>
<button type="button" class="btn btn-danger custom-button-width .navbar-right">{{ icon('remove') }} {% trans %} z3 {% endtrans %}</button>

<br />
<br />

<table class="table table-hover">
...

An example of how this actually looks is below, as well as what I'm trying to achieve.

Example

Any ideas are appreciated - thanks.

Upvotes: 1

Views: 177

Answers (2)

chrisweb
chrisweb

Reputation: 1510

Skelly is correct, but if possible I prefer to solve such problems with twitter bootstrap built in features. The pull right helper class is very important here:

floats helper classes documentation: http://getbootstrap.com/css/#helper-classes-floats

The other twbs3 feature I often use is the grid system:

grid system documentation: http://getbootstrap.com/css/#grid

With both you can achieve this:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
        </div>
        <div class="col-md-6 col-sm-6 clearfix">
            <div class="pull-right">
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
            </div>
        </div>
    </div>
</div>

Here is the jsfiddle: http://jsfiddle.net/kY2cb/1/

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362380

Since you're using a custom-button-width class, you could also use a .custom-input-width class to set the width of the input. Then create 2 columns and right align the right side buttons...

.custom-input-width {
    width:150px;
    margin-right:3px;
}

Demo: http://bootply.com/ldT3sINLlz

Upvotes: 1

Related Questions