Bootstrap Wordwrap issue on Mobile

Question

I have a label (#linkDiv) which turns into a button once 'unlocked.' While as a label, the text is longer than the button, so it needs to wrap. I already did white-space:normal; word-wrap: break-word; word-break: normal;

That works for wide and medium screens, but when testing on mobile screen sizes, the line awkwardly wraps the whole label to the next line.

(not enough rep to embed image:) https://i.sstatic.net/5T8c4.jpg

Help!

html:

<div class="container">
    <div class="row">
        <div id="pickCoins" class="col-sm-4">
            ...(other code for coins, etc)...
            <div id="buttonRow" class="row">
                <div id="rulesDiv" class="col-sm-4 btn btn-primary">Rules</div>
                <div id="exampleDiv" class="col-sm-4 btn btn-info">Examples</div>
                <div id="linkDiv" class="col-sm-4 label label-warning">
                    Unlock theory link in <span class="badge" id="unlockLink">5</span>
                </div>
            </div>
        </div>
    </div>
</div>

css:

#buttonRow div.col-sm-4 {
    width:30%;
    margin:0 1%;
    white-space:normal;
    word-wrap: break-word;
    word-break: normal;
}

Answer 1

try this instead

HTML

<div class="container">
    <div class="row">
        <div id="pickCoins" class="col-sm-4">
            ...(other code for coins, etc)...
            <div id="buttonRow" class="row">
                <div id="rulesDiv" class="col-xs-4 btn btn-primary">Rules</div>
                <div id="exampleDiv" class="col-xs-4 btn btn-info">Examples</div>
                <div id="linkDiv" class="col-xs-4 label label-warning">
                    Unlock theory link in <span class="badge" id="unlockLink">5</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#buttonRow div.col-xs-4 {
    width: 30%;
    margin: 1.5%;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
}