Bootstrap 4 add text over image in navigation bar - html

Question

I still do not fully understand the flex structure in Bootstrap. I'll put down what I'm trying to do and the codes I've written. In short, what I want to do is add text over the image in the navbar. But the container of the navbar does not allow this. I think it's because I set the containers wrong. Thanks in advance for those who help.
Code:
.navbar-brand {
position: absolute;
width: 100%;
z-index: 3000;
}
.mnav {
height: 123px;
z-index: 2000;
width: 1200px
}
.has-bg-img {
z-index: 2000;
}
<div class="section fixed-top">
<div class="container-fluid bg-dark">
<div class="row p-3 bg-dark mx-auto ">
<div class="container text-light" style="max-width: 1200px">topnav</div>
</div>
</div>
<div class="container-fluid bg-light d-flex shadow-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light mx-auto mnav">
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link text-dark" href="//codeply.com">Clinic</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="col-auto mx-auto">
<div class="shadow rounded-circle">
<img src="https://i.imgur.com/swpgs2N.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
<div class="mx-5 order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="row pt-4 d-flex align-items-center">
<div class="col-3 text-white ">
<span class="navbar-toggler-icon"></span>
<h5>Appointment</h5>
<h5>Now !</h5>
<img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
</nav>
</div>
</div>
<script src="js/jquery-3.x-git.slim"></script>
<script src="js/bootstrap.min.js"></script>

Answer 1

If the only problem is that your text should be placed over the image, have a look at this article: https://www.w3schools.com/howto/howto_css_image_text.asp
In order to transfer it to your code, you can use the following snippet (I added font-awesome because i am not sure where your icon came from):
.bookmark {
position: relative;
text-align: center;
color: white;
}
.bookmark-texts {
padding: 20px;
position: absolute;
top: 0;
left: 0;
font-size: 18px;
}
.fa {
font-size: 35px !important;
margin-bottom: 5px;
}
.now {
font-style: italic;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="row pt-4 d-flex align-items-center">
<div class="col-3">
<div id="bookmark" class="d-inline-block">
<img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
<div class="bookmark-texts text-center text-white">
<!-- <span class="navbar-toggler-icon"></span> -->
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="appointment">Appointment</div>
<div class="now">Now !</div>
</div>
</div>
</div>
</div>
Also have a look at this fiddle resulting in this: