Bootstrap same width for labels

Question

I am using Bootstrap 3. I have 5 different labels and I want to set their width to the maximum one and center the text.

For example every label's width should be equal to red one.

<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>

Answer 1

It's because .label is an inline element, you must set as inline-block and then set a min-width

The bootstrap already centers the text in .label so no need to worry about that.

Note: I've used !important just for the demo, avoid at all cost using in your code.

.label {
  min-width: 200px !important;
  display: inline-block !important
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-info">Merkez</span>
<hr />
<span class="label label-md label-warning">Merkez Tarafından </span>
<hr />
<span class="label label-md label-success">Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-default">Tarafından</span>
<hr />
<span class="label label-md label-primary">Tarafından lipsum</span>

Answer 2

Can't think of the exact answer you want, but maybe this will be even better for you.

.label {
    width:200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label:hover {
    white-space: normal;
}