Bootstrap 4 image overlay issues

Question

I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below

example image Problems

on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)

my code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>

        <div class="container">
                <div class="card bg-dark text-white">
                        <img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
                        <div class="card-img-overlay ">
                                    <div class="text-left w-25 ">
                                            <h2 class="card-title "> Headline</h2>
                                            <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                            <div class="">
                                                    <a href="#" class="btn btn-danger  btn-lg ">CTA to Our Locations</a>
                                            </div>
       
                                    </div>
                     
                          
                        </div>
                      </div>
        </div>




</body>

</html>
</body>

</html>

Zim Zim · Accepted Answer · 2018-08-22T22:59:30

The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).

   <div class="card bg-dark text-white">
        <img class="card-img img-responsive" 
        src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&amp;dl=bloom-blossom-close-up-87840.jpg&amp;fm=jpg" alt="Card image" width="500px" height="500px">
        <div class="card-img-overlay d-flex align-items-center">
            <div class="row">
                <div class="text-left col-lg-3 col-sm-6">
                    <h2 class="card-title ">H2 Locations Headline</h2>
                    <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <div class="">
                        <a href="#" class="btn btn-danger  btn-lg ">CTA to Our Locations</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Use d-flex align-items-center on the card-img-overlay to vertically center the row.

https://www.codeply.com/go/eRpRZj9Z8M

Bootstrap 4 image overlay issues

1 Answers