Creation of buttons with bootstrap

Question

1. I need to create buttons with the bootstrap style similar to the image below. You can find the buttons: https://fontawesome.com/

2. However I can arrive only in this result:

1. I use the following code:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<a class="btn btn-large btn-danger" href="#">
  <i class="fa fa-user-friends fa-3x"></i>
  TESTE
</a>

3. I would just like to place the icon above and the writing below.

Answer 1

Just use the original Bootstrap flex classes, you don’t even need extra CSS for that. https://getbootstrap.com/docs/4.0/utilities/flex/

NOTE: use the Bootstrap tb grid classes to avoid problems like, container > row > col logically you will need to define how many col-x by line you want and how will you break them as the screen decreases with col-md-x and col-sm-x etc. https://getbootstrap.com/docs/4.0/layout/grid/

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="container">
<div class="row">
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
    <div class="col-2">
        <a class="btn btn-large btn-danger m-2 d-flex flex-column justify-content-center align-items-center" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
            <span>TESTE</span>
        </a>
    </div>
</div>
</div>

Answer 2

I arrived at a similar result using card

<div class="card">
        <a class="btn btn-large btn-danger" href="#">
            <i class="fa fa-user-friends fa-3x"></i>
        </a>
        <div class="card-footer">
            TESTE
        </div>
    </div>