CODEWITHSUNDEEP
htmlcss
Krys
Krys

Reputation: 829

Positioning list-group-item buttons

I am trying to create this list-group-item example below with two buttons (instead of just one) that should pull to right and also be of equal height to the list-group-item itself:

enter image description here

At the moment I do have the skeleton working, but as you can see they are not positioning correctly. Thanks.

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group">
        <span class="pull-right">
        	<button class="btn btn-default" type="button">Go!</button>
      	</span>

        <span class="pull-right">
        	<button class="btn btn-default" type="button">Go!</button>
      	</span>
        <span class="left">Cras justo odio</span>
      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

Upvotes: 3

Views: 3329

Answers (1)

chris
chris

Reputation: 4867

You can use i.e display: table; / display: table-cell;

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group" style="display:table; width:100%;">

        <span style="display: table-cell; border:1px solid #ccc; padding: 0 8px; vertical-align: middle;">Cras justo odio</span>            
        
        <span style="display: table-cell; width: 40px;">
        	<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
      	</span>

        <span style="display: table-cell; width: 40px;">
        	<button class="btn btn-default" type="button"><span>ᐅ</span>  Go!</button>
      	</span>
        
      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

Upvotes: 3

Related Questions