I'm trying to create a Jumbotron component using the following code:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just sent password reset instructions to <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
The issue I'm facing is that the content extends beyond the jumbotron boundaries, as shown here:
https://i.sstatic.net/x5cLD.png
Any suggestions on how to correct this?
UPDATE: Another example shows similar overflow in CSS:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please verify your email by entering the code we sent to <!-- /react-text --><u><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a487541454d4b446a54b47">[email protected]</a></u></p>
<button class="btn btn-primary">Resend verification code</button>
</div>
</div>
Once again, the content does not fit within the jumbotron: