CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Timo.Klement
Timo.Klement

Reputation: 637

Bootstrap 3 use 'btn-group' and align

I appreciate the new Bootstrap 3 but ... I created a table with 5 columns. The last 3 columns contain 2 x 'a href' and 1 x 'form' but everyone works as a button with a size of 30 x 30. The form was the biggest problem because it is a block element and I wanted all buttons next to each other in one line.

So my solution so far:

<table>
 <tr>
  <td colspan="3">
   <div class="btn-toolbar">
    <div class="btn-group"> Link 1 </div>
    <div class="btn-group"> Link 2 </div>
    <div class="btn-group"> Form 1 </div>
   </div>

This works great. But I want to align these 3 objects at the right of my cell. There is no way I found to align it right.

<div class="btn-toolbar text-right">

Don't work!

<tr colspan="3" class="text-right">

Don't work!

<div class="btn-toolbar pull-right">

Works!

But I feel really uncertain if this is the right way. For me it is to much nested code.

Is there any way to solve this with less code?

Upvotes: 5

Views: 6148

Answers (2)

zanderwar
zanderwar

Reputation: 3730

There is nothing wrong with using pull-right to achieve what it is you require.

<h2>Stock Management</h2>
<hr/>
<div class='btn-group pull-right'>
    <a href='#' class='btn btn-default'>Add New Product</a>
    <a href='#' class='btn btn-info'>Supplier List</a>
    <a href='#' class='btn btn-danger'>Stock Alerts</a>
</div>
<div class='clearfix'></div>
<hr/>

You will just require a div with a class of clearfix afterwards otherwise you may have overlapping issues.

A note from the bootstrap docs regarding use of the pull-right class in dropdown menus:

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

PS - Do not use tables for ANYTHING other than displaying data. That kind of web design should be left back in 1998 :P

Upvotes: 3

Megha
Megha

Reputation: 220

See if this solves your purpose. I added a bit of css to your existing code

<style type="text/css">
    .btn-group{ 
        display: inline-block;        
        text-align:right;
  }  
  </style>

The HTML is same as yours

<table>
     <tr>
         <td colspan="3">
             <div class="btn-toolbar">
                 <div class="btn-group"> Link 1 </div>
                  <div class="btn-group"> Link 2 </div>
                  <div class="btn-group"> Form 1 </div>     
             </div>

Upvotes: -2

Related Questions