I am attempting to wrap the title text around a span object. So far, I have been successful in getting everything aligned correctly, but the final step of wrapping the text seems challenging. My suspicion is that the issue lies in the separation of containers; removing the container disrupts the formatting,
<div class="row px-3">
<div class="jumbotron">
<span class="float-right d-flex ">
<div class="align-self-center mr-1">Submitted by</div>
<div class="btn-group">
<button class="btn">User</button>
<button class="btn btn-info"></button>
<button class="btn btn-danger"></button>
</div>
</span>
<h1 class="d-flex">
<div id="title">A lengthy post title to test wrapping functionality</div>
</h1>
<div id="body">a brief body text below the title</div>
</div>
</div>
Here is the example code on JSFiddle
Utilizing Bootstrap 4 as indicated by the title. Any suggestions or advice would be greatly appreciated...