Left and right text under image on same line? - html

Question

I want to place 2 links on the left and 1 on the right side under some images.
The images are all different sizes and everything in my main div is centered.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" height="484" width="700">
<p class="text-left">
FHD Ansicht |
4K Ansicht
</p>
</div>
</div>
</section>
</main>
At the moment i did set the paragraph under the image to the width of the image:
And it looks like this with text only on the left side:
What i need is:
I guess a figure around the image and the text inside it is part of the solution.
Whats the best way doing it in the latest bootstrap?

Answer 1

Try playing with this snippet:
<main class="container-fluid">
<div class="row">
<img class="col-md-12" src="#" alt="test" style="background-color: blue; height: 400px;">
</div>
<div class="row subtitle-container">
<div class="col-md-10 left-subtitle">
Some Text | Some Text
</div>
<div class="col-md-2 right-subtitle">
Some Text
</div>
</div>
</main>

Answer 2

You can use float-left and float-right bootstrap classes to get texts to the left and right.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" class="w-100" height="484" width="700">
<div class="text-center clearfix">
FHD Ansicht
<span class="float-left mx-2">|</span>
4K Ansicht
<!-- <span>|</span> -->
another link
</div>
</div>
</div>
</section>
</main>