prevent page-break when printing paragraph

Question

I want to print a page. However I notice that when a paragraph contains a little more text when printing it can break and be printed on the next page. I would like to avoid this, but it works not, probably due to the html structure:

<div class="row form-group">
<div class="col-sm-12">
<label><span>Explanation expiration passed</span></label>
<p class="fake-form-control-disabled">some very large ipsum lorem text ....</p>
</div>
</div>

For the form-group class I have the following cdd definition:

.form-group {
        display: block;
        break-inside: avoid;
        margin-bottom: 15px;  
    }

It seems to work when I do not use the Bootstrap css grid e.g.:

<div class="form-group">  
<label><span>Explanation expiration passed</span></label>
<p class="fake-form-control-disabled">some very large ipsum lorem text ....</p>
</div>

What should I do differently?

Answer 1

I suggest to use the break-inside property onto the last-child-block level, in your case this is the <p> level, ex.

p {
    display: block;
    break-inside: avoid;
    margin-bottom: 15px;
}

Alternatively, attach your form-group class to the column-level of the bootstrap grid, ex: <div class="col-sm-12 form-group">