Search code examples
htmlcsssvgbootstrap-5

Align custom SVG button with text below in Bootstrap 5 Card

I am trying to align custom buttons 3 wide inside a bootstrap card. I want the buttons to wrap to next row to 2 wide on small screens. Also I cannot get the text to center properly below the buttons. Any help appreciated, thanks.

Here is what I have so far. enter image description here

.quick-link-btn {
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid #fbeced;
        width: 60px;
        height: 60px;
        fill: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #fbeced;
    }

    .quick-link-btn svg {
        width: 30px;
        height: 30px;
        stroke-width: 1.5;
        color: #e7515a;
    }
<div class="card-body">
  <h5 class="card-title mb-3">Quick Links</h5>
  <div class="row d-flex justify-content-center mb-5">
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Time Clock</div>
    </div>
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 2</div>
    </div>
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 3</div>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 1</div>
    </div>
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 2</div>
    </div>
    <div class="col-4">
      <a class="quick-link-btn" href="javascript:void0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 3</div>
    </div>
  </div>

Solution

  • Thank you everyone for your help, I used a few things from each of you. Below is code.

    .quick-link-box { 
    display:inline-block; 
    --w:80px 
}
.quick-link {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    width: var(--w);
    height: var(--w);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.quick-link svg { 
    height: 100%;
    width: 100%;
    stroke-width: 1.5;
}

.quick-link-box h4  { 
    white-space: nowrap !important; 
    margin-block-start:.5em; 
    text-align:center;
    font: 12px arial;
}

.quick-link:hover {
    background-color: #eaeaec;
}

.quick-link:hover svg {
    color: grey;

}

.ql-primary {
    background-color: #eceffe;
}
.ql-primary svg{
    color: #4361ee;
}
.ql-info {
    background-color: #e6f4ff;
}
.ql-info svg{
    color: #2196f3;
}
.ql-success {
    background-color: #ddf5f0;
}
.ql-success svg {
    color: #00ab55;
}
.ql-warning {
    background-color: #fcf5e9;
}
.ql-warning svg {
    color: #eab764;
}
.ql-secondary {
    background-color: #f2eafa;
}
.ql-secondary svg {
    color: #805dca;
}
.ql-danger {
    background: #fbeced;
}
.ql-danger svg {
    color:#e7515a;
}

 <div class="card-body">
            <h5 class="card-title mb-3">Quick Links</h5>
            <div class="row d-flex justify-content-center">
                <div class="col-4 text-center mb-3">
                    <div class="quick-link-box">
                        <a href="{{ route('timeclock.index') }}">
                            <div class="quick-link ql-danger">
                                <svg viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12 6 12 12 16 14"></polyline>
                                    </svg>
                            </div>
                        </a>
                        <h4 class="text-muted">Time Clock</h4>
                    </div>
                </div>

    And the Result: Final Result