CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Rehmat
Rehmat

Reputation: 2299

How to make bootstrap badge vertically center aligned?

Here is the jsfiddle. https://jsfiddle.net/8mfr1x79/1/

<div class="container">
    <div class="list-group">
        <a class="lis-group-item" href="#">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. <span class="badge badge-default pull-right">A long badge</span>
        </a>
    </div>
</div>

Is there any easy way so that whole text of the "a" element on the left gets adjusted towards a little left so that the badge aligns vertically in center?

I can give fixed width to the content on left, but I am concerned about all device sizes.

Thanks in advance.

Upvotes: 3

Views: 8316

Answers (3)

Paulie_D
Paulie_D

Reputation: 115278

Flexbox could do that

a.list-group-item {
  display: flex;
  align-items: center;
}
a .text {
  flex: 1;
}
a .badge {
  flex: 0 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="list-group">
    <a class="list-group-item" href="#">
      <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. </span><span class="badge badge-default">A long badge</span>
    </a>
  </div>
</div>

<div class="container">
  <div class="list-group">
    <a class="list-group-item" href="#">
      <span class="text">Lorem ipsum dolor </span><span class="badge badge-default">A long badge</span>
    </a>
  </div>
</div>

Upvotes: 5

Mike Mellor
Mike Mellor

Reputation: 1346

I'd probably use table-cells and get rid of the float.

https://jsfiddle.net/8mfr1x79/4/

<div class="container">
    <div class="list-group">
        <a class="lis-group-item table" href="#">
        <span class="tableCell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. 
        </span>
        <span class="tableCell">
          <span class="badge badge-default">A long badge</span>
        </span>
        </a>
    </div>
</div>

Css

.table{
  display: table;
}

.tableCell{
  display: table-cell;
  vertical-align: middle;
}

Upvotes: 3

AlexG
AlexG

Reputation: 5919

Missunderstood your question. Hold on.

Switch the position of the badge with your text, the text will flow around it.

JSFiddle

<div class="container">
    <div class="list-group">
        <a class="lis-group-item" href="#">
            <span class="badge badge-default pull-right">A long badge</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus.
        </a>
    </div>
</div>

Note: this only works because of the badges .pull-right/float: right;

Upvotes: 2

Related Questions