-1

I'm trying to apply Bootstrap 4.1's align-middle to a col inside of a row. But it seems the content inside it stays aligned to the top. Here is my code:

<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

Here is a snippet showing the result:

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

How do I align the icon correctly?

JohnSmith1976
  • 536
  • 2
  • 12
  • 35

3 Answers3

1

You can use the Bootstrap 4's my-auto class on the column. Here is the code:

html:

<div class="container-fluid">
  <a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1 my-auto">
      <p>line 1</p>
      <p>line 1</p>
      <p>line 1</p>
    </div>
  <div class="col-auto text-right">
  <i class="fas fa-chevron-right"></i>
</div>

css:

p {
  margin: 16px;
}

The paragraph has a margin-bottom of 1rem, so you can either remove the margin or just give it an overall margin like I did. This worked fine for me.

Corné
  • 1,304
  • 3
  • 13
  • 32
  • Genius :-) One note though, in your example code above yuo've added `my-auto` to the wrong `col`. – JohnSmith1976 Dec 21 '18 at 09:07
  • Oh, I see you want the `` to be aligned. Same principle applies :) . If you don't mind, could you just give it an upvote as well please to ensure the correct answer is at the top. – Corné Dec 21 '18 at 09:10
0

Try wrapping your i with span and let the span have the align-middle class

CodeRed
  • 905
  • 1
  • 6
  • 24
  • Sorry @CodeRed it doesn't seem to make a difference. – JohnSmith1976 Dec 21 '18 at 08:42
  • @JohnSmith1976 where do you want to add icon? Is it beside on of the lines or somewhere? – CodeRed Dec 21 '18 at 08:50
  • I want to have the icon with equal distance between top and bottom. So aligned center. But don't get to caught up on the icon. It could be some text instead. The important part is to center the content in the middle. – JohnSmith1976 Dec 21 '18 at 08:52
0

You can give the row a fixed height and then adjust your col line-height accordingly. Please see code below:

html:

<div class="container-fluid">
<a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1">
      Line 1<br>Line 2<br>Line 3
    </div>
    <div class="col-auto text-right">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
</a>

css:

.row {
 height: 150px;
}

.col {
 line-height: 50px;
}

If you have only one line in your column, you can make the line-height of the column the same as the row-height. You now have three lines so take the row-height divided by three.

Corné
  • 1,304
  • 3
  • 13
  • 32