Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap labels are not wrapped in the DIV?

Tags:

html

css

twitter-bootstrap

My Bootstrap labels are not being wrapped in my DIV as expected? They just keep going off the screen? Does anyone have any idea why? I have included a screenshot, and the code is below:

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
                     <option selected="selected" value="7">Test Parking Area XXX</option>
                     <option value="5">Tower A Parking</option>
                     <option value="6">Tower B Parking</option>

                </select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview" style="width:600px;"><h3>Level 2</h3><hr><span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 22</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 33</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 44</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 55</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 66</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 77</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 88</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 99</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 111</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 222</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 333</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 444</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 555</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 666</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 777</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 888</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 999</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success">SlotSlotSlotSlot 1</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 2</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 3</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 4</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 5</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 6</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 7</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 8</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 9</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 10</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 12</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 13</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 14</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>

Why is it acting like this

Hope you can give me a hint! Thanks!

Regards,

Bob

EDIT:

1) removed the &nbsp as suggested, and it worked fine! But...

2) Added margin-top and margin-right to get some space, and a popup to some of the labels, and now the results look the same again? See below:

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
<option selected="selected" value="7">Test Parking Area XXX</option>
<option value="5">Tower A Parking</option>
<option value="6">Tower B Parking</option>

</select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview"><h3>Level 2</h3><hr><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 11</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 22</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 33</span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup199" data-toggle="popover" title="SlotSlotSlotSlot 44" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 44</a></span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup200" data-toggle="popover" title="SlotSlotSlotSlot 55" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 55</a></span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup201" data-toggle="popover" title="SlotSlotSlotSlot 66" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 66</a></span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 77</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 88</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 99</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 111</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 222</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 333</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 444</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 555</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 666</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 777</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 888</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 999</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 1</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 2</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 3</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 4</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 5</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 6</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 7</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 8</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 9</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 10</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 11</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 12</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 13</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 14</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>

like image 971
Robert Benedetto Avatar asked Jul 11 '14 16:07

Robert Benedetto

People also ask

How do I wrap text around a label in HTML?

Solution 1 word-break: break-word; max-width: 200px; white-space: normal; to the style of the parent <p> and the text should wrap as expected.

Is label dropped in bootstrap 4?

No 'label' can be found in the Components section. No 'tag' can be found in the Components section. You'll find Badges in Components again. So, at the moment 'Label' and 'Tag' components have still been replaced with 'badges'.

How to break long text CSS?

The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

2 Answers

It is because of your use of &nbsp;, it is all read as one line. You should replace them with regular spaces and use css margins if you need additional space in between each item.

<span class="label label-success">SlotSlotSlotSlot 11</span> <span class="label label-success">SlotSlotSlotSlot 22</span> <span class="label label-success">SlotSlotSlotSlot 33</span> <span class="label label-success">SlotSlotSlotSlot 44</span> <span class="label label-success">SlotSlotSlotSlot 55</span> <span class="label label-success">SlotSlotSlotSlot 66</span> <span class="label label-success">SlotSlotSlotSlot 77</span>

http://jsfiddle.net/f5ME3/

By definition, non-breaking spaces prevent line breaks.

(&nbsp), is a variant of the space character that prevents an automatic line break (line wrap) at its position

Source: http://en.wikipedia.org/wiki/Non-breaking_space

like image 148
Steve Sanders Avatar answered Oct 05 '22 09:10

Steve Sanders

You can still use &nbsp as you do if you don't want to mess with adding css styles, but you have to set "word-wrap:break-word" at the parent DIV style as follows

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
                     <option selected="selected" value="7">Test Parking Area XXX</option>
                     <option value="5">Tower A Parking</option>
                     <option value="6">Tower B Parking</option>

                </select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview" style="width:600px;word-wrap:break-word"><h3>Level 2</h3><hr><span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 22</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 33</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 44</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 55</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 66</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 77</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 88</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 99</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 111</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 222</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 333</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 444</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 555</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 666</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 777</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 888</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 999</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success">SlotSlotSlotSlot 1</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 2</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 3</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 4</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 5</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 6</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 7</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 8</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 9</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 10</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 12</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 13</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 14</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>
like image 38
BBekyarov Avatar answered Oct 05 '22 07:10

BBekyarov
Sign in to Comment

Related questions

Why minify when the transport will gzip?
getComputedStyle gives "transparent" instead of actual background color
how to extract the designated div table data in lxml?
Convert multiline plain text to HTML paragraphs with AngularJS
How to create a pattern overlay on top of an image
How does the W3C define a "Web Application"?
Crossbrowser brightness filter over img using css
Keep footer at bottom but not sticky?
Asp.net Calendar custom css style
Django how to specify a base url
Highcharts - Long multi-line y axis labels causing following label to be removed
On gridster keep widget under mouse during drag
Node.js, Ajax sending and receiving Json
Repaints on Scroll populating input boxes
Make child element (with padding) 100% width and height of parent
Chrome default borders on input text
Showing Image in full screen - using JavaScript/HTML5
Position absolute not inside parent
Safari ignoring html5 video muted attribute
Canvas line behaviour when 0 < lineWidth < 1

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!