Position the personalized SVG button to align perfectly with the text underneath within a Bootstrap 5 Card structure

Is there a way to align custom buttons in a bootstrap card such that they are 3 wide and wrap to 2 wide on small screens? Additionally, I am struggling to center the text properly below the buttons. Any assistance would be greatly appreciated. Here is my code snippet: https://i.sstatic.net/BIHQu.png

.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>
  
    <!-- More button and div elements here for Button 2 and Button 3 -->
  
  </div>
htmlcsssvgbootstrap-5

Answer №1

To achieve a two-column layout on small screens, make sure to include the following classes:

col-6 col-sm-4

Here is a complete 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6ab">[email protected]</a>/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>
                        (more columns with similar content)
                        
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63000c110623514d52524d55">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f4eff3eff2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

The addition of justify-content-center class to each column ensures proper alignment of text and images. Rows do not need to be added for every 3 columns, instead all columns are placed within one row to accommodate 2 columns per row on small screens. The width of each column is controlled by the col-6 col-sm-4 classes.

Answer №2

You can streamline your HTML using a custom Web Component

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

You also have the option to utilize shadowDOM, which allows for more concise inner CSS styling without the risk of global CSS interfering with shadowDOM content

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>

Answer №3

Gratitude to all who contributed their help and suggestions, I have incorporated elements from each of you. Here is the revised code snippet:

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

The final outcome can be viewed here: https://i.sstatic.net/sWGgx.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic parallax or stacked vertical text animation

I am attempting to replicate the text effect found on . The text is centered both vertically and horizontally within each div, but as you scroll down, the top position shifts creating a parallax effect. As you continue scrolling, the text transitions to th ...

jquerycssparallax

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

htmlcssbootstrap-4

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

AngularJS creates a new window in your application

I have created two html pages named web.html and addroute.html. Both pages are built with bootstrap. The angularjs script includes two controllers: webctrl and addctrl. In web.html, there is a button that, when clicked, opens the addroute.html page. I am ...

javascripthtmlangularjstwitter-bootstrap

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

javascripthtmlcssreactjsantd

What is the best way to set up a clickable image without making the entire div clickable?

Is it possible to make just a specific image clickable within a div without making the entire div clickable? I have an image inside an anchor tag and a surrounding div that is clickable. The issue is that the entire space around the first image, .home, is ...

htmlcssimagehyperlink

If the element contains a specific class, then remove that class and apply a new

Encountering an issue here. I have 4 HTML elements structured like this: <!-- Light Color Scheme - Header False and Show Faces True --> <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptiv ...

jquerycsshtml

Styling a div element in CSS so that it adjusts its size to fit its

How can I make a div element adjust to its content and also break the line so that the next element appears below it? I attempted setting the display property to inline-block, but then the div no longer breaks the line... Normally, it breaks the line, but ...

css

Expand the container as the child element grows using flexbox

Check out this layout: <div class="wrapper"> <div class="middleman"> <div class="inner-child"> /* Child with the ability to expand height */ </div> </div> </div> Imagine the wrapper has an initial hei ...

cssflexbox

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

cssangularangular-material

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...

javascripthtmlcss

tips for automatically adjusting the height and width of an image within a div

I'm struggling with fitting an image that is 1587*666 into a div that has a height of 600px and width of 300px. Can someone provide me with an example to achieve this?https://i.sstatic.net/4SWi5.jpg Here's the code snippet: <div id="myDiv" s ...

htmlcss

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

I am currently utilizing a navigation bar from a Bootstrap theme within my React project. The navigation bar includes an in-built media query that determines whether it should display as a dropdown menu or not, with a toggler to handle the dropdown functi ...

javascripthtmlcssreactjs

Assign a value of 0 to the ngModel if it is empty

I am trying to ensure that when the value is null, it defaults to 0. At the moment, I am utilizing Angular PrimeNG components. <p-calendar [(ngModel)]="model.start_time" [timeOnly]="true" placeholder="00:00"></p-calen ...

htmlangularprimeng

Using a scrapy spider to navigate through microsoft.com in search of the sign-in link

I have encountered an issue while trying to locate the sign-in link using a scrapy crawler on various websites, such as www.microsoft.com. Initially, the response I receive from the website does not contain the sign-in link. However, upon inspecting the "V ...

htmlscrapyweb-crawler

Detecting iOS format in HTML email communications allows for a more seamless

Recently, I discovered a meta tag that removes the phone number as a link in HTML on iOS. I'm curious if this also works with HTML emails. <meta name="format-detection" content="telephone=no"> I've been using workarounds to handle address ...

htmlhtml-email

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

javascripthtmlcss

Mastering the Art of Incorporating jQuery, JavaScript and CSS References into Bootstrap with ASP.NET WebForms

Hey there, I'm currently working on a personal project as a beginner in Bootstrap. My main challenge for the past two days has been trying to integrate a dateTimePicker and number Incrementer using Bootstrap techniques. Despite my efforts in researchi ...

javascriptjquerycssasp.nettwitter-bootstrap