How to center items in a bootstrap column such that every item starts in the same position relative-CodePudding

In order to replicate my problem, I wrote a simple HTML with 2 bootstrap columns, I would like my second column to have multiple <p> items , each one of them below the other, however the issue arises when the strings contained in the <p> tag are of different lengths, since I want them to be in the center of the column but to also start in the same position relative to the X-axis.

<body>
<h2 class="text-center my-5">
    title
</h2>
<div class="container">
    <div class="row">
        <div class="col-md-6 ">
            Some unrelated text
        </div>

        <div class="col-md-6">
            <p>Small text</p>

            <p>A much longer text</p>

        </div>

    </div>

</div>

Essentially I would like the string "A much longer text" to be exactly below "Small text", so that it would look this way:

Small text
A much longer text

Instead of

   Small text
A much longer text

I tried styling the column with text-align:center as well as using flexbox and align-items:center but they both produce the same result.

CodePudding user response：

Using the bootstrap 4 flex box should solve the issue. On running the code below, you would find that bootstrap responsiveness is placing the col-md-6 in 2 lines. Running code outside stack overflow should give the result you desire.

<!DOCTYPE html>
    <html>

      <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
      </head>

      <body>
        <h2 class="text-center my-5">
          title
        </h2>
        <div class="container">
          <div class="row">
            <div class="col-md-6 border">
              Some unrelated text
            </div>
            <!-- .col-md-6 -->
            <div class="col-md-6 border">
              <div class="d-flex flex-column w-100">
                <p align="center" class="mb-0">Small text</p>
                <p align="center" class="mb-0">A much longer text</p>
              </div>
              <!-- .flex-column -->
            </div>
            <!-- .col-md-6 -->
          </div>
          <!-- .row -->
        </div>
        <!-- .container -->
      </body>
    </html>

CodePudding user response：

Using bootstrap reslove your issue, you can align content in center ofthe page horizontal. try below example.

<div class="pricing4 bg-light" style="margin-top: -20px;padding-bottom: 25px;margin-bottom: -32px;">
<div class="container">
    <!-- Row  -->
    <h2 style="text-align: center;padding: 40px;">This is improper content (div)</h2>
    <div class="row justify-content-md-center">
        <!-- Row  -->
        <div class="row justify-content-md-center" style="margin-left: 30px;margin-right: 30px;">
            <!-- Column -->
            <div class="col-md-3">
                <div class="card card-shadow border-0 mb-4">
                    <img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
                    <div class="pveventcard">Tuesday 11th May, 6:00PM</div>
                    <div class="p-3" style="height: 200px;">
                        <h6 class="font-weight-medium mb-0">The event is going bla</h6>
                        <h6 class="subtitle font-13">16/5/2021</h6>
                        <p>short description goes here short </p>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <div class="col-md-3">
                <div class="card card-shadow border-0 mb-4">
                    <img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
                    <div class="pveventcard">Tuesday 11th May, 6:00PM</div>
                    <div class="p-3" style="height: 200px;">
                        <h6 class="font-weight-medium mb-0">The event is going bla</h6>
                        <h6 class="subtitle font-13">16/5/2021</h6>
                        <p>short description goes here short </p>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <div class="col-md-3">
                <div class="card card-shadow border-0 mb-4">
                    <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
        </div>
                    <div class="pveventcard">Tuesday 11th May, 6:00PM</div>
                    <div class="p-3" style="height: 200px;">
                        <h6 class="font-weight-medium mb-0">The event is going bla</h6>
                        <h6 class="subtitle font-13">16/5/2021</h6>
                        <p>short description goes here short </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>