Bootstrap 4: text on the left and right in the page header

by Darko

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-header" id="page-header">
    <div class="float-left">
         <h1>Text on the left</h1>

    </div>
    <div class="float-right">
         <h3 class="text-right">This to the right but on the same line</h3>

    </div>
    <div class="clearfix"></div>
</div>

CSS

#page-header h1, #page-header h3 {
    line-height: 40px;
}

/* Bootstrap3 page-header class*/
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}