CODEWITHSUNDEEP
htmlcssbootstrap-4
Lalababa987
Lalababa987

Reputation: 1

Bootstrap 4 center (horizontally) image + text inside div

Bootstrap 4:
How to horizontally center a div that contains an image and text to the right of the image?

                                 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
                                 |     | Heading                     |
                                 + IMG +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
                                 |     | Lead                        |
                                 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

I tried making three columns inside a row,

<div class="row">
    <div class="col"></div>
    <div class="col-auto">
        <img src="..." width="..." height="..." />
        <h1 class="display-5 m-0">...</h1>
        <p class="lead">...</p>
    </div>
    <div class="col"></div>
</div>

but the problem is the heading is too long and wraps around to the next line. If I make the middle column larger, it is no longer centered. I need it to be centered regardless of text length.

Upvotes: 0

Views: 396

Answers (3)

parag patel
parag patel

Reputation: 3283

Try this code

  <div class="text-center">
      <div class="row justify-content-md-center">
        <div class="col-md-auto">
          <img src="https://placehold.it/100x100">
        </div>
        <div class="col-md-auto">
            <h1 class="display-5 m-0">...</h1>
            <p class="lead">...</p>
        </div>
      </div>
    </div>

Working demo here: https://www.bootply.com/UHz1ACh2CI

Upvotes: 0

Lalababa987
Lalababa987

Reputation: 1

I figured it out.

<div class="row">
  <div class="col-12 d-flex flex-row justify-content-center">
    <img src="..." width="..." height="..." />
    <div>
      <h1 class="display-5 m-0">...</h1>
      <p class="lead">...</p>
    </div>
  </div>
</div>

Upvotes: 0

Ahed Kabalan
Ahed Kabalan

Reputation: 855

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
    <div class="col-3">
        <img src="https://pixlr.com/photo/image-design-11-1-pw.jpg" style="width: 100%;height: 100%;" />
    </div>
    <div class="col-9">  
        <h5>Hello World</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
    </div>
</div>

Upvotes: 2

Related Questions