How to keep texts centered and aligned between 2 separate columns using Bootstrap

Question

How to keep texts centered and aligned between 2 separate columns using Bootstrap

65 views Asked by NicoSan At 28 January 2024 at 13:58

I currently have a responsive page that in desktop mode contains 2 columns with text that is centered and aligned. So far, so good. But when I reduce the resolution and switch to mobile mode, I want to get a single column with text that remains centered and aligned, but that's not the case.

Here's what I get in mobile mode :

+------------------------+
|      text              |
|      short text        |
|      long text         |
|   another text         |
|   another short text   |
|   another long text    |
+------------------------+

The expected behavior would be an alignment of texts between the 2 columns like this :

+---------------------------+
|      text                 |
|      short text           |
|      long text            |
|      another text         |
|      another short text   |
|      another long text    |
+---------------------------+

Here's a code snippet to help you understand better.

<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link href="test.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex justify-content-center">
        <div>
          text<br/>
          short text<br/>
          long text<br/>
        </div>
      </div>
      <div class="col-lg-6 d-flex justify-content-center">
        <div>
          another text<br/>
          another short text<br/>
          another long text<br/>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Maybe I'm going about this the wrong way, but I've looked and I haven't found a solution. But I'm still hopeful and I hope you can help me. Thanks in advance to all for your help.

Original Q&A

There are 3 answers

**Kokodoko** · Answer 1 · 2024-01-28T14:07:44+00:00

If I copy>paste your code with bootstrap css 3.3.7 the alignment seems to work? I assume you want the text to be aligned on the left.

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex justify-content-center">
        <div>
          text<br/>
          short text<br/>
          long text<br/>
        </div>
      </div>
      <div class="col-lg-6 d-flex justify-content-center">
        <div>
          another text<br/>
          another short text<br/>
          another long text<br/>
        </div>
      </div>
    </div>
  </div>
</body>

**Suryateja KONDLA** · Answer 2 · 2024-01-28T14:10:28+00:00

<html lang="en">

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 d-flex justify-content-center">
        <div class="text-start">
          <div>text</div>
          <div>short text</div>
          <div>long text</div>
          <div>another text</div>
          <div>another short text</div>
          <div>another long text</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

**Mehdi** · Answer 3 · 2024-01-29T15:31:40+00:00

you need to overwrite Bootstrap Css with !important. Don't think you can achieve it with Bootstrap alone. Why don't you try with this. You can still style it as you want

.style2{
    min-width: 40%;
}

@media screen and (min-width: 992px){
    .style2{
        justify-content: center !important;
        /* align-items: center !important; */
        text-align: center !important;
    }
}

  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex justify-content-center mystyle">
        <div class="style2">
          text<br/>
          short text<br/>
          long text<br/>
        </div>
      </div>
      <div class="col-lg-6 d-flex justify-content-center">
        <div class="style2">
          another text<br/>
          another short text<br/>
          another long text<br/>
        </div>
      </div>
    </div>
  </div>
</div>

TechQA.

How to keep texts centered and aligned between 2 separate columns using Bootstrap

There are 3 answers

Related Questions in CSS

Related Questions in VERTICAL-ALIGNMENT

Related Questions in TEXT-JUSTIFY

Popular Questions

Popular Tags

Trending Questions