Bootstrap 4: Image center in row with 2 text blocks on either side

Question

Basically what i want is for an image to be centered in a class "row", and have 2 text blocks in each side (left and right) of the image.

what I want: Currently what I have:

Current code:

     <section class="showcase">
      <div class="container-fluid p-0">
    <div class="row no-gutters">

      <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-1.jpg');"></div>
      <div class="col-lg-6 order-lg-1 my-auto showcase-text mx-auto align-middle text-center">
        <h2>Also Available On Android & iOS</h2>
        <p class="lead mb-0 mx-auto text-center"><img style="max-height: 250px; margin-right:55px;" src="img/download_buttons.svg"></img>
        </p>
      </div>
    </div>
  </div>
</section>

CSS: Bootstrap 4 and

.showcase {
  .showcase-text {
    padding: 3rem;
  }
  .showcase-img {
    min-height: 30rem;
    background-size: cover;
  }
  @media (min-width: 768px) {
    .showcase-text {
      padding: 7rem;
    }
  }
}

EDIT:

What i got from Sunil Patel's answer:

What i need is for the image and the text to always be in the horizontal position, so even if its a different screen size, it would just resize, and stay horizontal, and not turn into vertical.

For example, on a smaller screen width, my original showcase row will become vertically aligned like so:

But i want it to always stay horizontal.

score 1 · Accepted Answer · answered Mar 27 '18 at 07:38

There are 2 issues here. One is vertical align center which has already been asked and answered before. The other is sizing columns horizontally, which can be accomplished using the Bootstrap 4 auto-layout columns.

<div class="container-fluid">
    <div class="row no-gutters align-items-center text-center">
        <div class="col-sm">
            <h2>Text</h2>
        </div>
        <div class="col-sm-auto">
            <img src="//placehold.it/200x400" class="img-fluid" alt="">
        </div>
        <div class="col-sm">
            <h2>Text</h2>
        </div>
    </div>
</div>

Demo

How it works:

col-sm-auto - fits the width of the column content
col-sm - grows to equally fill the width of the row
no-gutters - removes the horizontal spacing between the columns
text-center - to horizontal text inside the columns
align-items-center - flexbox vertical align for row

score 0 · Answer 2 · edited Mar 27 '18 at 07:22

I may have misunderstood your question. but is this what you're after?

<div class="container">
<div class="row justify-content-center">
    <div class="col-lg-auto">
        <h2>Test</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiae illo sunt. Quis temporibus at explicabo soluta et quibusdam et rem ducimus. Libero atque velit itaque est numquam velit est dolorem dolorem. Cum quis
            qui dolor vitae delectus eaque. Ullam inventore eos dolor at sed possimus recusandae. Sunt itaque nobis fugiat et consequatur. Qui reprehenderit consequatur voluptate delectus voluptatem voluptas. Aut modi est hic. Corrupti enim dicta
            sint consequatur eum. Saepe repellat laborum dolorem voluptate aut quis molestiae deserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
    </div>
    <div class="col-lg-auto">
        <img src="https://dummyimage.com/800x400.jpg" alt="">
    </div>
    <div class="col-lg-auto">
        <h2>Test</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiae illo sunt. Quis temporibus at explicabo soluta et quibusdam et rem ducimus. Libero atque velit itaque est numquam velit est dolorem dolorem. Cum quis
            qui dolor vitae delectus eaque. Ullam inventore eos dolor at sed possimus recusandae. Sunt itaque nobis fugiat et consequatur. Qui reprehenderit consequatur voluptate delectus voluptatem voluptas. Aut modi est hic. Corrupti enim dicta
            sint consequatur eum. Saepe repellat laborum dolorem voluptate aut quis molestiae deserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
    </div>
</div>

http://jsfiddle.net/dt81h6ff

thank you for the answer but it isnt really what im looking for, kinda, sorry for not being clear, I'll update my question to reflect the issue i am having with your answer — Tix, Mar 27 '18 at 04:39

score 0 · Answer 3 · answered Mar 27 '18 at 04:19

0

<div class="row no-gutters">
<div class="col-lg-5"> text goes here </div>
<div class="col-lg-2"> image goes here </div>
<div class="col-lg-5"> text goes here </div>
</div>

answered Mar 27 '18 at 04:19

santhosh

54
1
3

Please read https://stackoverflow.com/help/how-to-answer __ the answer should have an explanation. – Carol Skelly Mar 27 '18 at 07:25

Bootstrap 4: Image center in row with 2 text blocks on either side

3 Answers3