0

I would like to place an icon between two buttons. The icon is larger than the buttons and I would like their centers to be on a line. This means that the icon is a bit above and below the buttons.

A simple way to do this is a button group. Unfortunately, the icon is rounded off and buttons in a button group have sharp edges to neighbours in the group and the icon is rescaled to the same size as the buttons:

neighbours

So I tried to get rid of the button-group. Bootstrap has an align-middle class for vertical alignment. But I can't get this to work. It looks like this:

align-middle

I browsed and found this: How to center an element horizontally and vertically?

The answer lists a variety of approaches. I would like to stick with bootstrap and avoid custom css as far as possible. But one of the options sounded really good to me: Using justify and align in a flexbox container. Bootstrap containers are flexboxes, so I wrapped my buttons in a container and added align-items: center; justify-content: center;. Same result as the align-middle picture above.

I tried a variety of other css combinations, without any success. The three approaches above seem the cleanest to me, so I presented them here.

A fiddle: https://jsfiddle.net/aq9Laaew/285443/

html (assuming that you have bootstrap and fontawesome):

<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>
<br>

<!-- using the bootstrap align-middle class -->
<div class="align-middle">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>
<br>

<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>

Potential duplicates (this is a very common question):

isherwood
  • 58,414
  • 16
  • 114
  • 157
lhk
  • 27,458
  • 30
  • 122
  • 201

1 Answers1

5

Not 100% sure on what you want but if you want to align the buttons, then you can also use bootstrap flexbox and bootstrap text color instead of additional styling: (Edited: align-self-center vs align-items-center)

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>


<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-start align-items-center">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle text-danger"></i>
  </button>
  <i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle text-success"></i>
  </button>
</div>
<br/>
<div class="d-flex justify-content-start">
  <button type="button" class="btn btn-outline-secondary align-self-center">
    <i class="far fa-times-circle text-danger"></i>
  </button>
  <i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary align-self-center">
    <i class="far fa-check-circle text-success"></i>
  </button>
</div>
Victoria Le
  • 860
  • 6
  • 15
  • This looks neat, it does the aligning that I want to do. But it resizes the question icon to the size of the buttons. The icon should stay bigger than the buttons. But the middle points of all the icons (you could call it their center of mass) should be on one line. – lhk Dec 04 '18 at 20:11
  • @lhk is that what you want? – Victoria Le Dec 04 '18 at 20:19
  • yep this is fantastic :) – lhk Dec 04 '18 at 20:49