CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
rkrauter
rkrauter

Reputation: 1169

Table cell align content right using bootstrap

In the table below, I have two rows. In the first row, second cell, I have two buttons. How can I get these buttons to be right aligned using Twitter Bootstrap The buttons should not stack on top of one another if I shrink the table. They should always be side by side.

[     ] [[button1] [button2]           ]
[     ] [                              ]

Example: http://www.bootply.com/MycjXnp9wp. The buttons should be right aligned in the cell A failed attempt: http://www.bootply.com/4hkmjHCCOq

This shows the output I am expecting. http://www.bootply.com/tYzdIu13M8 I would rather use the bootstrap way than the nested table technique.

Upvotes: 0

Views: 260

Answers (1)

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

To align the buttons right, bootstrap gives us the .pull-right classe :

    <td class="col">
      <div class="pull-right"><a href="test.html" class="btn btn-primary btn-block">Go here</a></div>
      <div class="pull-right"><a href="test.html" class="btn btn-primary btn-block">Go here</a></div>
    </td>

And we should use display:inline-flex; on the .col class to make the two buttons aligned always even after shrinking the table.

.col{
    display:inline-flex;
    float:right;
}

Here's a JSFiddle

Upvotes: 1

Related Questions