bootstrap-4psd

how to design sample psd with bootstrap 4

I want to design the same psd.

psd

<div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div class="d-inline-flex align-items-center">
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-map-marker-alt"></i></h4>
                <p class="col-sm-11">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
                <p class="col-sm-11">Telephone
                    <br>8888888888
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
                <p class="col-sm-11">Email
                    <br>site@gmail.com
                </p>
            </div>
            <div class="row">
                <div class="mr-5 h4">
                    <div class="d-inline">
                        <i class="fab fa-bluetooth-b"></i>
                        <i class="fab fa-instagram"></i>
                        <i class="fab fa-facebook"></i>
                        <i class="fab fa-google-plus"></i>
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

But I see this demo.

Demo

The justify-content-center aligns the form horizontally, but I can't figure out how to align it vertically. I have tried to use align-items-center and align-self-center, but it doesn't work.

What am I missing?

Solution

  • You can use this to get started:

    <div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div>
            <div class="row">
              <div class="col-sm-11">
                <p class="right">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
              </div>
              <div class="col-sm-1">
                <h4><i class="fas fa-map-marker-alt"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Telephone
                    <br>8888888888
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Email
                    <br>site@gmail.com
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
              </div>


            </div>
            <div class="row">
                <div class="right absolute">
                  <div class="mr-5 h4">
                      <div class="d-inline">
                          <i class="fab fa-bluetooth-b"></i>
                          <i class="fab fa-instagram"></i>
                          <i class="fab fa-facebook"></i>
                          <i class="fab fa-google-plus"></i>
                          <i class="fab fa-twitter"></i>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

    I added some CSS to have the text from right to left:

    .right {
  text-align: right;
  right: 0;
}

.absolute {
  position: absolute;
}

    Here is a Codepen using your code: https://codepen.io/brooksrelyt/pen/omLevx

    Note: I don't have access to icons/images.