CODEWITHSUNDEEP
twitter-bootstrap
kkh
kkh

Reputation: 4869

Bootstrap two anchor tag side by side in one control group

I have two anchor tags side by side in a control group. I am using twitter bootstrap for this project. But these two anchor tags always overlap each other

My html is as below

<div class="control-group">
     <div class="controls">
          <a id="address" class=" pull-right update btn btn-inverse btn-medium push-top">Update</a>
          <a class="pull-right delete_add btn btn-inverse btn-medium push-top">Delete</a>
     </div>
</div>

Anyone can help me with this? Thanks!

Upvotes: 0

Views: 4489

Answers (1)

HaNdTriX
HaNdTriX

Reputation: 29816

The Problem is the pull-right-class. This class floats the two inline-boxes to the right.

You can solve the problem by adding a new class for aligning text elements to your CSS:

.align-right{
   text-align: right;
}

In your HTML-Code remove the pull-right-class and add align-right to your controls group. 

<div class="control-group">
     <div class="controls align-right">
          <a id="address" class="update btn btn-inverse btn-medium push-top">Update</a> 
          <a class="delete_add btn btn-inverse btn-medium push-top">Delete</a>
     </div>
</div>

http://jsfiddle.net/handtrix/FZZsu/

Upvotes: 1

Related Questions