0

With utilising d-flex, justify-content-center and flew-grow-1, I achieved the desired result with 3 divs.

<div class="row bg-primary d-flex justify-content-center">
  <div class="col-auto">
      LEFT
  </div>
  <div class="col-auto flex-grow-1 text-center">
      Middle
  </div>
  <div class="col-auto">
      Right
  </div>
</div>

enter image description here

I want to achieve the same effect with 2 divs while Middle one is forced to be the exact center. However, if I try to remove the 'Right' element, it can't calculate the center.

<div class="row bg-primary d-flex justify-content-center">
  <div class="col-auto">
      LEFT
  </div>
  <div class="col-auto flex-grow-1 text-center">
      Middle
  </div>
</div>

enter image description here

Is there a way to force "Middle" to be exact center and Left or Right divs take space from Middle as they need? Kind of like all the positions of Left and Middle are same as in the first image but 'Right' div is not there.

Fiddle http://jsfiddle.net/4a7tLf0m/

I can achieve the same effect with giving specified column size (col-3 instead of col-auto) but I don't like the fact that I need to be explicit. Is this the only way to go?

senty
  • 12,385
  • 28
  • 130
  • 260

1 Answers1

1

Keep the right/left div as invisible when not required. That way middle will always occupy the exact same position as when the other 2 divs are not there.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto">
      Right
    </div>
  </div>

  <hr/>

  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto invisible">
      Right
    </div>
  </div>

  <hr/>

  <div class="row bg-primary d-flex justify-content-center">
    <div class="col-auto invisible">
      LEFT
    </div>
    <div class="col-auto flex-grow-1 text-center">
      Middle
    </div>
    <div class="col-auto">
      Right
    </div>
  </div>
</div>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
  • This is pretty neat solution – senty Nov 30 '18 at 08:41
  • Thanks @Senty :) – Nandita Sharma Nov 30 '18 at 08:43
  • 1
    But if the text grows in the right or left it will not remain in the middle by doing in that way so @Senty are you sure that your text will remain the same. – Aditi Nov 30 '18 at 08:46
  • @Aditi Oh actually you are right.. – senty Nov 30 '18 at 10:25
  • FYI I just want to explain why it's not working with justify-content-center, col-auto, flex-grow-1. As col-auto only expands up to the width covered by text. For the second div on which justify-content-center and flex-grow-1 is applied centers the text only within the available width excluding the width covered by first div. – Aditi Nov 30 '18 at 10:37
  • @senty This is why you should use `col` instead of `col-auto` as explained in [my answer](https://stackoverflow.com/a/53553357/171456). – Carol Skelly Nov 30 '18 at 10:53
  • Is there any clean alternative to perform the same OP task without requiring the right `div` to exist (for BS 5)? Recently reached same goal. Maybe playing with `.me-auto` and `.ms-auto` or the like (mentioned in Bootstrap Flex docs), which couldn't solve it per recent attempts. – Adrián Apr 11 '22 at 00:11