In Bootstrap 4.1, is it possible to align the caption with the image margin as shown in the figure below.
Alignment of figure caption with image
By following the example at getbootstrap.com there is an offset between the caption and the image margin that varies with the view port size. What I would like to have is the figure caption left aligned with the image margin, an not with the figure div.
The code I'm using is listed below.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<figure>
<img class="figure-img img-fluid rounded mx-auto d-block" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
<figcaption class="figure-caption">
<strong>Picture 1</strong> A random image from unsplash.com
</figcaption>
</figure>
</div><!-- End col-md-6 -->
<div class="col-md-6">
<h5>Lorem Ipsum</h5>
<div class="text-justify">
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
<p>
Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit, ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam sed lectus a dui tempor rutrum.
</p>
</div>
</div><!-- End col-md-6 -->
</div> <!-- End row -->
</div> <!-- End container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>https://getbootstrap.com/docs/4.1/content/figures/
By default, bootstrap figure and figurecaption are aligned left. It is because you use d-block and mx-auto that they are not aligned now. mx-auto aligns the img in the center. I think the best way is to remove those two classes.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<figure>
<img class="figure-img img-fluid rounded" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
<figcaption class="figure-caption">
<strong>Picture 1</strong> A random image from unsplash.com
</figcaption>
</figure>
</div>
<!-- End col-md-6 -->
<div class="col-md-6">
<h5>Lorem Ipsum</h5>
<div class="text-justify">
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
<p>
Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit,
ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel
dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam
sed lectus a dui tempor rutrum.
</p>
</div>
</div>
<!-- End col-md-6 -->
</div>
<!-- End row -->
</div>
<!-- End container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>