HTML New Line with Bootstrap

Question

Using this reference, and the red alert option. Here it is:

<div class="alert alert-dismissible alert-danger">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

In their example, there is a line break after try.. is that just because of width?

My version:

<div class="alert alert-dismissable alert-danger" style="float:right;">
    <button type="button" class="close" data-dissmiss="alert">&times;</button>
    <strong>Leave blank if there is already a Record for today!&#13;&#10; This will auto-calculate based on the previous Record.</strong>
</div>

Now mine doesn't have any line break but I also haven't messed with the CSS.. but I was wondering if there was a way to put a line break within the <strong> inline? I tried using this, but I guess that is strictly for <textarea>'s.

Any help is appreciated.

@Lucas that is so strange because I tried this and the
wasn't rendering as an html tag.. it was just being inserted as part of the but now it is working.. thank you — Grizzly, May 23 '16 at 19:13
yes, in fact that *is* just because of the width - just try to make your window smaller, then you'll see it. — Johannes, May 23 '16 at 19:16

score 7 · Accepted Answer · answered May 23 '16 at 19:14

7

Just put a br tag wherever you want a line break. Notice the new line after record in the example below, due to the inserted <br>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="alert alert-dismissable alert-danger" style="float:right;">
    <button type="button" class="close" data-dissmiss="alert">&times;</button>
    <strong>Leave blank if there is already a Record<br>for today!&#13;&#10; This will auto-calculate based on the previous Record.</strong>
</div>

answered May 23 '16 at 19:14

Wowsk

3,637
2
18
29

4

Note that `
` shouldn't be used for everything. Only use it for breaking up text. When you want a whole element to be on it's own line, use `display: block` in the CSS. – 4castle May 23 '16 at 19:16
True, he could just surround the text that you want on a new line with a div instead of changing CSS. – Wowsk May 23 '16 at 19:18
Why are linebreaks not shown directly? Is there way to show them directly? I have users input text in a textbox and then want to show the saved text in a Bootstrap card, but that doesn't preserve/show the linebreaks. – stefanbschneider Dec 16 '20 at 17:58

HTML New Line with Bootstrap

1 Answers1