How to make the
item width fit the text length?

Question

How can I make the `

` item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my `class="active"` to look ugly. This is the navbar in which it occurs: ``` ```

Accepted Answer

make a `.custom_li` class and give

```
.custom_li{
   display:inline-block;
}
```

EDIT

To force same size, i'll suggest using `max-width` and place it under some `media-query`

```
li{
    display: inline-block;
    max-width:50%; /* limit width */
    word-break:break-all; /* wrap extended text*/
    border:1px solid red /* demo */
}
```

demo here

some optional things

How to make the <li> item width fit the text length?

Solution

Problem