fatiherdem fatiherdem - 5 months ago 122
CSS Question

Bootstrap same width for labels

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

enter image description here

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

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

Answer

because .label is inline, you must set as inline-block and then set a min-width

Note: 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-active">Tarafından</span>