You need to add `data-html=&quot;true&quot;` to the markup..

    &lt;div class=&quot;content show-tooltip&quot; data-html=&quot;true&quot; data-placement=&quot;top&quot; 
         title=&quot;1st line of text &lt;br&gt; 2nd line of text&quot;&gt;

Working demo: https://codeply.com/p/C8083WXo5Z

In the Title use this code to break the line: &amp;#013;

HTML

    ...title=&quot;- Item 1 &amp;#013; - Item 2 &amp;#013;&quot;

CSS

    .ui-tooltip {
        /* tooltip container box */
        white-space: pre-line;
    }
    
    .ui-tooltip-content {
        /* tooltip content */
        white-space: pre-line;
    }

Hello i&#39;m learning C++11, I&#39;m wondering how to make a constexpr 0 to n array, for example:

    n = 5;
    
    int array[] = {0 ... n};
    
so array may be `{0, 1, 2, 3, 4, 5}`



Create N-element constexpr array in C++11

I&#39;m having some trouble binding a function defined in a controller with a callback function in a directive. My code looks like the following:

In my controller:

    $scope.handleDrop = function ( elementId, file ) {
        console.log( &#39;handleDrop called&#39; );
    }

Then my directive:

    .directive( &#39;myDirective&#39;, function () {
        return {
          scope: {
            onDrop: &#39;&amp;&#39;
          },
          link: function(scope, elem, attrs) {
            var myFile, elemId = [...]
    
            scope.onDrop(elemId, myFile);
          }
        } );

And in my html page:

    &lt;my-directive on-drop=&quot;handleDrop&quot;&gt;&lt;/my-directive&gt;

Having no luck with the code above. From what I&#39;ve read in various tutorials I understand I&#39;m supposed to specify the arguments in the HTML page?

AngularJS directive binding a function with multiple arguments

I am using Bootstrap 3 and added a tooltip to my div. I&#39;ve tried using &lt; br &gt; \n and &amp;amp;#013; to create the new line. Would it be a problem with the Bootstrap stopping me?

    &lt;div class=&quot;content show-tooltip&quot; data-placement=&quot;top&quot; 
         data-original-title=&quot;1st line of text &lt;br&gt; 2nd line of text&quot;&gt;

Add line break to tooltip in Bootstrap 3

I am using Bootstrap 3 and added a tooltip to my div. I've tried using &#x3C; br > \n and &#x26;#013; to create the new line. Would it be a problem with the Bootstrap stopping me?
<pre><code class="hljs language-ini">&#x3C;div class="content show-tooltip" data-placement="top" 
 data-original-title="1st line of text &#x3C;br> 2nd line of text">
</code></pre>

I have the following HTML:

```html
&lt;div class=&quot;pricing-levels-3&quot;&gt;
   &lt;p&gt;&lt;strong&gt;Which level would you like? (Select 3 Levels)&lt;/strong&gt;&lt;/p&gt;
   &lt;input class=&quot;single-checkbox&quot;type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 1&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 2&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 3&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 4&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 5&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 6&lt;br&gt;
   &lt;input class=&quot;single-checkbox&quot; type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot;&gt;Level 7&lt;br&gt;
&lt;/div&gt;
```

Live site:

http://www.chineselearnonline.com/amember/signup20.php

How can I do it so that the user can only select 3 of those checkboxes?

How to limit the number of selected checkboxes?

I&#39;ve been trying to get a scroll to div id jquery code to work correctly. Based on another stack overflow question i tried the following

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

    $(&#39;#myButton&#39;).click(function() {
       $.scrollTo($(&#39;#myDiv&#39;), 1000);
    });

But it didn&#39;t work. It just snaps to the div. I also tried

    $(&#39;#myButton&#39;).click(function(event) {
         event.preventDefault();
       $.scrollTo($(&#39;#myDiv&#39;), 1000);
    });

With no progress.

Smooth scroll to div id jQuery

The standard HTML file upload works as follows:

    &lt;g:form method=&quot;post&quot; accept-charset=&quot;utf-8&quot; enctype=&quot;multipart/form-data&quot;  
         name=&quot;form&quot; url=&quot;someurl&quot;&gt;
    
        &lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot; /&gt;
    
    &lt;/form&gt;

In my case I loaded an image into a html5 canvas and want to submit it as a file to the server.
I can do:

    var canvas; // some canvas with an image
    var url = canvas.toDataURL();

This gives me a image/png as base64. 


**How can I send the base64 image to the server the same way it is done with the input type file?** 

The problem is that the base64 file is not of the same type as the file, which is inside the input type=&quot;file&quot;. 

**Can I convert the base64 that the types are the same for the server somehow?** 


Convert HTML5 Canvas into File to be uploaded?

How can I redirect with post data?

How to move to new page with `$_POST`?

How to do this?  How is it done and whyfore shall it be done


jQuery - Redirect with post data

How to remove one specific selected file from input file control?

I have an input file control with the option to select multiple files; however, I want to validate a file and if it has an wrong extension then I should remove that file from the file control itself, is it possible?

I tried as below


    &lt;input type=&quot;file&quot; name=&quot;fileToUpload&quot; id=&quot;fileToUpload&quot; multiple/&gt;


    &lt;script&gt; $(&quot;#fileToUpload&quot;)[0].files[0] &lt;/script&gt;

Below is the screenshot of the object but I am not able to modify it

![enter image description here][1]


  [1]: http://i.stack.imgur.com/sIxC6.png

How to remove one specific selected file from input file control

My layout currently looks like this

![Current Layout][1]

In the center column, I want to add a small margin between each `Server` Div. But, if I add a margin to the CSS, it ends up line wrapping and looking like this

![Attempted Change][2]

	&lt;div class=&quot;row info-panel&quot;&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_1&quot;&gt;
            &lt;div&gt;
                Server 1
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_2&quot;&gt;
            &lt;div&gt;
                Server 2
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_3&quot;&gt;
            &lt;div&gt;
                Server 3
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_4&quot;&gt;
            &lt;div&gt;
                Server 4
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_5&quot;&gt;
            &lt;div&gt;
                Server 5
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_6&quot;&gt;
            &lt;div&gt;
                Server 6
            &lt;/div&gt;
        &lt;/div&gt;
		&lt;div class=&quot;col-md-4 server-action-menu&quot; id=&quot;server_7&quot;&gt;
            &lt;div&gt;
                Server 7
            &lt;/div&gt;
        &lt;/div&gt;
	&lt;/div&gt;

And the CSS 

	.server-action-menu {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
		background-repeat: repeat;
		border-radius:10px;
	}

	.info-panel {
		padding: 4px;
	}

I attempted to add the margins by doing this

	.info-panel  &gt; div {
		margin: 4px;	
	}

How can I add a margin to the DIVs so that they don&#39;t leave so much space on the right hand side?




  [1]: http://i.stack.imgur.com/XSuLL.png
  [2]: http://i.stack.imgur.com/XNvPt.png

How do I add a margin between bootstrap columns without wrapping

My buttons all have a highlight around them after I click them. This is in Chrome.

![Unselected][2]
![Selected][1]

    &lt;button class=&quot;btn btn-primary btn-block&quot;&gt;
        &lt;span class=&quot;icon-plus&quot;&gt;&lt;/span&gt; Add Page
    &lt;/button&gt;

I am using Bootstrap with a theme, but I&#39;m pretty sure that&#39;s not it: I was noticing this before on another project. 

It goes away if I use an `&lt;a&gt;` tag instead of `&lt;button&gt;`. Why? If I wanted to use `&lt;button&gt;` how would I make it go away?




  [1]: http://i.stack.imgur.com/p1LIm.png
  [2]: http://i.stack.imgur.com/nuDkL.png

How to remove focus around buttons on click

How i can modify `#bg` image so it would be responsive, resizable and proportional in all browser?

HTML:

     &lt;div class=&quot;container&quot;&gt;
           &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
    
            	&lt;div class=&quot;col-md-8 col-sm-6 col-xs-12 well&quot; id=&quot;bg&quot;&gt;
    
                   &lt;/div&gt;
    
            	&lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;


css:

    @import url(&#39;bootstrap.min.css&#39;);
    
    body{
    	background: url(&#39;../img/bg.jpg&#39;) no-repeat center center fixed;
    	-webkit-background-size: cover;
      	-moz-background-size: cover;
      	-o-background-size: cover;
      	background-size: cover;
      	margin-top: 12%;	
    }
    
    #bg{
    	background:url(&#39;../img/con_bg4.png&#39;) no-repeat center center;
    	height: 500px;
    }



Twitter Bootstrap Responsive Background-Image inside Div

I&#39;m new to Bootstrap 3. Can&#39;t figure out how to activate the loading state button function. My code below is from the documents on [getboostrap.com][1].

    &lt;button type=&quot;button&quot; data-loading-text=&quot;Loading...&quot; class=&quot;btn btn-primary&quot;&gt;
      Loading state
    &lt;/button&gt;

Dropdowns works fine so I guess the problem is somewhere else? 


  [1]: http://getbootstrap.com


Loading state button in Bootstrap 3

I&#39;m trying to make a two-column **full-height** layout with Twitter Bootstrap 3. It seems that **Twitter Bootstrap 3** does not support full height layouts.
What I want to do:

      +-------------------------------------------------+
      |                     Header                      |
      +------------+------------------------------------+
      |            |                                    |
      |            |                                    |
      |Navigation  |         Content                    |
      |            |                                    |
      |            |                                    |
      |            |                                    |
      |            |                                    |
      |            |                                    |
      |            |                                    |
      +------------+------------------------------------+

If the content grows, the `nav` should also grow. 
 
 - Height 100% for every parent doesn&#39;t work because there is the case where content is one line.
 - `position: absolute` seems to be the wrong way.
 - `display: table` and `display: table-cell` solves the problem, but not elegantly.

##### HTML:

   

        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-3&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;col-md-9&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;

Is there way to make it with default **Twitter Bootstrap 3** classes?

Bootstrap 3 two columns full height

Is there any Twitter Bootstrap class for `font-weight: bold` and other values of `font-weight`?

I would not create a new one if this already exists in Bootstrap.

Set font-weight using Bootstrap classes

Bootstrap has some nice `.visible-*` (eg. `.visible-lg`) class utility for selecting what to show or hide depending on the screen size.

When using those classes, it applies the styling `display: block !important;` when in the correct screen size.

But sometimes, I&#39;d like to use it for some elements that are displayed `inline` or `inline-block`.

How could I cleanly override some bootstrap rules to have the choice? Or should it be a feature request in bootstrap?

---
EDIT

Seems like I&#39;m not the only one wondering about this issue. Here&#39;s the [github issue][1].

Thanks for the latest answer!

  [1]: https://github.com/twbs/bootstrap/issues/8869

Bootstrap3 .visible-* .hidden-* display inline

[Within the Bootstrap CSS project](https://github.com/twbs/bootstrap/blob/master/less/type.less), styles are provided for your heading tags (H1, H2, H3, H4, H5, H6), but there&#39;s also a series of class names based on the headings as well (.h1, .h2, .h3, .h4, .h5, .h6). What is the benefit gained from using the class name of a H1 without properly using the H1 tag? I would think that you always want to make sure your HTML mirrors your visual importance.

Any thoughts explaining a good reason for using .h1 instead of using a h1 tag would be appreciated.

Content Type	Original Author	Original Content on Stackoverflow
Question	Pierce McGeough	View Question on Stackoverflow
Solution 1 - Jquery	Zim	View Answer on Stackoverflow
Solution 2 - Jquery	Thalles Noce	View Answer on Stackoverflow

Add line break to tooltip in Bootstrap 3

Jquery Problem Overview

Jquery Solutions

Solution 1 - Jquery

Solution 2 - Jquery

AngularJS directive binding a function with multiple arguments

Create N-element constexpr array in C++11

Attributions