Html - Align custom SVG button with text below in Bootstrap 5 Card

XxnumbxX
July 9, 2023
192 views
1 vote
2 Answers

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.

.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>

Answers

To have two columns on small screens, you need to add the appropriate classes:

col-6 col-sm-4

Here full example

.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;
    margin: 0 auto;
}

.quick-link-btn svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
    color: #e7515a;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Quick Links</h5>
                    
                    <div class="row mb-5">
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time</p>
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center;">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time Clock</p>
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center;">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time Clock</p>
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center;">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time Clock</p>
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center;">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time Clock</p>
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 d-flex justify-content-center" style="text-align: center;">
                            <div>
                                <a href="javascript:void(0)" class="btn quick-link-btn">
                                    <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>
                                <p>Time Clock</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

justify-content-center is now added to each column, and that the content of each column is wrapped in a div, since both text-to-image and image-to-text alignment needs to be aligned.
You also don’t need to add rows for every 3 columns. Since on a small screen a row should have 2 columns per row. All columns are added to one row. Width of every column will be regulate of classes col-6 col-sm-4

You can simplify your HTML with a native Web Component

<time-button>label</time-button>

customElements.define("time-button", class extends HTMLElement {
  constructor(){
    super().attachShadow({mode:"open"})
           .innerHTML = `<style>
              :host { display:inline-block; --w:60px }
              div {
                  padding: 10px;
                  border-radius: 8px;
                  cursor: pointer;
                  width: var(--w);
                  height: var(--w);
                  background: #fbeced;
              }
              svg { width:100%; color:#e7515a }   
              h4  { margin-block-start:.5em; text-align:center;font: 12px arial }
           </style>
          <div>
            <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>
            <h4><slot>LABEL</slot></h4>
          </div>`;
  }
  connectedCallback(){
    this.onclick = (evt) => {
      alert( this.innerHTML );
    }
  }
});

<time-button>Time Clock</time-button>
<time-button>Button1</time-button>
<time-button>Button2</time-button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Align custom SVG button with text below in Bootstrap 5 Card

Answers