Description positioned along the edge of the image

Is it achievable in Bootstrap 4.1 to have the caption aligned with the image margin as displayed in the image below?

Illustration of aligning caption with image

Following the sample at getbootstrap.com, there exists a discrepancy between the caption and the image margin that changes based on the viewport size. What I desire is for the figure caption to be left-aligned with the image margin, not with the figure div.

The code snippet being used is outlined 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.  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 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>
csstwitter-bootstrapbootstrap-4figurecaption

Answer №1

<figure class="image-figure">
  <img src=".../400x300" class="image img-fluid rounded" alt="A placeholder image with rounded corners in a figure.">
  <figcaption class="caption">Description for the image above</figcaption>
</figure>

Visit this link to learn more about figures in Bootstrap.

Typically, bootstrap figure and figcaption are aligned to the left. It appears that the classes d-block and mx-auto are causing them not to align properly at the moment. The mx-auto class centers the image. You may want to consider removing these two classes for optimal alignment.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <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="image img-fluid rounded" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="caption">
            <strong>Image 1</strong> A random photo from unsplash.com
          </figcaption>
        </figure>
      </div>

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-align-justify">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi vel enim suscipit pretium nec non quam. Mauris id lobortis erat. Proin in sagittis diam. Cras posuere imperdiet augue in condimentum.
          </p>
          <p>
            Nullam tristique libero sed diam tincidunt, quis convallis tortor congue. Phasellus cursus urna magna, eget tempor turpis molestie eu. Duis placerat felis lorem, quis sollicitudin lacus varius eu. Aenean risus nunc, vehicula a lectus et, ultrices rhoncus ex. Donec vitae tellus id eros efficitur fringilla.
          </p>
        </div>
      </div>

    </div>
  </div>

  <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>

Answer №2

Your image is receiving a margin-left: auto !important styling from the Bootstrap framework.

To override this, you can set both the image and caption to have the same margin using the following code:

img.figure-img, figcaption.figure-caption  {
     margin-left: 0px !important;
}

You may also consider adding some media queries for further customization.

I've created an example on jsfiddle for reference.

/* --- Set equal margin for image and caption --- */

img.figure-img, figcaption.figure-caption  {
  margin-left: 0px !important;
}

/* --- Alternatively, remove the auto width -- */
/* img.figure-img {
  margin-left: unset !important;
} */
<!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...
          </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the solution to making text appear on the top rather than on the side?

Seeking a way to keep the text description above the textbox within a definition list, however currently the text appears to the left of the box. Here is the provided HTML structure: <dl> <dt> <label>Phone Number</label> &l ...

htmlcss

Ways to eliminate the default underline in MUI typography

I have a unique Moviecard component in my React app that I built with MUI. It has this persistent and bothersome underline on every Typography component, and no matter what I try, like setting textDecoration to none, it just won't go away. There seem ...

cssreactjsmaterial-ui

Implement feature to toggle function upon clicking radio buttons using bootstrap and angular 5

Currently, I am utilizing Angular 6 and Bootstrap 4. Within my project, there exists a Bootstrap button group: <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary"> <input type="radio" ...

angulartwitter-bootstrapbootstrap-4

The flex-wrap property with a value of "nowrap" does not seem to

I am struggling with making the page responsive. The flex-wrap: nowrap property seems to be causing issues. Can someone please assist me in identifying the root of the problem? .logo { text-decoration: none; color: white; } .header { width: ...

htmlcssflexbox

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

Utilizing the NG-CLASS directive within a material table to target a specific 'row' element for styling in CSS

I have a table with various columns, one of which is a status field. I am looking to display colored badges in that column based on the status of each record, which can be "Completed", "Deleted", or "Canceled". I have attempted to use ng-class to dynamical ...

cssangular

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

jqueryhtmlcsscss-transforms

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form. I have successfully implemented an effect where clicking on the input field causes the label to change its posit ...

javascripthtmlcssmaterial-design

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Is there a way to selectively display a portion of my CSS class based on certain conditions?

Is there a way to conditionally render all of the css inside the following hover psuedoclass based on a variable (data) being not null? Within my React Component that utilizes Material UI makeStyles, I have the following styles: const useStyles = makeStyle ...

cssreactjsmaterial-uipseudo-classconditional-rendering

Troubleshooting issues with Bootstrap's responsiveness configuration

I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display. https://i.sstatic.net/YQrL5.png However, when I resize the browser window, the responsiveness seems to break. https://i.sstatic.net/4 ...

htmlcssangulartwitter-bootstrapbootstrap-4

Can JavaScript be utilized to dynamically adjust the size of all elements on the screen to a specified percentage of their initial height and width when a certain event occurs?

I'm fairly new to the world of JavaScript, but I have a basic understanding of it. I want to optimize my personal website for mobile devices. I've already taken care of screen orientation and element positioning, everything is centered nicely and ...

javascripthtmlcssresize

Tips on halting the current animation and modifying styles upon hovering

Currently, I have a basic label featuring a contact number with a blinking animation. However, the animation is only a simple color transition at this time (see code below). I have managed to successfully pause the animation and revert the text back to it ...

csshovercss-animations

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

Trouble linking HTML, Javascript, and CSS - seeking help to get them working properly

Hey there! I'm currently trying to transfer my project from Codepen at here to repl.it (This project) which you can find at this link. Don't forget to click run after checking it out! The code is working perfectly fine on Brackets with the same ...

jqueryhtmlcss

React Div Element Not Extending to Web Page Margin

creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...

htmlcssreactjsreact-nativeweb-testing

Struggling to create a photo grid design that meets my expectations

I'm struggling to recreate this particular photo grid. Any tips on how I can achieve it? Check out the image here Just to clarify, I had a working prototype see image description using flexbox. However, one image didn't fit well so I resorted to ...

htmlimagecssgridflexbox

Image positioned above the text in the mobile layout following the text

Can the layout be adjusted so that on desktop, the image is on the right and text on the left in the lower box, but on mobile, the image appears above the text? https://i.sstatic.net/hbPxa.png I understand that placing the image tag after the text tag in ...

htmlcsssass

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

`Ineffectiveness of CSS media query for font-size adjustment in HTML selector`

I recently implemented the 62.5% trick to adjust my font-size for various screen sizes. However, I noticed that on larger screens, the text appears too small. To address this, I tried increasing the font-size to 80% using a min-width media query. Unfortuna ...

htmlcssvue.jssassscss-mixins