CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
TomSelleck
TomSelleck

Reputation: 6968

Trouble pulling button in btn-group to right

I have the following code which displays some buttons:

Fiddle

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li><a href="#">A</a>
            </li>
            <li><a href="#">B</a>
            </li>
        </ul>
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
    </div>
</div>

I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.

Any ideas appreciated!

Upvotes: 3

Views: 9892

Answers (3)

fitorec
fitorec

Reputation: 4795

In bootstrap 4 you can use the strong text class, check this simple example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="btn-group btn-group-lg float-right" role="group">
   <button type="submit" class="btn btn-dark">
	  Btn 1
   </button>
   <button type="submit" class="btn btn-primary">
	  Btn 2
   </button>
</div>

For more information check this documentation:

Upvotes: 0

m0bi5
m0bi5

Reputation: 9475

Updated HTML

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
            Configuration
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>

        <button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
             </div>
</div>

Updated CSS:

#b{
    width:100%;   
}
#right{
    float:right;
}

Working Example:http://jsfiddle.net/tmurmvnx/

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107606

I would put the close ("X") button in its own .button-group and pull the group to the right:

        <!-- previous button location -->
    </div><!-- close the existing group -->
    <div class="button-group pull-right">
        <!-- new button location -->
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
    </div>
</div><!-- end .btn-toolbar -->

Here's an update to your fiddle.

The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.

Upvotes: 4

Related Questions