How to make responsive three columns in a row with image text and link using Bootstrap 4?

Question

I am struggling with the setting three responsive columns in a row using Bootstrap 4.

.buttons {
    border: 1px solid #e86225;
    color: #e86225 !important;
    padding: 10px 20px;
    font-size: 14px;
}

.buttons:hover {
    border: 1px solid #ffffff;
    background-color: #e86225;
    color: #ffffff !important;
    transition: background-color 1s, border 1s, color 1s;
}

.container-custom {
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-link {
    padding: 15px 0;
}

.container p {
    margin: 25px 0;
    max-width: 400px;
}

@media(max-width: 767px){ 

    .container-custom {
        padding-top: 50px;
        padding-bottom: 50px;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="container">
            <div class="row container-custom justify-content-center">
                <h2>Blog</h2>
                <div class='d-flex flex-wrap pt-5'>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                </div>
            </div>

The problem is when media screen width is smaller than 767px, they are going to the left. I want to make image in the middle of column, the beginning of the text should be at the beginning of the imaeg and the end of text at the end of image, button should be at the beginning of the image too like here:

enter image description here

@Zim The solution you posted in the duplicate question is a broad explanation of how the bootstrap grid system works while the issue here narrows down to basic css modifications for images and buttons rather than the grid system as a whole. He is not having issues with his bootstrap columns, rather the content inside the columns. Voting to reopen this. — AndrewL64, Jan 17 '19 at 20:25
The answer is to add a new css class `img { width: 100%; }` or something similar so the images look like the layout in your attached image. Give that a shot - https://codepen.io/brooksrelyt/pen/MZdLYj — brooksrelyt, Jan 17 '19 at 20:32
The issue here is that the columns are not the immediate children of the row, and to learn horizontal centering which there are *many* other answers on. — Carol Skelly, Jan 17 '19 at 20:35

score 1 · Accepted Answer · answered Jan 17 '19 at 21:34

Just add width:100% to your images so they take all the space on the column

.buttons {
    border: 1px solid #e86225;
    color: #e86225 !important;
    padding: 10px 20px;
    font-size: 14px;
}

.buttons:hover {
    border: 1px solid #ffffff;
    background-color: #e86225;
    color: #ffffff !important;
    transition: background-color 1s, border 1s, color 1s;
}

.container-custom {
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-link {
    padding: 15px 0;
}

.container p {
    margin: 25px 0;
    max-width: 400px;
}
img{
        width:100%;
}
@media(max-width: 767px){ 

    .container-custom {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="container">
            <div class="row container-custom justify-content-center">
                <h2>Blog</h2>
                <div class='d-flex flex-wrap pt-5'>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                </div>
            </div>

score 0 · Answer 2 · answered Jan 17 '19 at 20:49

The image width could be the issue. Add img { width: 100%; } and class="img-fluid" to your img tags.

Add to css:

img { width: 100%; }

HTML:

<img  class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">

or something similar so the images look like the layout in your attached image.

Example codepen using your code: https://codepen.io/brooksrelyt/pen/MZdLYj

How to make responsive three columns in a row with image text and link using Bootstrap 4?

2 Answers2