0

So, I'm trying to create this container that has an image to the left, a title and a description in the middle and a button on the right, but I can't seem to center the image in the first column or the button in the last column, why is that?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
Riley Varga
  • 670
  • 1
  • 5
  • 15

2 Answers2

-1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2" style="text-align:center">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
You can simply add text-align: center
Ankit Mishra
  • 1
  • 1
-1

See below snippet for a flex solution.

.row {
  display: flex;
  flex: auto;
  align-items: center;
  justify-content: center;
}
.col-md-2 {
  display: flex;
  justify-content: center;
}
.col-md-8 {
  display: flex;
  flex-direction: column;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
Kiki
  • 117
  • 1
  • 3