How to Add HTML Line Break Within an Input Text Placeholder

Insert line break inside placeholder attribute of a textarea?

What you could do is add the text as value, which respects the line break \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Then you could remove it on focus and apply it back (if empty) on blur. Something like this

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Example: http://jsfiddle.net/airandfingers/pdXRx/247/

Not pure CSS and not clean but does the trick.

how to line break on placholder of text area

Newlines do not work in the placeholder attribute of <input> elements, but they work for the <textarea> element.

However, using <input type="textarea"> is not valid markup and will be replaced by the browser to an <input type="text">.

If you want multi-line input, use a <textarea> instead.

For the newline, use the and HTML entities in your placeholder, which are the line feed and the new line characters:

<input type="text" placeholder="line
line2"><textarea placeholder="line1
line2"></textarea>

Multiple lines of input in input type=text /

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5"></textarea>

How to have a line break in input type = text

unfortunately HTML doesn't allow you to make an input multi-line but you can use a textarea instead. (See the code snippet below)
I've set "rows" to 2 since you mentioned you wanted it to take 2 lines instead of just 1, you can change that to be whatever number of lines you want.

<form action="/form/submit" method="post">
   <label for="text">Description:</label>
   <br>
   <textarea id="text" name="text" rows="2" cols="50"></textarea>
   <br/>
   <input type="submit" value="Submit">
</form>

no line break between input text and a

Please try using d-flex instead of col-4

As in: <div class="d-flex">

Another approach would be using row and column of bootstrap, as in

<div class="row">
 <div class="col">
Input here..
</div>
 <div class="col">
Button here..
</div>
</div>

refs: Bootstrap Grid, Bootstrap flexbox,
Bootstrap Forms

Sample Image

Can you have multiline HTML5 placeholder text in a textarea?

For <textarea>s the spec specifically outlines that carriage returns + line breaks in the placeholder attribute MUST be rendered as linebreaks by the browser.

User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.

Also reflected on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, when I try on Chrome 63.0.3239.132, it does indeed work as it says it should.